[
  {
    "path": ".csslintrc",
    "content": "{\n    \"adjoining-classes\"        : false,\n    \"box-sizing\"               : false,\n    \"display-property-grouping\": false,\n    \"fallback-colors\"          : false,\n    \"order-alphabetical\"       : false,\n    \"star-property-hack\"       : false,\n    \"unqualified-attributes\"   : false\n}\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.md",
    "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\n- Pure Version: [e.g. 2.0.0]\n\nAdd any other context about the problem here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature_request.md",
    "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "Please consider the following before submitting a pull request:\n\nGuidelines for contributing: https://github.com/pure-css/pure/blob/main/CONTRIBUTING.md\n\nExample of changes on an interactive website such as the following:\n\n- http://jsbin.com/\n- http://jsfiddle.net/\n- http://codepen.io/pen/\n\n---\n\n<!-- The following statement must stay in the PR description -->\n\nI confirm that this contribution is made under a BSD license and that I have the authority necessary to make this contribution on behalf of its copyright owner.\n"
  },
  {
    "path": ".github/dependabot.yml",
    "content": "version: 2\nupdates:\n  # repository root\n  - package-ecosystem: npm\n    directory: \"/\"\n    schedule:\n      interval: daily\n    open-pull-requests-limit: 10\n    ignore:\n      - dependency-name: autoprefixer\n        versions:\n          - 10.x\n  # purecss.io site\n  - package-ecosystem: npm\n    directory: \"/site\"\n    schedule:\n      interval: daily\n    open-pull-requests-limit: 10\n    groups:\n      docusaurus:\n        patterns:\n          - '@docusaurus/*'\n"
  },
  {
    "path": ".github/stale.yml",
    "content": "# Configuration for probot-stale - https://github.com/probot/stale\n\n# Number of days of inactivity before an Issue or Pull Request becomes stale\ndaysUntilStale: 60\n\n# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.\n# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.\ndaysUntilClose: 7\n\n# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)\nonlyLabels: []\n\n# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable\nexemptLabels:\n  - pinned\n  - security\n  - \"[Status] Maybe Later\"\n  - enhancement\n\n# Set to true to ignore issues in a project (defaults to false)\nexemptProjects: false\n\n# Set to true to ignore issues in a milestone (defaults to false)\nexemptMilestones: false\n\n# Set to true to ignore issues with an assignee (defaults to false)\nexemptAssignees: false\n\n# Label to use when marking as stale\nstaleLabel: wontfix\n\n# Comment to post when marking as stale. Set to `false` to disable\nmarkComment: >\n  This issue has been automatically marked as stale because it has not had\n  recent activity. It will be closed if no further activity occurs. Thank you\n  for your contributions.\n# Comment to post when removing the stale label.\n# unmarkComment: >\n#   Your comment here.\n\n# Comment to post when closing a stale Issue or Pull Request.\ncloseComment: >\n  Issue was closed because of inactivity.\n  If you think this is still a valid issue, please file a new issue with additional information.\n\n# Limit the number of actions per hour, from 1-30. Default is 30\nlimitPerRun: 30\n\n# Limit to only `issues` or `pulls`\n# only: issues\n\n# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls':\n# pulls:\n#   daysUntilStale: 30\n#   markComment: >\n#     This pull request has been automatically marked as stale because it has not had\n#     recent activity. It will be closed if no further activity occurs. Thank you\n#     for your contributions.\n\n# issues:\n#   exemptLabels:\n#     - confirmed\n"
  },
  {
    "path": ".github/workflows/deploy.yml",
    "content": "name: Deploy\n\non:\n  push:\n    branches: [main]\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v2\n      - name: Use Node.js\n        uses: actions/setup-node@v2\n        with:\n          node-version: 20.x\n      - uses: webfactory/ssh-agent@v0.5.0\n        with:\n          ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}\n      - name: Release to GitHub Pages\n        env:\n          DEPLOYMENT_BRANCH: main\n          GH_EMAIL: ${{ secrets.GH_EMAIL }}\n          GH_NAME: ${{ secrets.GH_NAME }}\n          GIT_USER: ${{ secrets.GH_NAME }}\n          USE_SSH: true\n        run: |\n          npm ci\n          git config --global user.name \"${GH_NAME}\"\n          git config --global user.email \"${GH_EMAIL}\"\n          cd site\n          npm install\n          npm run deploy\n"
  },
  {
    "path": ".github/workflows/test.yml",
    "content": "name: Testing\n\non:\n  push:\n    branches: [main]\n  pull_request:\n    branches: [main]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v2\n      - name: Use Node.js\n        uses: actions/setup-node@v2\n        with:\n          node-version: 20.x\n      - run: npm ci\n      - run: npm run lint\n      - run: npm test\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\n.nyc_output/\nartifacts/\nbuild/\ncoverage/\nnode_modules/\nrelease/\n"
  },
  {
    "path": ".npmrc",
    "content": ""
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n  and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n  overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n  advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n  address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\n.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior,  harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# How to Contribute to Pure\n\nFeel free to [open issues][] and send pull requests on GitHub! When sending a\npull request, please create a new topic/feature branch, and send your pull\nrequest from that branch. Please do _not_ send pull requests from your `main`\nbranch because this tends to lead to merge conflicts.\n\nIn order for us to to merge your pull requests, we need you to review and sign\nour [Contributor License Agreement][]. The CLA protects you and your\ncontributions along with all other developers who use Pure.\n\n[contributor license agreement]: #contributor-license-agreement\n[open issues]: https://github.com/pure-css/pure/issues\n\n## Docs and Website\n\n[Pure's website][pure] is located in the `site` directory. Please feel free\nto open issues or questions in the Issue tab.\n\n[pure]: http://purecss.io/\n[pure-site]: https://github.com/pure-css/pure/tree/main/site\n\n## Building and Testing Pure\n\nPure uses [Grunt][], a JavaScript task runner that runs on [Node.js][], for\nbuilding and testing. You'll need Node.js and Grunt installed to work on Pure.\nOnce installed, clone the `pure` repo (either the main repo or your fork) and\ninstall Pure's gruntplugins via npm:\n\n```shell\n$ git clone git://github.com/pure-css/pure.git\n$ cd pure/\n$ npm install\n```\n\nBuilding Pure is easy, run `grunt`:\n\n```shell\n$ grunt\n```\n\nPure uses [CSSLint][] for basic testing to make sure we're shipping valid CSS\nwhich complies with standard best practices. To run Pure's tests, run\n`grunt test`:\n\n```shell\n$ grunt test\n```\n\n**Note:** To save your fingers from The Developer Konami Code: ⌘⇥ ↑ ⏎ run the\n`grunt watch` task with will continuously test and build Pure anytime a CSS file\nchanges:\n\n```shell\n$ grunt watch\n```\n\n### Browser Support and Testing\n\nPure is tested and works in:\n\n- Latest Stable: Edge, Firefox, Chrome, Safari\n- iOS 6+\n- Android 4.x\n\nBefore sending pull requests, please ensure that you open the test HTML files\nin these environments. If you don't have access to all these environments, list\nthe ones that you have tested in on the pull request description. That way, we\nknow what's missing, and can help you out.\n\n[grunt]: http://gruntjs.com/\n[node.js]: http://nodejs.org/\n[csslint]: https://github.com/stubbornella/csslint\n\n## Coding Standards and Style Guide\n\nPure has adopted the [SMACSS][] conventions for writing CSS. If you are new to\nSMACSS, you should give it a read, especially the section on [module rules][].\n\nThe [Extend][] section of the Pure website more info about the style guide and\nnaming conventions, along with examples of how to extend the library.\n\n[smacss]: http://smacss.com/\n[module rules]: http://smacss.com/book/type-module\n[extend]: http://purecss.io/extend/\n\n## Contributor License Agreement\n\nPlease [sign the Yahoo CLA][cla] after sending pull requests. We can't merge\nyour pull requests unless you have a signed CLA.\n\nThe CLA ensures that everyone who submits a work of authorship to Pure is\ncontributing work that is their own or for which they can authoritatively speak.\nThis protects the all of of developers who use Pure in their daily work, all of\nwhom rely on Pure's BSD license to appropriately cover their use of the library.\n\nThe CLA does **not** transfer title or copyright of your contributed work to\nYahoo!. It merely guarantees that you approve the use of your work within Pure\nand by those who use the library under the terms of its license.\n\nIf you want to make contributions (software, documentation or other material) to\nthe Pure Project and such contributions could be covered under intellectual\nproperty laws, you must submit a Contributor License Agreement (CLA) prior to\nmaking your contribution:\n\n1. Review Pure's BSD license. All of Pure's code is issued under this license,\n   and contributions you make to the library will be subject to this license.\n   **Note:** that the BSD license is very liberal; it allows for reuse and\n   adaptation in commercial projects.\n\n2. [Sign the Yahoo CLA][cla] online. If you have questions about the CLA, you\n   can address them to opensource-cla@yahoo-inc.com.\n\n[cla]: https://yahoocla.herokuapp.com/\n"
  },
  {
    "path": "CREDITS.md",
    "content": "Normalize.css License\n=====================\n\nCopyright (c) Nicolas Gallagher and Jonathan Neal\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n"
  },
  {
    "path": "Gruntfile.js",
    "content": "module.exports = function (grunt) {\n\n    // -- Config -------------------------------------------------------------------\n\n    grunt.initConfig({\n\n        nick : 'pure',\n        pkg  : grunt.file.readJSON('package.json'),\n\n        // -- Clean Config ---------------------------------------------------------\n\n        clean: {\n            build    : ['build/'],\n            build_res: ['build/*-r.css'],\n            release  : ['release/<%= pkg.version %>/']\n        },\n\n        // -- Copy Config ----------------------------------------------------------\n\n        copy: {\n            build: {\n                src    : 'src/**/css/*.css',\n                dest   : 'build/',\n                expand : true,\n                flatten: true\n            },\n\n            release: {\n                src : '{LICENSE,README.md,HISTORY.md}',\n                dest: 'build/'\n            }\n        },\n\n        // -- Concat Config --------------------------------------------------------\n\n        concat: {\n            build: {\n                files: [\n                    {'build/base.css': [\n                        'node_modules/normalize.css/normalize.css',\n                        'build/base.css'\n                    ]},\n\n                    {'build/buttons.css': [\n                        'build/buttons-core.css',\n                        'build/buttons.css'\n                    ]},\n\n                    {'build/forms-nr.css': [\n                        'build/forms.css'\n                    ]},\n\n                    {'build/forms.css': [\n                        'build/forms-nr.css',\n                        'build/forms-r.css'\n                    ]},\n\n                    {'build/grids.css': [\n                        'build/grids-core.css',\n                        'build/grids-units.css'\n                    ]},\n\n                    {'build/menus.css': [\n                        'build/menus-core.css',\n                        'build/menus-horizontal.css',\n                        'build/menus-dropdown.css',\n                        'build/menus-scrollable.css',\n                        'build/menus-skin.css',\n                    ]},\n\n                    // Rollups\n\n                    {'build/<%= nick %>.css': [\n                        'build/base.css',\n                        'build/grids.css',\n                        'build/buttons.css',\n                        'build/forms.css',\n                        'build/menus.css',\n                        'build/tables.css'\n                    ]},\n\n                    {'build/<%= nick %>-nr.css': [\n                        'build/base.css',\n                        'build/grids.css',\n                        'build/buttons.css',\n                        'build/forms-nr.css',\n                        'build/menus.css',\n                        'build/tables.css'\n                    ]}\n                ]\n            }\n        },\n\n        // -- PostCSS Config --------------------------------------------------------\n\n        postcss: {\n            options: {\n                processors: [\n                    require('autoprefixer')()\n                ]\n            },\n            dist: {\n                src: 'build/*.css'\n            }\n        },\n\n        // -- CSSLint Config -------------------------------------------------------\n\n        csslint: {\n            options: {\n                csslintrc: '.csslintrc'\n            },\n\n            base   : ['src/base/css/*.css'],\n            buttons: ['src/buttons/css/*.css'],\n            forms  : ['src/forms/css/*.css'],\n            grids  : ['src/grids/css/*.css'],\n            menus  : ['src/menus/css/*.css'],\n            tables : ['src/tables/css/*.css']\n        },\n\n        // -- CSSMin Config --------------------------------------------------------\n\n        cssmin: {\n            options: {\n                noAdvanced: true\n            },\n\n            files: {\n                expand: true,\n                src   : 'build/*.css',\n                ext   : '-min.css'\n            }\n        },\n\n        // -- Compress Config ------------------------------------------------------\n\n        compress: {\n            release: {\n                options: {\n                    archive: 'release/<%= pkg.version %>/<%= nick %>-<%= pkg.version %>.tar.gz'\n                },\n\n                expand : true,\n                flatten: true,\n                src    : 'build/*',\n                dest   : '<%= nick %>/<%= pkg.version %>/'\n            }\n        },\n\n        // -- License Config -------------------------------------------------------\n\n        license: {\n            normalize: {\n                options: {\n                    banner: [\n                        '/*!',\n                        'normalize.css v<%= pkg.devDependencies[\"normalize-css\"] %> | MIT License | https://necolas.github.io/normalize.css/',\n                        'Copyright (c) Nicolas Gallagher and Jonathan Neal',\n                        '*/\\n'\n                    ].join('\\n')\n                },\n\n                expand: true,\n                cwd   : 'build/',\n                src   : ['base*.css', '<%= nick %>*.css']\n            },\n\n            yahoo: {\n                options: {\n                    banner: [\n                        '/*!',\n                        'Pure v<%= pkg.version %>',\n                        'Copyright 2013 Yahoo!',\n                        'Licensed under the BSD License.',\n                        'https://github.com/pure-css/pure/blob/main/LICENSE',\n                        '*/\\n'\n                    ].join('\\n')\n                },\n\n                expand: true,\n                src   : ['build/*.css']\n            }\n        },\n\n        // -- Pure Grids Units Config ----------------------------------------------\n\n        pure_grids: {\n            default_units: {\n                dest: 'build/grids-units.css',\n\n                options: {\n                    units: [5, 24]\n                }\n            },\n\n            responsive: {\n                dest: 'build/grids-responsive.css',\n\n                options: {\n                    mediaQueries: {\n                        sm: 'screen and (min-width: 35.5em)',   // 568px\n                        md: 'screen and (min-width: 48em)',     // 768px\n                        lg: 'screen and (min-width: 64em)',     // 1024px\n                        xl: 'screen and (min-width: 80em)',     // 1280px\n                        xxl: 'screen and (min-width: 120em)',    // 1920px\n                        xxxl: 'screen and (min-width: 160em)',    // 2560px\n                        x4k: 'screen and (min-width: 240em)'    // 3840px\n                    }\n                }\n            }\n        },\n\n        // -- CSS Selectors Config -------------------------------------------------\n\n        css_selectors: {\n            base: {\n                src : 'build/base.css',\n                dest: 'build/base-context.css',\n\n                options: {\n                    mutations: [{prefix: '.pure'}]\n                }\n            }\n        },\n\n        // -- Watch/Observe Config -------------------------------------------------\n\n        observe: {\n            src: {\n                files: 'src/**/css/*.css',\n                tasks: ['test', 'suppress', 'build'],\n\n                options: {\n                    interrupt: true\n                }\n            }\n        }\n    });\n\n    // -- Main Tasks ---------------------------------------------------------------\n\n    // npm tasks.\n    grunt.loadNpmTasks('grunt-contrib-clean');\n    grunt.loadNpmTasks('grunt-contrib-copy');\n    grunt.loadNpmTasks('grunt-contrib-concat');\n    grunt.loadNpmTasks('grunt-contrib-csslint');\n    grunt.loadNpmTasks('grunt-contrib-cssmin');\n    grunt.loadNpmTasks('grunt-contrib-compress');\n    grunt.loadNpmTasks('grunt-contrib-watch');\n    grunt.loadNpmTasks('grunt-css-selectors');\n    grunt.loadNpmTasks('@lodder/grunt-postcss');\n    grunt.loadNpmTasks('grunt-pure-grids');\n\n    // Local tasks.\n    grunt.loadTasks('tasks/');\n\n    grunt.registerTask('default', ['test', 'build']);\n    grunt.registerTask('test', ['csslint']);\n    grunt.registerTask('build', [\n        'clean:build',\n        'copy:build',\n        'pure_grids',\n        'concat:build',\n        'clean:build_res',\n        'css_selectors:base',\n        'postcss',\n        'cssmin',\n        'license'\n    ]);\n\n    // Makes the `watch` task run a build first.\n    grunt.renameTask('watch', 'observe');\n    grunt.registerTask('watch', ['default', 'observe']);\n\n    grunt.registerTask('release', [\n        'default',\n        'clean:release',\n        'copy:release',\n        'compress:release'\n    ]);\n\n};\n"
  },
  {
    "path": "HISTORY.md",
    "content": "# Pure Change History\n\n## 3.0.0 (2022-10-26)\n\nThis is a major version bump that has the following changes:\n\n- Removed the `font-family` hack from Grids (#1074)\n- IE is no longer supported and all code and documentation references have been removed\n- The browserslist configuration has been updated to \"> 1%\" browser usage. You can use the [browserslist tool](https://browserslist.dev/?q=PiAxJQ%3D%3D) to see which browsers this now covers.\n\n### Migration\n\nThis major version should not include too many breaking changes for your app, but please check the following:\n\n- Since the list of supported browsers has now changed, please check that your site is still functioning in any browsers that you continue to support.\n- Verify your grids are still functioning correctly with the `font-family` hack still removed. This should not affect you as it was a hack for older browsers.\n\n  2.2.0 (2022-10-19)\n\n---\n\n- feat: added media queries for 2.5K and 4K screens (#1065)\n\n  2.1.0 (2022-03-14)\n\n---\n\n- feat: support xxl (1920px) media query\n\n  2.0.6 (2021-04-28)\n\n---\n\n- chore: update to cssmin@4\n\n  2.0.5 (2021-01-20)\n\n---\n\n- fix #824: cursor style for disabled menu link\n\n  2.0.4 (2021-01-19)\n\n---\n\n- chore: update license path\n\n  2.0.3 (2020-05-11)\n\n---\n\n- fix: update browser list for all environments\n\n  2.0.2 (2020-05-11)\n\n---\n\n- refactor: Remove button CSS for IE 6-8\n\n  2.0.1 (2020-05-05)\n\n---\n\n- refactor: remove usage of deprecated webkit-overflow-scrolling\n\n  2.0.0 (2020-05-05)\n\n---\n\nThis is a major version bump that has the following changes:\n\n- Reduced overall size of Pure to 3.6kb (gzipped/min)\n- Updated Normalize to v8.\n- Removed bower\n- Removed old IE 8 hacks\n- Removed deprecated `pure-help-inline` form class\n\n### Migration\n\nThis major version should not include too many breaking changes for your app, but please check the following:\n\n- Normalize Upgraded from v3 to v8. [Many things have changed](https://github.com/necolas/normalize.css/blob/main/CHANGELOG.md), be sure to verify your site properly.\n- Normalize removed the default `font-family`, but we have added to the `base.css` for consistency and due to the fact that the grids system leverages the `font-family` for `letter-spacing`.\n\n### New Browser support\n\n- Chrome\n- Edge\n- Firefox\n- Internet Explorer 10+\n- Safari 8+\n- Opera\n\n> Deprecated support for < IE 10\n\n## 1.0.1 (2019-07-10)\n\n- Fix \"selected\" menu item labels in nested menus (#708)\n- Fix bug in pure-button active state's border color. (#729)\n- Fix horizontal scrollbars not appearing in IE11 and Chrome (#740)\n- Fix pure-table-bordered issues (#718)\n\n  1.0.0 (2017-06-05)\n\n---\n\nThe community has battle-tested Pure and provided valuable feedback. We are now at a place where we can guarantee backwards compatibility through all subsequent 1.x releases.\n\nWe hope you have found Pure to be useful and unobtrusive.. To provide feedback, please comment on this GitHub issue, or file a new issue to have it tracked as a separate thread.\n\n## 0.6.2 (2017-01-05)\n\n- Added proper module API for node users [#619]\n\n### Buttons\n\n- Added Button Groups to Pure [#621]\n\n### Menus\n\n- Reset style for horizontal dropdown separator [#620]\n\n  0.6.1 (2016-10-12)\n\n---\n\n- Migrate to PostCSS for browser prefixes [#617]\n- Remove duplicate Firefox inner focus border [#457]\n- Fix grid inside table in IE 10/11 [#504]\n- Fix CSSLint issues [#609]\n- Upgraded grunt dependencies to 1.x [#609]\n\n  0.6.0 (2015-02-07)\n\n---\n\n- Upgraded Normalize.css to 3.0.2.\n- Dropped IE7 support.\n- Refactored Menus.\n- Numerous minor bug fixes.\n\n### Menus\n\n- Implemented flatter, low-specificity selectors, not attached to HTML elements,\n  for easier customization.\n- Removed pure-menu-open class.\n- Added pure-menu-scrollable capability, to allow for scrollable menus when\n  restricted by width or height.\n- Added pure-menu-allow-hover to reveal dropdowns on hover.\n- Removed various default styling properties, making menus a bit more bare-bones,\n  a bit less opinionated, a bit easier to customize on top.\n- Broke Menu up into files for core, horizontal, dropdowns, scrollable, and skin,\n  again for improved optimization and ease of customization: take only what you\n  need.\n- Removed Paginator.\n- While not part of the Pure repo itself, the accompanying Pure website now\n  features additional menu examples and an example script for enabling dropdowns\n  and improved accessiblity.\n\n  0.5.0 (2014-05-27)\n\n---\n\n### Base\n\n- Added the `.pure-img` class name for make images scale with the viewport in\n  fluid layouts.\n\n### Grids\n\n- **[!]** Removed `.pure-g-r` from core, in favor of a mobile-first responsive\n  grid system. ([#24][], [#267][])\n\n  To use the mobile-first grid system, you need to pull in `pure.css`, along\n  with `grids-responsive.css`. We also have `grids-responsive-old-ie.css` that\n  you can serve to IE < 9 users so that they can view a desktop-version of your\n  website:\n\n  ```html\n  <link\n    rel=\"stylesheet\"\n    href=\"http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css\"\n  />\n\n  <!--[if lt IE 9]>\n    <link\n      rel=\"stylesheet\"\n      href=\"http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-old-ie-min.css\"\n    />\n  <![endif]-->\n  <!--[if gt IE 8]><!-->\n  <link\n    rel=\"stylesheet\"\n    href=\"http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css\"\n  />\n  <!--<![endif]-->\n  ```\n\n  Find out more about the new grid system at <http://purecss.io/grids/>.\n\n### Tables\n\n- Switched cell padding in Tables from `px` to `em` units, and also increased\n  the amount of padding to `padding: 0.5em 1em`.\n\n[#24]: https://github.com/pure-css/pure/issues/24\n[#267]: https://github.com/pure-css/pure/pull/267\n\n## 0.4.2 (2014-02-13)\n\n- Added `main` to Pure's `bower.json` file to allow easier integration with\n  build processes and tooling. ([#286][] @stevenvachon)\n\n### Forms\n\n- Improved how `<input type=\"color\">` elements look in Chrome by fixing\n  paddings. ([#283][] @jpetto)\n\n- Removed `font-size` rules from `<input>`, `<legend>`, and `<fieldset>`\n  elements within `.pure-form`. Font sizes are now inherited from the\n  application's CSS file. ([#265][])\n\n- Invalid `<input>` elements within a Pure Form no longer explicitly set a\n  `border-width`. ([#295][] @kwando)\n\n[#265]: https://github.com/pure-css/pure/issues/265\n[#283]: https://github.com/pure-css/pure/issues/283\n[#286]: https://github.com/pure-css/pure/issues/286\n[#295]: https://github.com/pure-css/pure/issues/295\n\n## 0.4.1 (2014-02-06)\n\n### Base\n\n- Elements that have Pure classnames which set a `display` declaration _and_ use\n  the `hidden` HTML attribute will now properly be hidden. With these changes,\n  the following button will be hidden from view:\n\n  ```html\n  <button class=\"pure-button\" hidden>No showy</button>\n  ```\n\n  A new rule for the `[hidden]` selector has been added with the declaration:\n  `display: none !important;`. This is a time where it's appropriate for a\n  project like Pure to use `!important`. ([#177][])\n\n### Buttons\n\n- Removed all the occurrences of `-ms-linear-gradient()` from Buttons since it\n  has never been in the final version of IE 10. ([#200][]: @AurelioDeRosa)\n\n- `<input>` Buttons now have the same height as non-input buttons.\n  `font-family: inherit;` has been added to the `.pure-button` selector to\n  normalize the difference in height. ([#221][] @narcis-radu)\n\n- Buttons now have visually uniform default `padding` on all four sides. The\n  left/right padding is 2x the top/bottom padding. ([#191][] @achalv)\n\n### Forms\n\n- Added `vertical-align: top;` to `<textarea>`s within `.pure-form-aligned`\n  Forms to fix an alignment issue where its label was aligned to the middle.\n  ([#174][] @rictorres, @ItsAsbreuk)\n\n- Added styling for `<input>` elements that don't have a `type` attribute.\n  ([#261][] @dougdavies)\n\n### Grids\n\n- Added all non-reduced fractions to Grids default 5ths- and 24ths-based units.\n  There are now styles specified for `.pure-u-1-24` – `.pure-u-24-24`. All 5ths-\n  based units and reduced factions still remain; e.g., both `.pure-u-12-24` and\n  `.pure-u-1-2` exist. ([#144][] @mike-engel)\n\n- Removed `grids-units.css` from `src/`, this file is now generated via a Grunt\n  task. The units generation is done via the new\n  [`rework-pure-grids`][rework-pure-grids] [Rework][] plugin, and it can be used\n  to create any custom nth-based units for Pure's Grids system.\n\n### Menus\n\n- Removed hard-coded height for horizontal menus. ([#164][])\n\n[#144]: https://github.com/pure-css/pure/issues/144\n[#164]: https://github.com/pure-css/pure/issues/164\n[#174]: https://github.com/pure-css/pure/issues/174\n[#177]: https://github.com/pure-css/pure/issues/177\n[#191]: https://github.com/pure-css/pure/issues/191\n[#200]: https://github.com/pure-css/pure/issues/200\n[#221]: https://github.com/pure-css/pure/issues/221\n[#261]: https://github.com/pure-css/pure/issues/261\n[rework-pure-grids]: https://github.com/ericf/rework-pure-grids\n[Rework]: https://github.com/visionmedia/rework\n\n## 0.4.0 (2014-02-06)\n\n- **[!]** Corrupted release build, use `0.4.1`.\n\n  0.3.0 (2013-09-09)\n\n---\n\n- **[!]** Pure now requires the Base module (which is Normalize.css) to be on\n  the page. Pure has essentially always required the styles provided by\n  Normalize.css via the Base module, and this now makes it a firm requirement.\n  The `pure-min.css` and `pure-nr-min.css` rollup files already include the Base\n  module.\n\n  **Note:** When using a [custom subset][Customize] of Pure, be sure to include\n  the Base module.\n\n- Added non-minified rollup files: `pure.css` and `pure-nr.css`. These files are\n  created in addition to the minified rollups: `pure-min.css` and\n  `pure-nr-min.css`. The minified rollups _should_ be used in production.\n  ([#171][] @omeid)\n\n### Base\n\n- **[!]** Removed Normalize.css from checked-in `src/`. Bower is now used to\n  programmatically import Normalize.css into `bower_components/` if it's not\n  already installed. Normalize.css is still bundled with Pure, this change is a\n  development-time change only. ([#160][])\n\n### Buttons\n\n- Removed `-webkit-font-smoothing: antialiased` rule from Buttons. Pure should\n  not dictate sub-pixel font rendering, that should be left to the person's\n  browser settings and/or the developer. ([#170][] @dchest)\n\n### Forms\n\n- **[!]** Removed `forms-core.css`. This was a copy of Normalize.css' form\n  related styles. Now that Pure requires the Base module (Normalize.css) to be\n  on the page, the Forms Core submodule is no longer needed. ([#160][])\n\n- Added `:focus` styles to `[readonly]` `<input>` elements. ([#143][])\n\n- Removed `-webkit-font-smoothing: antialiased` rule from Forms input styles.\n  Pure should not dictate sub-pixel font rendering, that should be left to the\n  person's browser settings and/or the developer. ([#185][] @dchest)\n\n### Grids\n\n- **[!]** Improved support for Grids across OS/browser combinations, and its\n  ability to withstand the use of non-default fonts when set by either the\n  person in their browser settings or by the developer using custom fonts.\n\n  Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting\n  a negative `letter-spacing` — the fallback for older browsers. Grids also now\n  uses a specific font stack on `.pure-g` and `.pure-g-r` classes to ensure the\n  greatest OS/browser compatibility when non-default fonts are being used. By\n  default grid units will now have `font-family: sans-serif;` applied — this is\n  the default font stack Pure's Base module (Normalize.css) applies to the\n  `<body>`.\n\n  This is a **breaking change** if you are using any non-default fonts in your\n  web project. Fortunately, it's quite easy to make sure your custom font stacks\n  apply to content within Pure Girds. Instead of applying your custom font to\n  only the `<body>` element, apply it to the grid units as well:\n\n  ```css\n  body,\n  .pure-g [class*=\"pure-u\"],\n  .pure-g-r [class*=\"pure-u\"] {\n    /* Set you're content font stack here: */\n    font-family: Georgia, Times, \"Times New Roman\", serif;\n  }\n  ```\n\n  Refer to the [Grids Documentation][Grids-fonts] for more details on using\n  non-default fonts with Pure Grids.\n  ([#41][], [#162][], [#166][], [#189][]: @adapterik @dannyfritz, @pandeiro)\n\n- Fixed grid units from falling to a new line on IE 6 and IE 7. Grid units now\n  have a separate `*width` value for these older versions of IE. This value is\n  `0.005%` less than the standard `width` value. This fix does not affect modern\n  browsers because it uses the star hack. ([#154][])\n\n- Added a `height: auto` rule to images within a `.pure-g-r` so that their\n  aspect ratios are maintained when the page is resized. ([#172][]: @dchest)\n\n[#41]: https://github.com/pure-css/pure/issues/41\n[#143]: https://github.com/pure-css/pure/issues/143\n[#154]: https://github.com/pure-css/pure/issues/154\n[#160]: https://github.com/pure-css/pure/issues/160\n[#162]: https://github.com/pure-css/pure/issues/162\n[#166]: https://github.com/pure-css/pure/issues/166\n[#170]: https://github.com/pure-css/pure/issues/170\n[#171]: https://github.com/pure-css/pure/issues/171\n[#172]: https://github.com/pure-css/pure/issues/172\n[#185]: https://github.com/pure-css/pure/issues/185\n[#189]: https://github.com/pure-css/pure/issues/189\n[Customize]: http://purecss.io/customize/\n[Grids-fonts]: http://purecss.io/grids/#using-grids-with-custom-fonts\n\n## 0.2.1 (2013-07-17)\n\n### Forms\n\n- **[!]** Made `[readonly]` `<input>`s look visually different to `[disabled]`\n  and regular `<input>`s. ([#102][]: @jaseg)\n\n- Fixed copy/paste bug that mapped text inputs to `.pure-form` instead of\n  `.pure-group`. The `.pure-form-group input` styles are now applied to all\n  text-ish `<input>` elements. ([#96][])\n\n- Fixed `.pure-input-rounded` styles to now apply correctly. The change to use\n  more specific selectors for text-ish inputs in v0.2.0 caused the\n  `.pure-input-rounded` selector to not apply because it was less specific. This\n  selector now has right specificity. ([#109][]: @AurelioDeRosa)\n\n- Added `display: block` to `<textarea>`s in `.pure-form-stacked` `<form>`s to\n  fix an alignment issue for subsequent elements. ([#90][]: @AurelioDeRosa)\n\n- Removed the gray `color` from `.pure-form label`. This allows `<label>`s to\n  inherit their foreground color. ([#89][]: @AurelioDeRosa)\n\n### Grids\n\n- **[!]** Changed `.pure-u-1` grid unit to now use `width: 100%` instead of\n  `display: block` to achieve taking up the full width of its container. This\n  makes it easier to override and align since it's using `display: inline-block`\n  like the other grid units. ([#94][])\n\n- Fixed `width` value typo in `.pure-u-1-6`, changed it from `16.656%` to\n  `16.666%`. ([#115][]: @chilts)\n\n### Menus\n\n- **[!]** Fixed broken styling of active paginator items by using Grids CSS\n  rules to layout items horizontally; this makes sure the active item isn't\n  overlapped. ([#127][])\n\n### Tables\n\n- Removed `white-space: nowrap` from `.pure-table thead`. This fixes issues\n  where tables inside of grids would break the grid. ([#95][]: @AurelioDeRosa)\n\n[#89]: https://github.com/pure-css/pure/issues/89\n[#90]: https://github.com/pure-css/pure/issues/90\n[#94]: https://github.com/pure-css/pure/issues/94\n[#95]: https://github.com/pure-css/pure/issues/95\n[#96]: https://github.com/pure-css/pure/issues/96\n[#102]: https://github.com/pure-css/pure/issues/102\n[#109]: https://github.com/pure-css/pure/issues/109\n[#115]: https://github.com/pure-css/pure/issues/115\n[#127]: https://github.com/pure-css/pure/issues/127\n[#172]: https://github.com/pure-css/pure/pull/172\n\n## 0.2.0 (2013-06-11)\n\n- **[!]** Fixed accessibility mistake by removing `a:focus {outline: none;}`\n  rule from `buttons-core.css`.\n\n- **[!]** Improved `:focus` styles by applying the same rules that are used by\n  `:hover` styles. When overriding Pure's `:hover` styles, be sure to include\n  `:focus` selectors as well.\n\n- Added improvements to developer workflow:\n\n  - Added basic Tests using CSSLint via `grunt test` ([#25][])\n\n  - Integrated Travis CI which runs `grunt test` on pushes to `main` and for\n    pull requests.\n\n  - Added `grunt watch` task which runs tests and build.\n\n  - Added support to `pure-site` for serving `pure` locally during\n    development. ([#46][], [pure-css/pure-site#111][])\n\n- Removed vendor prefixes for `box-shadow`, `text-shadow`, `border-radius`. All\n  modern browsers support the non-prefixed versions of these properties.\n  ([#23][])\n\n### Forms\n\n- **[!]** Replaced `.pure-help-inline` with `.pure-form-message-inline`. We\n  still support the older classname but it is deprecated and will be going away\n  in a future release. ([#32][]: @dannytatom)\n\n- Added a new class called `.pure-form-message`. It works the same way as\n  `.pure-form-message-inline` but is meant for block elements.\n  ([#32][]: @dannytatom)\n\n- Added focus styles for file, radio, and checkbox `<input>`s to improve\n  accessibility. ([#42][]: @codepb)\n\n- `<textarea>`s now have the same styling as `<input>`s. ([#49][]: @rcbdev)\n\n- `.pure-form input` rules are now more specific by targetting only \"texty\"\n  `<inputs>`. This prevents these styles from affecting \"buttony\" `<input>`s.\n  ([#54][])\n\n### Grids\n\n- Elements with classnames before the responsive grid's unit classnames now\n  works correctly. Before units were targeted using the `^=` (\"starts with\")\n  selector, which meant that if another classname preceded the unit classname,\n  then the rule would not apply. ([#44][])\n\n### Menus\n\n- Added `.pure-menu-separator` classname that can be used to visually\n  separate horizontal menu items. ([#53][]: @codepb, @mseri)\n\n- Focused menus have an `outline: none` by default. Instead, menu-items that\n  have been opened to display children (in a drop-down menu) get a slight\n  background (`#dedede`) for accessibility. ([#22][])\n\n[#22]: https://github.com/pure-css/pure/issues/22\n[#23]: https://github.com/pure-css/pure/issues/23\n[#25]: https://github.com/pure-css/pure/issues/25\n[#32]: https://github.com/pure-css/pure/issues/32\n[#42]: https://github.com/pure-css/pure/issues/42\n[#44]: https://github.com/pure-css/pure/issues/44\n[#46]: https://github.com/pure-css/pure/issues/46\n[#49]: https://github.com/pure-css/pure/issues/49\n[#53]: https://github.com/pure-css/pure/issues/53\n[#54]: https://github.com/pure-css/pure/issues/54\n[pure-css/pure-site#111]: https://github.com/pure-css/pure-site/issues/111\n\n## 0.1.0 (2013-05-24)\n\n- **[!]** Initial public release.\n\n- Upgraded Normalize.css to 1.1.2.\n\n- Integrated Bower into `grunt import` process.\n\n- Cleaned up manual test files, removing unnecessary CSS files and cruft.\n\n### Buttons\n\n- Added `border-radius: 2px` to enhance the appearance the they are click-able.\n\n### Menus\n\n- Removed `border-radius` from vertical menus.\n\n- Replaced blue hover for menus with light grey (`#eee`)\n\n- Removed `font-weight: bold` from selected menu items.\n\n  0.0.2 (2013-05-16)\n\n---\n\n- **[!]** Renamed to Pure.\n\n- **[!]** Renamed CSS classname prefix to `pure`.\n\n- Preview release (2).\n\n  0.0.1 (2013-05-14)\n\n---\n\n- Preview release.\n"
  },
  {
    "path": "LICENSE",
    "content": "Software License Agreement (BSD License)\n========================================\n\nCopyright 2013 Yahoo! Inc.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n    * Redistributions of source code must retain the above copyright\n      notice, this list of conditions and the following disclaimer.\n\n    * Redistributions in binary form must reproduce the above copyright\n      notice, this list of conditions and the following disclaimer in the\n      documentation and/or other materials provided with the distribution.\n\n    * Neither the name of the Yahoo! Inc. nor the\n      names of its contributors may be used to endorse or promote products\n      derived from this software without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY\nDIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND\nON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n"
  },
  {
    "path": "README.md",
    "content": "# Pure\n\n[![Pure](https://cloud.githubusercontent.com/assets/449779/5291099/1b554cca-7b03-11e4-9157-53a12d91b34a.png)][pure]\n\nA set of small, responsive CSS modules that you can use in every web project.\n[https://purecss.io/][pure]\n\n![Build Status](https://github.com/pure-css/pure/actions/workflows/test.yml/badge.svg)\n\n## Features\n\nPure is a starting point for every website or web app. We take care\nof all the CSS work that every site needs without making it look cookie-cutter:\n\n- A responsive grid that can be customized to your needs.\n\n- A solid base built on [Normalize.css][] to fix cross-browser compatibility\n  issues.\n\n- Consistently styled buttons that work with `<a>` and `<button>` elements.\n\n- Styles for vertical and horizontal menus, including support for dropdown\n  menus.\n\n- Useful form alignments that look great on all screen sizes.\n\n- Various common table styles.\n\n- An extremely minimalist look that is super-easy to customize.\n\n- Responsive by default, with a non-responsive option.\n\n- Extremely small file size: **3.7KB minified + gzip**.\n\n## Get Started\n\nCheck out the [Get Started][started] page for more information.\n\n## Build From Source\n\nOptionally, you can build Pure from its source on Github. To do this, you'll\nneed to have Node.js and npm installed. We use [Grunt][] to build Pure.\n\n```shell\ngit clone git@github.com:pure-css/pure.git\ncd pure\nnpm install\ngrunt\n```\n\n### Build Files\n\nNow, all Pure CSS files should be built into the `pure/build/` directory. All\nfiles that are in this build directory are also available on the CDN. The naming\nconventions of the files in the `build/` directory follow these rules:\n\n- `[module]-core.css`: The minimal set of styles, usually structural, that\n  provide the base on which the rest of the module's styles build.\n\n- `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` +\n  `[module]-[feature].css` from the `src/[module]/` dir. This is the\n  non-responsive version of a module.\n\n- `[module].css`: Rollup of `[module]-nr.css` + `[module]-r.css` from the\n  `build/` dir. This is the responsive version of a module.\n\n- `*-min.css`: A minified file version of the files of the same name.\n\n- `pure.css`: A rollup of all `[module].css` files in the `build/` dir. This is\n  a responsive roll-up of everything, non-minified. Note: does not contain responsive grids with @media queries.\n\n- `pure-min.css`: Minified version of `pure.css` that should be used in\n  production.\n\n- `pure-nr.css`: A Rollup of all modules without @media queries. This is a\n  non-responsive roll-up of everything, non-minified.\n\n- `pure-nr-min.css`: Minified version of `pure-nr.css` that should be used in\n  production.\n\n- `grids-responsive.css`: Unminified version of Pure's grid stylesheet which\n  includes @media queries.\n\n- `grids-responsive-min.css`: Minified version of `grids-responsive.css` that\n  should be used in production.\n\n## Browser Support and Testing\n\nPure is tested and works in:\n\n- Latest Stable: Firefox, Chrome, Safari\n\n## Docs and Website\n\n[Pure's website][pure] is located in the [`site`][pure-site] directory. Please feel free\nto open issues or questions in the Issue tab.\n\n## Contributing\n\nSee the [CONTRIBUTING file][] for information on how to contribute to Pure.\n\n## License\n\nThis software is free to use under the Yahoo! Inc. BSD-3-Clause license.\nSee the [LICENSE file][] for license text and copyright information.\n\n[grunt]: http://gruntjs.com/\n[contributing file]: https://github.com/pure-css/pure/blob/main/CONTRIBUTING.md\n[license file]: https://github.com/pure-css/pure/blob/main/LICENSE\n[normalize.css]: http://necolas.github.io/normalize.css/\n[pure]: http://purecss.io/\n[pure-site]: https://github.com/pure-css/pure/tree/main/site\n[started]: https://purecss.io/start/\n"
  },
  {
    "path": "RELEASE.md",
    "content": "# Pure Deployment Checklist\n\nThese are the steps formally used to publish a new version of Pure.\n\nFor all of these steps, replace `1.0.0` with the correct version!\n\n## Prerequisite\n\nThis assumes the following repo's are cloned and `npm` installed:\n\n- https://github.com/pure-css/pure\n\n## First, check everything\n\n- [ ] **Update local Pure to latest from pure-css/pure#main**\n\n  ```bash\n  $ cd pure/\n  $ git pull upstream main\n  ```\n\n- [ ] **Build Pure via `grunt`**\n\n  ```bash\n  $ grunt\n  ```\n\n- [ ] **Review all src/.../tests/manual/ files in target environments, including:**\n\n  - [ ] Edge\n  - [ ] Chrome\n  - [ ] Firefox\n  - [ ] Safari\n\n- [ ] **Review pure-site in target environments with [Pure served locally](https://github.com/pure-css/pure-site/blob/main/README.md#running-with-pure-served-locally)**\n\n  - [ ] Edge\n  - [ ] Chrome\n  - [ ] Firefox\n  - [ ] Safari\n\n- [ ] **Review HISTORY.md**\n\n  https://github.com/pure-css/pure/blob/main/HISTORY.md\n\n  Make sure all the major changes since the last release of Pure are reflected in HISTORY.md entries.\n\n## Prepare repos for release\n\n### Pure repo\n\n- [ ] **Bump versions**\n\n  It should have already been determined whether this is a minor or patch version release. Update Pure's version number to the new version in the following places. You'll likely be dropping a \"-pre\" suffix which was in place during the last development cycle. Do not use a \"v\" in the version (e.g., 1.0.0):\n\n  - [ ] package.json\n  - [ ] HISTORY.md (Update \"NEXT\")\n\n- [ ] **Build Pure release files via `grunt release`**\n\n  Using Grunt, create the release/[version]/pure-[version].tar.gz file:\n\n  ```bash\n  $ grunt release\n  ```\n\n  **Note:** If the build fails it's for a good reason, most likely because there's code which is not passing CSSLint. We should always fix these issues and never force a release.\n\n## Publish pure to NPM\n\nFrom the `pure` repo run the following command to publish Pure to NPM. This will ensure `jsdelivr.com` CDN gets the new files.\n\n```bash\nnpm publish .\n```\n\nVerify via https://www.jsdelivr.com/package/npm/purecss\n\n## Draft releases on Github\n\n- [ ] **Draft a new release on [GitHub](https://github.com/pure-css/pure/releases) for all three repos,** using \"v\" in the version number (e.g., v1.0.0). Drafts are invisible to the public. Once these are published, the repos will be visible, and they will be tagged. **Don't publish them just yet.**\n\n  - [ ] **pure**\n\n## Formally publish Pure\n\nNow all our files are out there and everything is looking good.\n\n- [ ] **Publish pure**\n\n  From the [pure repo](https://github.com/pure-css/pure/releases), publish the release. This will tag the repo and signal to the public that the new Pure release is complete.\n\n## Spread the word\n\n- [ ] **Write blog post**\n- [ ] **Tweet**\n\n## Mark repo as pre-release\n\n- [ ] We should mark the version number of the project (in package.json) as 0.6.1-pre for clarity, so there's no mistaking the leading edge of the project from the last release. Commit those changes and push to main.\n"
  },
  {
    "path": "composer.json",
    "content": "{\n  \"name\": \"pure-css/purecss\",\n  \"description\": \"Pure is a ridiculously tiny CSS library you can use to start any web project.\",\n  \"keywords\": [\n    \"css\",\n    \"mobile-first\",\n    \"pure\",\n    \"purecss\",\n    \"responsive\",\n    \"front-end\",\n    \"framework\",\n    \"web\",\n    \"yahoo\"\n  ],\n  \"homepage\": \"http://purecss.io/\",\n  \"authors\": [\n    {\n      \"name\": \"ericf\",\n      \"email\": \"edf@ericf.me\"\n    },\n    {\n      \"name\": \"tilomitra\",\n      \"email\": \"tilomitra@gmail.com\"\n    },\n    {\n      \"name\": \"msweeney\",\n      \"email\": \"matt.sweeney@yahoo.com\"\n    },\n    {\n      \"name\": \"jamesalley\",\n      \"email\": \"manalagi001@yahoo.com\"\n    }\n  ],\n  \"support\": {\n    \"issues\": \"https://github.com/pure-css/pure/issues\"\n  },\n  \"license\": \"BSD-3-Clause\"\n}\n"
  },
  {
    "path": "eslint.config.mjs",
    "content": "import js from '@eslint/js';\nimport globals from 'globals';\nimport reactPlugin from 'eslint-plugin-react';\n\nexport default [\n    js.configs.recommended,\n    reactPlugin.configs.flat.recommended,\n    {\n        ignores: [\n            '.idea/',\n            '*-debug.log',\n            'build/',\n            'node_modules/',\n            'release/',\n            'npm-*.log',\n            'site/.docusaurus',\n            'site/build',\n            'site/node_modules',\n            'site/static/css/pure',\n        ],\n    },\n    {\n        files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],\n        languageOptions: {\n            ...reactPlugin.configs.flat.recommended.languageOptions,\n            ecmaVersion: 2024,\n            globals: {\n                ...globals.browser,\n                ...globals.jest,\n                ...globals.mocha,\n                ...globals.node,\n                ...globals.protractor,\n            },\n            parserOptions: {\n                ecmaFeatures: {\n                    jsx: true,\n                },\n                sourceType: 'module',\n            },\n        },\n        plugins: {\n            react: reactPlugin,\n        },\n        rules: {\n            indent: [2, 4, { SwitchCase: 1 }],\n            quotes: [0, 'single'],\n            'no-console': 0,\n            'react/no-unescaped-entities': 0,\n            'react/prop-types': 0,\n        },\n        settings: {\n            react: {\n                version: 'detect',\n            },\n        },\n    },\n];\n"
  },
  {
    "path": "index.js",
    "content": "var fs = require('fs');\nvar path = require('path');\nvar cache = {};\n\nmodule.exports = {\n    getFile: function(name) {\n        if (!cache[name]) {\n            try {\n                cache[name] = fs.readFileSync(this.getFilePath(name), 'utf-8');\n            } catch(e) {\n                throw new Error(name + ' does not exist', e);\n            }\n        }\n        return cache[name];\n    },\n    getFilePath: function(name) {\n        return path.resolve(__dirname, 'build', name);\n    }\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"purecss\",\n  \"version\": \"3.0.0\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git://github.com/pure-css/pure.git\"\n  },\n  \"scripts\": {\n    \"lint\": \"eslint . --fix\",\n    \"prepare\": \"grunt release\",\n    \"start\": \"cd site && npm install && npm run start\",\n    \"test\": \"grunt test && tap test/*.js --no-coverage\"\n  },\n  \"files\": [\n    \"build/\"\n  ],\n  \"devDependencies\": {\n    \"@lodder/grunt-postcss\": \"^3.1.1\",\n    \"autoprefixer\": \"^10.4.2\",\n    \"eslint\": \"^9.12.0\",\n    \"eslint-plugin-react\": \"^7.37.1\",\n    \"globals\": \"^16.0.0\",\n    \"grunt\": \"^1.3.0\",\n    \"grunt-cli\": \"^1.2.0\",\n    \"grunt-contrib-clean\": \"^2.0.0\",\n    \"grunt-contrib-compress\": \"^2.0.0\",\n    \"grunt-contrib-concat\": \"^2.0.0\",\n    \"grunt-contrib-copy\": \"^1.0.0\",\n    \"grunt-contrib-csslint\": \"^2.0.0\",\n    \"grunt-contrib-cssmin\": \"^5.0.0\",\n    \"grunt-contrib-watch\": \"^1.0.0\",\n    \"grunt-css-selectors\": \"^1.1.0\",\n    \"grunt-pure-grids\": \"^2.0.0\",\n    \"husky\": \"^9.0.11\",\n    \"normalize.css\": \"^8.0.1\",\n    \"postcss\": \"^8.4.8\",\n    \"tap\": \"^16.0.0\"\n  },\n  \"description\": \"Pure is a ridiculously tiny CSS library you can use to start any web project.\",\n  \"bugs\": {\n    \"url\": \"https://github.com/pure-css/pure/issues\"\n  },\n  \"homepage\": \"https://purecss.io\",\n  \"main\": \"index.js\",\n  \"browser\": \"build/pure-min.css\",\n  \"style\": \"build/pure.css\",\n  \"keywords\": [\n    \"pure\",\n    \"css\",\n    \"purecss\",\n    \"yahoo\"\n  ],\n  \"authors\": [\n    \"ericf <edf@ericf.me>\",\n    \"tilomitra <tilomitra@gmail.com>\",\n    \"msweeney <matt.sweeney@yahoo.com>\",\n    \"jamesalley <manalagi001@yahoo.com>\"\n  ],\n  \"license\": \"BSD-3-Clause\",\n  \"browserslist\": \"> 1%\",\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"npm test\"\n    }\n  }\n}\n"
  },
  {
    "path": "site/.gitignore",
    "content": "# Dependencies\n/node_modules\n\n# Production\n/build\n\n# Ignore manually copied pure files to static/css folder\n/static/css/pure\n\n# Generated files\n.docusaurus\n.cache-loader\n\n# Misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "site/README.md",
    "content": "# Pure Documentation\n\nThis website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.\n\n### Installation\n\n```\n$ npm install\n```\n\n### Local Development\n\n```\n$ npm run start\n```\n\nThis command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.\n\n### Build\n\n```\n$ npm run build\n```\n\nThis command generates static content into the `build` directory and can be served using any static contents hosting service.\n\n### Deployment\n\n```\n$ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy\n```\n\nThe site is hosted on [Vercel](https://vercel.com/) and will automatically deploy when commits are merged to `main`.\n\n### Including Pure\n\nWe want to use the locally built version of Pure so that the [layout examples](https://purecss.io/layouts/) are always using the `main` version, previously they had used a hardcoded CDN link.\n\nTo get Docusaurus to register the css as `static`, they have to exist in the `static/` directory before the site is built. Therefore, we copy the Pure `build/` in manually and `.gitignore` them. Once Docusaurus builds, they resolve as proper CSS files.\n"
  },
  {
    "path": "site/components/CodeBlock.js",
    "content": "import React from 'react';\nimport classnames from 'classnames';\nimport SyntaxHighlighter from 'react-syntax-highlighter';\nimport { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nfunction CodeBlock({ children, language = 'html', full = false, wrap = false }) {\n    var fullClass = classnames({ 'is-code-full': full });\n    var codeClass = classnames({ code: true, 'code-wrap': wrap });\n    return (\n        <div className={fullClass}>\n            <div className={codeClass}>\n                <SyntaxHighlighter language={language} style={docco} wrapLongLines={full}>{children}</SyntaxHighlighter>\n            </div>\n        </div>\n    );\n}\n\nexport default CodeBlock;\n"
  },
  {
    "path": "site/components/Example.js",
    "content": "import React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport CodeBlock from './CodeBlock';\nimport { html } from 'js-beautify';\n\nfunction Example({ children }) {\n    const opts = { inline: 'b' };\n    const markup = html(ReactDOMServer.renderToStaticMarkup(children), opts);\n    return (\n        <div className=\"example\">\n            <div dangerouslySetInnerHTML={{ __html: markup }} />\n            <CodeBlock>{markup}</CodeBlock>\n        </div>\n    );\n}\n\nexport default Example;\n"
  },
  {
    "path": "site/components/Footer.js",
    "content": "import React from 'react';\n\nfunction Footer({ siteConfig }) {\n    const { customFields, organizationName } = siteConfig;\n    return (\n        <div className=\"footer\">\n            <div className=\"legal pure-g\">\n                <div className=\"pure-u-1 u-sm-1-2\">\n                    <p className=\"legal-license\">\n                        This site is built with ❤️ using Pure v{customFields.pureVersion}<br />\n                        All code on this site is licensed under the <a href={`https://github.com/${organizationName}/${customFields.repoName}/blob/main/LICENSE`}>Yahoo BSD License</a> unless otherwise stated.\n                    </p>\n                </div>\n                <div className=\"pure-u-1 u-sm-1-2\">\n                    <ul className=\"legal-links\">\n                        <li><a href={`https://github.com/${organizationName}/${customFields.repoName}/`}>GitHub Project</a></li>\n                        <li><a href=\"https://hackerone.com/yahoo/\">Security Contact Info</a></li>\n                    </ul>\n                    <p className=\"legal-copyright\">\n                        &copy; 2014 - Present Yahoo Inc. All rights reserved.\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default Footer;\n"
  },
  {
    "path": "site/components/Header.js",
    "content": "import React from 'react';\n\nfunction Header({ description, title }) {\n    return (\n        <div className=\"header\">\n            <h1>{title}</h1>\n            <h2>{description}</h2>\n        </div>\n    );\n}\n\nexport default Header;\n"
  },
  {
    "path": "site/components/Menu.js",
    "content": "import Link from '@docusaurus/Link';\nimport React from 'react';\n\nfunction Menu() {\n    return (\n        <>\n            <a href=\"#menu\" id=\"menuLink\" className=\"menu-link\">\n                <span></span>\n            </a>\n            \n            <div id=\"menu\">\n                <div className=\"pure-menu\">\n                    <Link className=\"pure-menu-heading\" to=\"/\">Pure</Link>\n\n                    <ul className=\"pure-menu-list\">\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/start/\" className=\"pure-menu-link\">Get Started</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/layouts/\" className=\"pure-menu-link\">Layouts</Link>\n                        </li>\n                        <li className=\"pure-menu-item menu-item-divided\">\n                            <Link to=\"/base/\" className=\"pure-menu-link\">Base</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/grids/\" className=\"pure-menu-link\">Grids</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/forms/\" className=\"pure-menu-link\">Forms</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/buttons/\" className=\"pure-menu-link\">Buttons</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/tables/\" className=\"pure-menu-link\">Tables</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/menus/\" className=\"pure-menu-link\">Menus</Link>\n                        </li>\n                        <li className=\"pure-menu-item menu-item-divided\">\n                            <Link to=\"/tools/\" className=\"pure-menu-link\">Tools</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/customize/\" className=\"pure-menu-link\">Customize</Link>\n                        </li>\n                        <li className=\"pure-menu-item\">\n                            <Link to=\"/extend/\" className=\"pure-menu-link\">Extend</Link>\n                        </li>\n                        {/*\n                        <li className=\"pure-menu-item\">\n                            <a href=\"http://blog.purecss.io/\" className=\"pure-menu-link\">Blog</a>\n                        </li>\n                        */}\n                        <li className=\"pure-menu-item\">\n                            <a href=\"https://github.com/pure-css/pure/releases/\" className=\"pure-menu-link\">Releases</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </>\n    );\n}\n\nexport default Menu;\n"
  },
  {
    "path": "site/components/SectionHeader.js",
    "content": "import React from 'react';\n\nfunction SectionHeader({ heading, TagName = 'h2' }) {\n    // Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`.\n    const id = heading.toLowerCase()\n        .replace(/&[^\\s;]+;?/g, '')\n        .replace(/[^\\s\\w-]+/g, '')\n        .replace(/\\s+/g, '-');\n\n    return (\n        <TagName id={id} className=\"content-subhead\">\n            {heading}\n            <a href={`#${id}`} className=\"content-link\" title=\"Heading anchor\"></a>\n        </TagName>\n    );\n}\n\nexport default SectionHeader;\n"
  },
  {
    "path": "site/docusaurus.config.js",
    "content": "const { moduleSizes, PURE_DOWNLOAD_SNIPPET } = require('./lib/pure');\nconst { version } = require('../package.json');\n\nmodule.exports = {\n    title: 'Pure',\n    tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.',\n    url: 'https://pure-css.github.io',\n    baseUrl: '/',\n    favicon: 'img/favicon.ico',\n    organizationName: 'pure-css',\n    plugins: [\n        [\n            '@docusaurus/plugin-content-pages',\n            {\n                path: 'src/pages',\n            },\n        ],\n        [\n            '@docusaurus/plugin-google-analytics',\n            {\n                trackingID: 'UA-41480445-1',\n                anonymizeIP: true,\n            },\n        ],\n    ],\n    projectName: 'pure-css.github.io',\n    scripts: [\n        {\n            src: 'https://kit.fontawesome.com/f7f35653b1.js',\n            defer: true,\n        }\n    ],\n    themes: ['@docusaurus/theme-classic'],\n    trailingSlash: true,\n    customFields: {\n        PURE_DOWNLOAD_SNIPPET,\n        moduleSizes: moduleSizes(),\n        pureVersion: version,\n        repoName: 'pure',\n    },\n};\n"
  },
  {
    "path": "site/lib/pure.js",
    "content": "const crypto = require('crypto');\nconst fs = require('fs');\nconst gzip = require('gzip-size');\nconst path = require('path');\n\n// load pure package metadata\nconst pureDir = path.dirname(require.resolve('purecss'));\nconst { version } = require(path.resolve(pureDir, 'package.json'));\nconst pureFiles = path.resolve(pureDir, 'build');\nconst pureMin = fs.readFileSync(path.resolve(pureFiles, 'pure-min.css'), 'utf8');\n\n// use pure-min.css to determine site integrity hash\nconst sriHash = crypto.createHash('sha384').update(pureMin, 'utf8').digest('base64');\n\n// copy/pastable code snippet for users\nmodule.exports.PURE_DOWNLOAD_SNIPPET = `<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@${version}/build/pure-min.css\" integrity=\"sha384-${sriHash}\" crossorigin=\"anonymous\">`;\n\n// calculate each pure module size\nmodule.exports.moduleSizes = function moduleSizes() {\n    const files = fs.readdirSync(pureFiles);\n\n    // collect all minified module files\n    const modules = files.filter(file => (/-min\\.css$/).test(file))\n        .map(file => file.replace(/-min\\.css$/, ''));\n\n    // get sizes across all modules\n    const moduleSizes = modules.map(module => {\n        const filePath = path.join(pureFiles, module + '-min.css');\n        const contents = fs.readFileSync(filePath, { encoding: 'utf-8' });\n        return gzip.sync(contents);\n    });\n\n    // return final list of sizes\n    return moduleSizes.reduce((map, size, i) => {\n        map[modules[i]] = size;\n        return map;\n    }, {});\n};\n"
  },
  {
    "path": "site/lib/utils.js",
    "content": "/**\n * Calculates filesize for a given module\n */\nexport function fileSize({ module, decimals = 1, filesizes }) {\n    const filesize = (filesizes[module] / 1024);\n    return filesize.toFixed(decimals) + 'KB';\n}\n\n/**\n * Calculates the module percentage size against all modules\n */\nexport function filePercent({ modules, module, filesizes }) {\n    const total = modules.reduce((size, m) => {\n        return size + filesizes[m];\n    }, 0);\n    return (filesizes[module] / total * 100).toFixed(4) + '%';\n}\n\n/**\n * Generic click handler for pages\n */\nexport function handleClick(e) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.nativeEvent.stopImmediatePropagation();\n}\n"
  },
  {
    "path": "site/package.json",
    "content": "{\n  \"name\": \"pure\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"docusaurus build\",\n    \"deploy\": \"docusaurus deploy\",\n    \"predeploy\": \"npm run pure && npm run build\",\n    \"prestart\": \"npm run pure\",\n    \"pure\": \"cp -rf ./node_modules/purecss/build/ ./static/css/pure/\",\n    \"start\": \"docusaurus start\",\n    \"swizzle\": \"docusaurus swizzle\"\n  },\n  \"dependencies\": {\n    \"@docusaurus/core\": \"^3.7.0\",\n    \"@docusaurus/plugin-content-pages\": \"^3.7.0\",\n    \"@docusaurus/plugin-google-analytics\": \"^3.7.0\",\n    \"@docusaurus/theme-classic\": \"^3.7.0\",\n    \"classnames\": \"^2.5.1\",\n    \"common-tags\": \"^1.8.2\",\n    \"gzip-size\": \"^6.0.0\",\n    \"js-beautify\": \"^1.15.4\",\n    \"purecss\": \"^3.0.0\",\n    \"react\": \"^19.1.0\",\n    \"react-dom\": \"^19.1.0\",\n    \"react-syntax-highlighter\": \"^15.6.1\",\n    \"webpack\": \"^5.98.0\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "site/src/index.js",
    "content": "const path = require('path');\nmodule.exports = function() {\n    return {\n        name: 'pure-theme',\n\n        getThemePath() {\n            return path.resolve(__dirname, './theme');\n        },\n\n        getClientModules() {\n            return [];\n        },\n\n    };\n};\n"
  },
  {
    "path": "site/src/pages/base/index.js",
    "content": "import Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport CodeBlock from '../../../components/CodeBlock';\nimport SectionHeader from '../../../components/SectionHeader';\n\nconst title = 'Base';\nconst description = 'Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.';\n\nfunction Base() {\n    const context = useDocusaurusContext();\n    const {siteConfig = {}} = context;\n    const {\n        customFields: {\n            pureVersion,\n        },\n    } = siteConfig;\n\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"The Foundation\" />\n\n                <p>\n                All modules in Pure build on top of <a href=\"https://necolas.github.io/normalize.css/\">Normalize.css</a>. It's our foundational layer to maintain some degree of cross-browser consistency. You can pull in Normalize.css by adding this <code>&lt;link&gt;</code> element on your page:\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {`<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/base-min.css\">`}\n                </CodeBlock>\n\n                <h3>A bit about Normalize.css</h3>\n\n                <p>\n                    <a href=\"https://necolas.github.io/normalize.css/\">Normalize.css</a> is an open-source project by <a href=\"http://twitter.com/necolas\">Nicolas Gallagher</a> and <a href=\"http://twitter.com/jon_neal\">Jonathan Neal</a>. <a href=\"http://nicolasgallagher.com/about-normalize-css/\">In their own words</a>:\n                </p>\n\n                <blockquote className=\"content-quote\">\n                Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.\"\n                </blockquote>\n\n                <p>\n                Normalize.css comes with <a href=\"https://github.com/necolas/normalize.css/wiki\">great documentation</a> and a <a href=\"http://nicolasgallagher.com/about-normalize-css/\">thorough guide</a> explaining how it differs from a traditional reset.\n                </p>\n\n                <SectionHeader heading=\"Extras\" />\n\n                <p>\n                In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites.\n                </p>\n\n                <h3>Hiding Elements</h3>\n\n                <p>\n                Add the <code>hidden</code> attribute to an HTML element to hide it from the screen via <code>display: none !important;</code>.\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {'<input type=\"text\" name=\"_csrf\" hidden>'}\n                </CodeBlock>\n\n                <h3>Responsive Images</h3>\n\n                <p>\n                Add the <code>.pure-img</code> class name to an <code>&lt;img&gt;</code> element to make it scale with the viewport. This is handy when building responsive websites.\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {'<img class=\"pure-img\" src=\"...\">'}\n                </CodeBlock>\n\n                <SectionHeader heading=\"Moving beyond Normalize\" />\n\n                <p>\n                Normalize.css is a great starting place for your project, but some HTML elements such as forms, tables, and menus require more styling than what's provided by Normalize.\n                </p>\n\n                <p>\n                We made a more opinionated look and feel for these elements, while keeping them minimal enough so that you can customize them for your site or app's needs. Check out our CSS for <Link to=\"/forms\">Forms</Link>, <Link to=\"/tables\">Tables</Link>, and <Link to=\"/menus\">Menus</Link>.\n                </p>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Base;\n"
  },
  {
    "path": "site/src/pages/buttons/index.js",
    "content": "import React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport Example from '../../../components/Example';\nimport SectionHeader from '../../../components/SectionHeader';\nimport { handleClick } from '../../../lib/utils';\n\nconst title = 'Buttons';\nconst description = 'Simple CSS for buttons.';\n\nfunction Buttons() {\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\" onClick={handleClick}>\n                <SectionHeader heading=\"Default Buttons\" />\n\n                <p>\n                    To create a Pure Button, add the <code>pure-button</code> classname to any <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> element.\n                </p>\n\n                <Example>\n                    <a className=\"pure-button\" href=\"#\">A Pure Button</a>\n                    <button className=\"pure-button\">A Pure Button</button>\n                </Example>\n\n                <SectionHeader heading=\"Disabled Buttons\" />\n\n                <p>\n                    To mark a button as disabled, add the <code>pure-button-disabled</code> classname alongside <code>pure-button</code>.\n                    Alternatively, add the \"disabled\" attribute directly to your button.\n                </p>\n\n                <Example>\n                    <button className=\"pure-button pure-button-disabled\">A Disabled Button</button>\n                    <button className=\"pure-button\" disabled>A Disabled Button</button>\n                </Example>\n\n                <SectionHeader heading=\"Active Buttons\" />\n\n                <p>\n                    To style a button so that it appears \"pressed\", add the <code>pure-button-active</code> classname alongside <code>pure-button</code>.\n                </p>\n\n                <Example>\n                    <a className=\"pure-button pure-button-active\" href=\"#\">An Active Button</a>\n                    <button className=\"pure-button pure-button-active\">An Active Button</button>\n                </Example>\n\n                <SectionHeader heading=\"Primary Buttons\" />\n\n                <p>\n                    To indicate that a button represents a primary action, add the <code>pure-button-primary</code> classname alongside <code>pure-button</code>.\n                </p>\n\n                <Example>\n                    <a className=\"pure-button pure-button-primary\" href=\"#\">A Primary Button</a>\n                    <button className=\"pure-button pure-button-primary\">A Primary Button</button>\n                </Example>\n\n                <SectionHeader heading=\"Customizing Buttons\" />\n\n                <p>\n                    Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.\n                </p>\n\n                <p>\n                    To customize button styles, you should group your custom CSS into a class such as <code>button-foo</code>, which you can then add to an element that already has the <code>pure-button</code> classname. Here are some examples.\n                </p>\n\n                <h3 className=\"content-subhead\">Colored buttons with rounded corners</h3>\n\n                <Example>\n                    <div>\n                        <style dangerouslySetInnerHTML={{ __html: `\n                     .button-success,\n                     .button-error,\n                     .button-warning,\n                     .button-secondary {\n                         color: white;\n                         border-radius: 4px;\n                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);\n                     }\n                     .button-success {\n                         background: rgb(28, 184, 65); /* this is a green */\n                     }\n                     .button-error {\n                         background: rgb(202, 60, 60); /* this is a maroon */\n                     }\n                     .button-warning {\n                         background: rgb(223, 117, 20); /* this is an orange */\n                     }\n                     .button-secondary {\n                         background: rgb(66, 184, 221); /* this is a light blue */\n                     }\n                    `}} />\n                        <button className=\"button-success pure-button\">Success Button</button>\n                        <button className=\"button-error pure-button\">Error Button</button>\n                        <button className=\"button-warning pure-button\">Warning Button</button>\n                        <button className=\"button-secondary pure-button\">Secondary Button</button>\n                    </div>\n                </Example>\n\n                <h3 className=\"content-subhead\">Buttons with different sizes</h3>\n\n                <Example>\n                    <div>\n                        <style dangerouslySetInnerHTML={{ __html: `\n                     .button-xsmall {\n                         font-size: 70%;\n                     }\n                     .button-small {\n                         font-size: 85%;\n                     }\n                     .button-large {\n                         font-size: 110%;\n                     }\n                     .button-xlarge {\n                         font-size: 125%;\n                     }\n                  `}} />\n                        <button className=\"button-xsmall pure-button\">Extra Small Button</button>\n                        <button className=\"button-small pure-button\">Small Button</button>\n                        <button className=\"pure-button\">Regular Button</button>\n                        <button className=\"button-large pure-button\">Large Button</button>\n                        <button className=\"button-xlarge pure-button\">Extra Large Button</button>\n                    </div>\n                </Example>\n\n                <h3 className=\"content-subhead\">Buttons with icons</h3>\n\n                <p>\n                    Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from <a href=\"https://fontawesome.com/\">Font Awesome</a>. Put the <a href=\"https://fontawesome.com/start\">Font Awesome CSS file</a> on your page and use an <code>&lt;i&gt;</code> element within a <code>pure-button</code> element.\n                </p>\n\n                <Example>\n                    <button className=\"pure-button\">\n                        <i className=\"fa fa-cog\"></i>\n                        Settings\n                    </button>\n                    <a className=\"pure-button\" href=\"#\">\n                        <i className=\"fa fa-shopping-cart fa-lg\"></i>\n                        Checkout\n                    </a>\n                </Example>\n\n                <SectionHeader heading=\"Button Groups\" />\n\n                <p>\n                    Group multiple buttons together on a single line.\n                </p>\n\n                <aside>\n                    <p>\n                        For assistive technologies (i.e, screen readers) a <code>role</code> attribute should be provided to ensure that proper meaning is conveyed. Button groups should have a <code>role&#x3D;&quot;group&quot;</code>, while toolbars should have <code>role&#x3D;&quot;toolbar&quot;</code>.\n                    </p>\n                    <p>\n                        Additionally, a clear label should be provided since most assistive technologies will not announce them. The code snippet below provides an example.\n                    </p>\n                </aside>\n\n                <Example>\n                    <div className=\"pure-button-group\" role=\"group\" aria-label=\"...\">\n                        <button className=\"pure-button\">A Pure Button</button>\n                        <button className=\"pure-button\">A Pure Button</button>\n                        <button className=\"pure-button pure-button-active\">A Pure Button</button>\n                    </div>\n                </Example>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Buttons;\n"
  },
  {
    "path": "site/src/pages/customize/index.js",
    "content": "import Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport CodeBlock from '../../../components/CodeBlock';\nimport SectionHeader from '../../../components/SectionHeader';\nimport { fileSize } from '../../../lib/utils';\n\nconst title = 'Customize';\nconst description = 'Choose the modules that you need.';\n\nfunction Customize() {\n    const context = useDocusaurusContext();\n    const {siteConfig = {}} = context;\n    const {\n        customFields: {\n            moduleSizes: filesizes,\n            pureVersion,\n        },\n    } = siteConfig;\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Rollups\" />\n\n                <p>\n                    Rollups consist of all the modules in Pure. There are two rollups available - a regular (responsive) one, and a non-responsive one. Choose that one that's right for your project.\n                </p>\n\n                <div className=\"table-responsive\">\n                    <table className=\"pure-table pure-table-bordered\">\n                        <thead>\n                            <tr>\n                                <th>Name</th>\n                                <th>URL</th>\n                                <th>Size (gzip)</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>Responsive Rollup</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-min.css</td>\n                                <td>{fileSize({ module: 'pure', filesizes })}</td>\n                            </tr>\n                            <tr>\n                                <td>Non-Responsive Rollup</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-nr-min.css</td>\n                                <td>{fileSize({ module: 'pure-nr', filesizes })}</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n\n                <aside>                \n                    <p>\n                        You will need to include the grid stylesheets separately as they are not included in the rollup. The non-responsive rollup does not include media queries, thus making it easier for you to override styles in the base library. Additionally, you can also create a <Link to=\"/grids/#pure-responsive-grids\">custom grid</Link> that better suits your projects needs.\n                    </p>\n                </aside>\n\n                <h3>Alternate CDNs</h3>\n\n                <p>\n                    The main host for Pure is the jsDelivr CDN where Pure is available over HTTPS. The following table lists alternate CDNs where Pure is hosted.\n                </p>\n\n                <div className=\"table-responsive\">\n                    <table className=\"pure-table pure-table-bordered\">\n                        <thead>\n                            <tr>\n                                <th>CDN</th>\n                                <th>URL</th>\n                                <th>HTTPS</th>\n                                <th>Combo</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td><a href=\"http://cdnjs.com/\">cdnjs</a></td>\n                                <td>{`//cdnjs.cloudflare.com/ajax/libs/pure/${pureVersion}/build/pure-min.css`}</td>\n                                <td>Yes</td>\n                                <td>Yes</td>\n                            </tr>\n                            <tr>\n                                <td><a href=\"https://www.keycdn.com/\">KeyCDN</a></td>\n                                <td>{`//opensource.keycdn.com/pure/${pureVersion}/pure-min.css`}</td>\n                                <td>Yes</td>\n                                <td>No</td>\n                            </tr>\n                            <tr>\n                                <td><a href=\"http://www.osscdn.com/\">OSS MaxCDN</a></td>\n                                <td>{`//oss.maxcdn.com/libs/pure/${pureVersion}/pure-min.css`}</td>\n                                <td>Yes</td>\n                                <td>No</td>\n                            </tr>\n                            <tr>\n                                <td><a href=\"http://rawgit.com/\">RawGit</a></td>\n                                <td>{`//cdn.rawgit.com/pure-css/pure-release/v${pureVersion}/pure-min.css`}</td>\n                                <td>Yes</td>\n                                <td>No</td>\n                            </tr>\n                            <tr>\n                                <td><a href=\"http://www.staticfile.org/\">Staticfile</a></td>\n                                <td>{`//cdn.staticfile.org/pure/${pureVersion}/pure-min.css`}</td>\n                                <td>Yes</td>\n                                <td>No</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n\n                <p>\n                    <b>Note:</b> If the latest version of Pure is not yet on one of the alternate CDNs, please contact them to update to the latest version of Pure: <b>{pureVersion}.</b>\n                </p>\n\n                <SectionHeader heading=\"Individual Modules\" />\n\n                <p>\n                    You can also pull in the following modules individually.\n                </p>\n\n                <div className=\"table-responsive\">\n                    <table className=\"pure-table pure-table-bordered\">\n                        <thead>\n                            <tr>\n                                <th>Name</th>\n                                <th>URL</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>Base</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/base-min.css</td>\n                            </tr>\n                            <tr>\n                                <td>Buttons</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/buttons-min.css</td>\n                            </tr>\n                            <tr>\n                                <td>Forms (Responsive)</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/forms-min.css</td>\n                            </tr>\n                            <tr>\n                                <td>Forms (Non-Responsive)</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/forms-nr-min.css</td>\n                            </tr>\n                            <tr>\n                                <td>Grids (Base)</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/grids-min.css</td>\n                            </tr>\n                            <tr>\n                                <td>Grids (Responsive)</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/grids-responsive-min.css</td>\n                            </tr>\n                            <tr>\n                                <td>Menus (Responsive)</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/menus-min.css</td>\n                            </tr>\n                            <tr>\n                                <td>Tables</td>\n                                <td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/tables-min.css</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n\n                <SectionHeader heading=\"Combo Handling\" />\n\n                <p>\n                    jsDelivr is also a CDN that supports combo handling. Here's an example of a combo URL that includes the same CSS <a href=\"/base/\">Base</a>, <a href=\"/grids/\">Grids</a>, and <a href=\"/forms/\">Forms</a> as above.\n                </p>\n\n                <CodeBlock>\n                    {`<link rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/combine/npm/purecss@${pureVersion}/build/base-min.css,npm/purecss@${pureVersion}/build/grids-min.css,npm/purecss@${pureVersion}/build/forms-min.css\" />`}\n                </CodeBlock>\n\n                <p>\n                    See the <a href=\"https://github.com/jsdelivr/jsdelivr#combine-multiple-files\">jsDelivr combo handler documentation</a> to learn more about its features.\n                </p>\n\n                <SectionHeader heading=\"Contribute on GitHub\" />\n\n                <p>\n                    Pure is an open-source project under the BSD License. We welcome issues, pull requests, and feedback. Check out our <a href=\"https://github.com/pure-css/pure\">repo on GitHub</a>.\n                </p>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Customize;\n"
  },
  {
    "path": "site/src/pages/extend/index.js",
    "content": "import Link from '@docusaurus/Link';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport CodeBlock from '../../../components/CodeBlock';\nimport SectionHeader from '../../../components/SectionHeader';\nimport { stripIndent } from 'common-tags';\n\nconst title = 'Extend';\nconst description = 'Build on top of Pure.';\n\nfunction Extend() {\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <p>\n                    One of our goals when developing Pure was to make it extremely extensible. By including Pure and writing some CSS on top of it, you can ensure that your site or app works across browsers, while looking truly unique. Best of all, your CSS file size will remain tiny, which is a great thing for mobile users and others with slow connections.\n                </p>\n\n                <aside>\n                    <p>\n                        Want a quick start? Take a look at some <Link href=\"/layouts/\">layouts</Link> that we've built on top of Pure.\n                    </p>\n                </aside>\n\n                <SectionHeader heading=\"Style Guide\" />\n\n                <h3>Based on SMACSS</h3>\n\n                <p>\n                    Pure is broken up into a set of responsive modules. From the beginning, we adopted <a href=\"http://smacss.com/\">SMACSS</a> as a convention for writing our CSS. For those who are new to SMACSS, you should give it a quick read, especially the section on <a href=\"http://smacss.com/book/type-module\">module rules</a>.\n                </p>\n\n                <h3>Class Name Conventions</h3>\n\n                <p>\n                    One of the conventions in Pure is for every module to have a standard class name for common rules across a module, and then have additional class names for specific presentational rules for a specific sub-module. All classes start with a <code>pure-</code> prefix to prevent collisions. In addition, we try not to have presentational class names. Instead of calling something <code>pure-form-horizontal</code>, we prefer to call it <code>pure-form-aligned</code>. This prevents a tight coupling between class names and styles, which is good for maintainability.\n                </p>\n\n                <p>\n                    For example, let's consider the HTML and CSS for a <Link href=\"/forms/\">Stacked Form</Link>:\n                </p>\n\n                <h4>Stacked Form: HTML</h4>\n\n                <p>\n                    A stacked form is created by adding two class names, <code>pure-form</code> and <code>pure-form-stacked</code>.\n                </p>\n\n                <CodeBlock>\n                    {'<form class=\"pure-form pure-form-stacked\"></form>'}\n                </CodeBlock>\n\n                <h4>Stacked Form: CSS</h4>\n\n                <p>\n                    The two class names serve different purposes. One is used as a general selector to group common rules for all forms, while the other defines specific rules for a stacked form.\n                </p>\n\n                <CodeBlock>\n                    {stripIndent`\n                        /*\n                            Standard rules that all Pure Forms have. This includes rules for\n                            styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout\n                            rules such as vertical alignments.\n                        */\n                        .pure-form { ... }\n\n                        /*\n                            Specific rules that apply to stacked forms. This includes rules\n                            such as taking child &lt;input&gt; elements and making them display: block\n                            for the stacked effect.\n                        */\n                        .pure-form-stacked  { ... }\n                    `}\n                </CodeBlock>\n\n                <SectionHeader heading=\"Extending Pure\" />\n\n                <p>\n                    When you're extending Pure, we recommend that you follow this convention. For instance, if you wanted to create a new type of form, your HTML and CSS should look something like this:\n                </p>\n\n                <CodeBlock>\n                    {'<form class=\"form-custom pure-form\"></form>'}\n                </CodeBlock>\n\n                <CodeBlock className=\"test\">\n                    {stripIndent`\n                        /* add your custom styles in this selector */\n                        .form-custom { ... }\n                    `}\n                </CodeBlock>\n\n                <p>\n                    One common task that you may wish to do is to style buttons so they look different. The <a href=\"/buttons/\">Pure Button Documentation</a> has some examples on how you can create buttons with custom sizes and styles by adopting this modular architecture.\n                </p>\n\n                <SectionHeader heading=\"Pure + Bootstrap + JavaScript\" />\n\n                <p>\n                    Pure plays well with other libraries, including Bootstrap. As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap modules that your application may require. There are several benefits to doing this:\n                </p>\n\n                <ul>\n                    <li>\n                        <p>\n                            Your website or webapp's CSS will be a lot smaller &mdash; up to <em>5X smaller</em> in some cases!\n                        </p>\n                    </li>\n                    <li>\n                        <p>\n                            You get Pure's minimalist look that's easy to build on top of. No need to overwrite styles!\n                        </p>\n                    </li>\n                </ul>\n\n                <p>\n                    For example, here's a Bootstrap Modal. It's created by including the Pure CSS Rollup, and just adding Bootstrap's <a href=\"https://getbootstrap.com/docs/5.0/components/modal/\">Modal component</a> CSS and JS plugin.\n                </p>\n\n                <CodeBlock>\n                    {stripIndent`\n                    <!-- Button to trigger modal -->\n                    <button type=\"button\" class=\"pure-button-primary pure-button\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\">\n                        Launch Pure + Bootstrap Modal\n                    </button>\n\n                    <!-- Modal -->\n                    <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\n                        <div class=\"modal-dialog\">\n                            <div class=\"modal-content\">\n                                <div class=\"modal-header\">\n                                    <h5 class=\"modal-title\" id=\"exampleModalLabel\">Modal title</h5>\n                                    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n                                </div>\n                                <div class=\"modal-body\">\n                                    <p>\n                                        This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS.\n                                    </p>\n                                    <form class=\"pure-form pure-form-stacked\">\n                                        <legend>A Stacked Form</legend>\n                                        <label for=\"email\">Email</label>\n                                        <input id=\"email\" type=\"text\" placeholder=\"Email\">\n                                        <label for=\"password\">Password</label>\n                                        <input id=\"password\" type=\"password\" placeholder=\"Password\">\n                                        <label for=\"state\">State</label>\n                                        <select id=\"state\">\n                                            <option>AL</option>\n                                            <option>CA</option>\n                                            <option>IL</option>\n                                        </select>\n                                        <label class=\"pure-checkbox\">\n                                        <input type=\"checkbox\"> Remember me\n                                        </label>\n                                    </form>\n                                </div>\n                                <div class=\"modal-footer\">\n                                    <button type=\"button\" class=\"pure-button\" data-bs-dismiss=\"modal\">Close</button>\n                                    <button type=\"button\" class=\"pure-button pure-button-primary\">Save changes</button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n                    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM\" crossorigin=\"anonymous\"></script>\n                    `}\n                </CodeBlock>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Extend;\n"
  },
  {
    "path": "site/src/pages/forms/index.js",
    "content": "import Link from '@docusaurus/Link';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport Example from '../../../components/Example';\nimport SectionHeader from '../../../components/SectionHeader';\n\nconst title = 'Forms';\nconst description = 'Simple CSS for HTML forms.';\n\nfunction Forms() {\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Default Form\" />\n\n                <p>\n              To create a default inline form, add the <code>pure-form</code> classname to any <code>&lt;form&gt;</code> element.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <fieldset>\n                            <legend>A compact inline form</legend>\n                            <input type=\"email\" placeholder=\"Email\" />\n                            <input type=\"password\" placeholder=\"Password\" />\n                            <label htmlFor=\"default-remember\">\n                                <input id=\"default-remember\" type=\"checkbox\" /> Remember me\n                            </label>\n                            <button type=\"submit\" className=\"pure-button pure-button-primary\">Sign in</button>\n                        </fieldset>\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Stacked Form\" />\n\n                <p>\n              To create a stacked form with input elements below the labels, add the <code>pure-form-stacked</code> classname to a <code>&lt;form&gt;</code> element alongside <code>pure-form</code>.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form pure-form-stacked\">\n                        <fieldset>\n                            <legend>A Stacked Form</legend>\n                            <label htmlFor=\"stacked-email\">Email</label>\n                            <input id=\"stacked-email\" type=\"email\" placeholder=\"Email\" />\n                            <span className=\"pure-form-message\">This is a required field.</span>\n                            <label htmlFor=\"stacked-password\">Password</label>\n                            <input id=\"stacked-password\" type=\"password\" placeholder=\"Password\" />\n                            <label htmlFor=\"stacked-state\">State</label>\n                            <select id=\"stacked-state\">\n                                <option>AL</option>\n                                <option>CA</option>\n                                <option>IL</option>\n                            </select>\n                            <label htmlFor=\"stacked-remember\" className=\"pure-checkbox\">\n                                <input id=\"stacked-remember\" type=\"checkbox\" /> Remember me\n                            </label>\n                            <button type=\"submit\" className=\"pure-button pure-button-primary\">Sign in</button>\n                        </fieldset>\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Aligned Form\" />\n\n                <p>\n              To create an aligned form, add the <code>pure-form-aligned</code> classname to a <code>&lt;form&gt;</code> element alongside <code>pure-form</code>. In an aligned form, the labels are right-aligned against the form input controls, but on smaller screens revert to a <Link to=\"#stacked-form\">stacked form</Link>.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form pure-form-aligned\">\n                        <fieldset>\n                            <div className=\"pure-control-group\">\n                                <label htmlFor=\"aligned-name\">Username</label>\n                                <input id=\"aligned-name\" type=\"text\" placeholder=\"Username\" />\n                                <span className=\"pure-form-message-inline\">This is a required field.</span>\n                            </div>\n                            <div className=\"pure-control-group\">\n                                <label htmlFor=\"aligned-password\">Password</label>\n                                <input id=\"aligned-password\" type=\"password\" placeholder=\"Password\" />\n                            </div>\n                            <div className=\"pure-control-group\">\n                                <label htmlFor=\"aligned-email\">Email Address</label>\n                                <input id=\"aligned-email\" type=\"email\" placeholder=\"Email Address\" />\n                            </div>\n                            <div className=\"pure-control-group\">\n                                <label htmlFor=\"aligned-foo\">Supercalifragilistic Label</label>\n                                <input id=\"aligned-foo\" type=\"text\" placeholder=\"Enter something here...\" />\n                            </div>\n                            <div className=\"pure-controls\">\n                                <label htmlFor=\"aligned-cb\" className=\"pure-checkbox\">\n                                    <input id=\"aligned-cb\" type=\"checkbox\" /> I've read the terms and conditions\n                                </label>\n                                <button type=\"submit\" className=\"pure-button pure-button-primary\">Submit</button>\n                            </div>\n                        </fieldset>\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Multi-Column Form (with Pure Grids)\" />\n\n                <p>\n              To create multi-column forms, include your form elements within a <Link to=\"/grids\">Pure Grid</Link>. Creating responsive multi-column forms (like the example below) requires <Link to=\"/grids/#pure-responsive-grids\">Pure Responsive Grids</Link> to be present on the page.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form pure-form-stacked\">\n                        <fieldset>\n                            <legend>Legend</legend>\n                            <div className=\"pure-g\">\n                                <div className=\"pure-u-1 pure-u-md-1-3\">\n                                    <label htmlFor=\"multi-first-name\">First Name</label>\n                                    <input id=\"multi-first-name\" className=\"pure-u-23-24\" type=\"text\" />\n                                </div>\n                                <div className=\"pure-u-1 pure-u-md-1-3\">\n                                    <label htmlFor=\"multi-last-name\">Last Name</label>\n                                    <input id=\"multi-last-name\" className=\"pure-u-23-24\" type=\"text\" />\n                                </div>\n                                <div className=\"pure-u-1 pure-u-md-1-3\">\n                                    <label htmlFor=\"multi-email\">E-Mail</label>\n                                    <input id=\"multi-email\" className=\"pure-u-23-24\" type=\"email\" required />\n                                </div>\n                                <div className=\"pure-u-1 pure-u-md-1-3\">\n                                    <label htmlFor=\"multi-city\">City</label>\n                                    <input id=\"multi-city\" className=\"pure-u-23-24\" type=\"text\" />\n                                </div>\n                                <div className=\"pure-u-1 pure-u-md-1-3\">\n                                    <label htmlFor=\"multi-state\">State</label>\n                                    <select id=\"multi-state\" className=\"pure-input-1-2\">\n                                        <option>AL</option>\n                                        <option>CA</option>\n                                        <option>IL</option>\n                                    </select>\n                                </div>\n                            </div>\n                            <label htmlFor=\"multi-terms\" className=\"pure-checkbox\">\n                                <input id=\"multi-terms\" type=\"checkbox\" /> I've read the terms and conditions\n                            </label>\n                            <button type=\"submit\" className=\"pure-button pure-button-primary\">Submit</button>\n                        </fieldset>\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Grouped Inputs\" />\n\n                <p>\n              To group sets of text-based input elements, wrap them in a <code>&lt;fieldset&gt;</code> element with a <code>pure-group</code> classname. Grouped inputs work well for sign-up forms and look natural on mobile devices.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <fieldset className=\"pure-group\">\n                            <input type=\"text\" className=\"pure-input-1-2\" placeholder=\"Username\" />\n                            <input type=\"text\" className=\"pure-input-1-2\" placeholder=\"Password\" />\n                            <input type=\"email\" className=\"pure-input-1-2\" placeholder=\"Email\" />\n                        </fieldset>\n                        <fieldset className=\"pure-group\">\n                            <input type=\"text\" className=\"pure-input-1-2\" placeholder=\"A title\" />\n                            <textarea className=\"pure-input-1-2\" placeholder=\"Textareas work too\"></textarea>\n                        </fieldset>\n                        <button type=\"submit\" className=\"pure-button pure-input-1-2 pure-button-primary\">Sign in</button>\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Input Sizing\" />\n\n                <p>\n              Input elements have fluid width sizes in a syntax that is similar to <Link to=\"/grids/\">Pure Grids</Link>. You can apply a <code>pure-input-*</code> class to these elements.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-input-1\" /><br />\n                        <input className=\"pure-input-2-3\" type=\"text\" placeholder=\".pure-input-2-3\" /><br />\n                        <input className=\"pure-input-1-2\" type=\"text\" placeholder=\".pure-input-1-2\" /><br />\n                        <input className=\"pure-input-1-3\" type=\"text\" placeholder=\".pure-input-1-3\" /><br />\n                        <input className=\"pure-input-1-4\" type=\"text\" placeholder=\".pure-input-1-4\" /><br />\n                    </form>\n                </Example>\n\n                <p>\n              You can control input sizing even further by wrapping them in grid containers. In the example below, the <code>&lt;input&gt;</code> elements have a <code>pure-input-1</code> class, but are wrapped in a <code>&lt;div&gt;</code> with a specific grid class.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form pure-g\">\n                        <div className=\"pure-u-1-4\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-4\" />\n                        </div>\n                        <div className=\"pure-u-3-4\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-3-4\" />\n                        </div>\n                        <div className=\"pure-u-1-2\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-2\" />\n                        </div>\n                        <div className=\"pure-u-1-2\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-2\" />\n                        </div>\n                        <div className=\"pure-u-1-8\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-8\" />\n                        </div>\n                        <div className=\"pure-u-1-8\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-8\" />\n                        </div>\n                        <div className=\"pure-u-1-4\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-4\" />\n                        </div>\n                        <div className=\"pure-u-1-2\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-2\" />\n                        </div>\n                        <div className=\"pure-u-1-5\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-5\" />\n                        </div>\n                        <div className=\"pure-u-2-5\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-2-5\" />\n                        </div>\n                        <div className=\"pure-u-2-5\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-2-5\" />\n                        </div>\n                        <div className=\"pure-u-1\">\n                            <input className=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1\" />\n                        </div>\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Required Inputs\" />\n\n                <p>\n              To mark a form control as required, add the <code>required</code> attribute.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <input type=\"email\" placeholder=\"Requires an email\" required />\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Disabled Inputs\" />\n\n                <p>\n              To disable a form control, add the <code>disabled</code> attribute.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <input type=\"text\" placeholder=\"Disabled input here...\" disabled />\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Read-Only Inputs\" />\n\n                <p>\n              To make a form input read-only, add the <code>readonly</code> attribute. The difference between <code>disabled</code> and <code>readonly</code> is read-only inputs are still focusable. This allows people to interact with the input and select its text, whereas disabled controls are not interactive.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <input type=\"text\" value=\"Readonly input here...\" readOnly />\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Rounded Inputs\" />\n\n                <p>\n              To display a form control with rounded corners, add the <code>pure-input-rounded</code> classname.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <input type=\"text\" className=\"pure-input-rounded\" />\n                        <button type=\"submit\" className=\"pure-button\">Search</button>\n                    </form>\n                </Example>\n\n                <SectionHeader heading=\"Checkboxes and Radios\" />\n\n                <p>\n              To normalize and align checkboxes and radio inputs, add the <code>pure-checkbox</code> or <code>pure-radio</code> classname.\n                </p>\n\n                <Example>\n                    <form className=\"pure-form\">\n                        <label htmlFor=\"checkbox-radio-option-one\" className=\"pure-checkbox\">\n                            <input id=\"checkbox-radio-option-one\" type=\"checkbox\" value=\"\" /> Here's option one.\n                        </label>\n                        <label htmlFor=\"checkbox-radio-option-two\" className=\"pure-radio\">\n                            <input id=\"checkbox-radio-option-two\" type=\"radio\" name=\"optionsRadios\" value=\"option1\" defaultChecked /> Here's a radio button. You can choose this one..\n                        </label>\n                        <label htmlFor=\"checkbox-radio-option-three\" className=\"pure-radio\">\n                            <input id=\"checkbox-radio-option-three\" type=\"radio\" name=\"optionsRadios\" value=\"option2\" /> ..Or this one!\n                        </label>\n                    </form>\n                </Example>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Forms;\n"
  },
  {
    "path": "site/src/pages/grids/index.js",
    "content": "import useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport CodeBlock from '../../../components/CodeBlock';\nimport SectionHeader from '../../../components/SectionHeader';\nimport { stripIndent } from 'common-tags';\n\nimport './styles.css';\n\nconst title = 'Grids';\nconst description = 'Fully customizable and responsive CSS grids.';\n\nfunction Grids() {\n    const context = useDocusaurusContext();\n    const {siteConfig = {}} = context;\n    const {\n        customFields: {\n            pureVersion\n        }\n    } = siteConfig;\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Introduction to Pure Grids\" />\n\n                <p>Pure Grids are easy to work with, and very powerful. There are a few simple concepts to keep in mind:</p>\n\n                <dl>\n                    <dt>Grid classes vs. unit classes</dt>\n                    <dd>\n                        Pure Grids consist of two types of classes: the grid class (<code>pure-g</code>) and unit classes (<code>pure-u</code> or <code>pure-u-*</code>)\n                    </dd>\n                    <dt>The widths of the units are fractions</dt>\n                    <dd>\n                        Units have various class names that represent their widths. For example, <code>pure-u-1-2</code> has a width of 50%, whereas <code>pure-u-1-5</code> would have a width of 20%.\n                    </dd>\n                    <dt>All child elements of a grid must be units</dt>\n                    <dd>\n                        Child elements contained within an element with a <code>pure-g</code> classname <em>must</em> be a grid unit with a <code>pure-u</code> or <code>pure-u-*</code> classname.\n                    </dd>\n                    <dt>Content goes inside grid units</dt>\n                    <dd>\n                        All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.\n                    </dd>\n                </dl>\n\n                <p>\n                    Let's start with a simple example. Here's a grid with three columns:\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {stripIndent`\n                        <div class=\"pure-g\">\n                            <div class=\"pure-u-1-3\"><p>Thirds</p></div>\n                            <div class=\"pure-u-1-3\"><p>Thirds</p></div>\n                            <div class=\"pure-u-1-3\"><p>Thirds</p></div>\n                        </div>\n                    `}\n                </CodeBlock>\n\n                <SectionHeader heading=\"Grids Units Sizes\" />\n\n                <p>\n                    Pure ships with both a <b>5ths</b> and <b>24ths</b> based grid. Depicted below are the available units that can be appended to the <b><code>pure-u-*</code></b> classname where <code>*</code> is one of the unit fractions listed below. For example the unit classname for 50% width is: <code>pure-u-1-2</code>.\n                </p>\n\n                <h3>5ths-Based Units</h3>\n\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-5</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-5\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">2-5</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-2-5\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">3-5</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-3-5\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">4-5</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-4-5\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-1</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-1\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">5-5</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-5-5\"></div>\n                        </div>\n                    </div>\n                </div>\n\n                <h3>24ths-Based Units</h3>\n\n                <div className=\"grids-unit pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-12</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-12\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">2-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-2-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">3-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-3-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-8</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-8\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">4-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-4-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-6</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-6\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">5-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-5-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-4</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-4\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">6-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-6-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">7-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-7-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-3</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-3\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">8-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-8-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">3-8</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-3-8\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">9-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-9-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">5-12</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-5-12\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">10-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-10-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">11-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-11-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-2</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-2\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">12-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-12-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">13-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-13-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">7-12</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-7-12\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">14-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-14-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">5-8</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-5-8\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">15-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-15-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">2-3</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-2-3\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">16-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-16-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">17-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-17-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">3-4</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-3-4\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">18-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-18-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">19-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-19-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">5-6</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-5-6\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">20-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-20-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">7-8</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-7-8\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">21-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-21-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">11-12</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-11-12\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">22-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-22-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">23-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-23-24\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit  pure-g\">\n                    <div className=\"grids-unit-width pure-u\">1-1</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-1-1\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"grids-unit grids-unit-not-reduced pure-g\">\n                    <div className=\"grids-unit-width pure-u\">24-24</div>\n                    <div className=\"grids-unit-details pure-u-1\">\n                        <div className=\"pure-g\">\n                            <div className=\"grids-unit-bar pure-u-24-24\"></div>\n                        </div>\n                    </div>\n                </div>\n\n                <h3>Custom Unit Sizes</h3>\n\n                <p>\n                    We are working on building tools to allow people to customize Pure Grids. The first low-level tools, the <b><a href=\"https://github.com/ericf/rework-pure-grids\">Pure Grids Rework Plugin</a></b>, is available to use today&mdash;we use this tool to generate Pure's built-in unit sizes.\n                </p>\n\n                <SectionHeader heading=\"Pure Responsive Grids\" />\n\n                <p>\n                    Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It's a robust and flexible grid  that builds on top of the default grid.\n                </p>\n\n                <h3>Including on Your Page</h3>\n\n                <p>\n                    Since media queries cannot be over-written, we <u>do not</u> include the grid system as part of <code>pure.css</code>. You'll have to pull it in as a separate CSS file. You can do this by adding the following <code>&lt;link&gt;</code> tag to your page.\n                </p>\n\n                <CodeBlock>\n                    {`<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/grids-responsive-min.css\" />`}\n                </CodeBlock>\n\n                <h3>Pure's Regular Grid vs. Responsive Grid</h3>\n\n                <p>\n                    The best way to understand the difference between Pure's regular grid and a responsive grid is through an example.The snippet below shows how regular Pure Grids are written. These grids are unresponsive. They'll always be <code>width: 33.33%</code>, irrespective of the width of the screen.\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {stripIndent`\n                        <div class=\"pure-g\">\n                            <div class=\"pure-u-1-3\"> ... </div>\n                            <div class=\"pure-u-1-3\"> ... </div>\n                            <div class=\"pure-u-1-3\"> ... </div>\n                        </div>\n                    `}\n                </CodeBlock>\n\n                <p>\n                    Next, let's look at a responsive grid. Elements within this grid will be <code>width: 100%</code> on small screens, but will shrink to become <code>width: 33.33%</code> on medium-sized screens and above.\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {stripIndent`\n                        <div class=\"pure-g\">\n                            <div class=\"pure-u-1 pure-u-md-1-3\"> ... </div>\n                            <div class=\"pure-u-1 pure-u-md-1-3\"> ... </div>\n                            <div class=\"pure-u-1 pure-u-md-1-3\"> ... </div>\n                        </div>\n                    `}\n                </CodeBlock>\n\n                <h3>Default Media Queries</h3>\n\n                <p>\n                    When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. Pure's default responsive grids comes with the following class names and media query breakpoints.\n                </p>\n\n                <div className=\"table-responsive\">\n                    <table className=\"mq-table pure-table-bordered pure-table\">\n                        <thead>\n                            <tr>\n                                <th className=\"highlight\">Key</th>\n                                <th className=\"highlight\">CSS Media Query</th>\n                                <th>Applies</th>\n                                <th>Classname</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td className=\"highlight\"><i>None</i></td>\n                                <td className=\"highlight\"><i>None</i></td>\n                                <td><i>Always</i></td>\n                                <td><code>.pure-u-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>sm</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 35.5em)</code></td>\n                                <td>≥ <b>568px</b></td>\n                                <td><code>.pure-u-<b>sm</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>md</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 48em)</code></td>\n                                <td>≥ <b>768px</b></td>\n                                <td><code>.pure-u-<b>md</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>lg</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 64em)</code></td>\n                                <td>≥ <b>1024px</b></td>\n                                <td><code>.pure-u-<b>lg</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>xl</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 80em)</code></td>\n                                <td>≥ <b>1280px</b></td>\n                                <td><code>.pure-u-<b>xl</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>xxl</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 120em)</code></td>\n                                <td>≥ <b>1920px</b></td>\n                                <td><code>.pure-u-<b>xxl</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>xxxl</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 160em)</code></td>\n                                <td>≥ <b>2560px</b></td>\n                                <td><code>.pure-u-<b>xxxl</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>x4k</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 240em)</code></td>\n                                <td>≥ <b>3840px</b></td>\n                                <td><code>.pure-u-<b>x4k</b>-*</code></td>\n                            </tr>\n\n                        </tbody>\n                    </table>\n                </div>\n\n                {/*\n                <aside>\n                    <p>\n                        If you want to customize these media query breakpoints, head over to the <Link to=\"/start/#build-your-pure-starter-kit\">Get Started</Link> page and generate your own custom grid.\n                    </p>\n                </aside>\n                */}\n\n                <h3>Using Relative Units for Widths</h3>\n\n                <p>\n                    You may have noticed that we use <code>em</code> for our default CSS Media Query widths instead of <code>px</code>. This was a conscious decision since it allows the Media Queries to respond appropriately when people zoom the webpage. Check out <a href=\"https://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/\">this article by Brad Frost</a> for some background information on using relative units within Media Queries.\n                </p>\n\n                <p>\n                    If you do want to use units other than <code>em</code>, you can always modify the default Media Queries on the <a href=\"/start/#build-your-pure-starter-kit\">Get Started</a> page. Converting from <code>em</code> to <code>px</code> is pretty simple:\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {'1em == 16px *'}\n                </CodeBlock>\n\n                <p>\n                    <small>\n                    * The <code>em</code> to <code>px</code> conversion is based on the browser's default font size, which is generally <code>16px</code>, but can be overridden by a user in their browser settings.\n                    </small>\n                </p>\n\n                <h3>An Example of Pure Responsive Grids</h3>\n\n                <p>\n                    The example below leverages Pure's Responsive Grid to create a row with four columns. The columns stack on small screens, take up <code>width: 50%</code> on medium-sized screens, and <code>width: 25%</code> on large screens.\n                </p>\n\n                <p>\n                    This is done by adding the <code>.pure-u-1</code> class for small screens, <code>.pure-u-md-1-2</code> for medium-sized screens, and <code>.pure-u-lg-1-4</code> for large screens. <em>Resize the page to see the grid respond to the screen size.</em>\n                </p>\n            </div>\n\n            <div className=\"grids-example\">\n                <div className=\"pure-g\">\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                        <div className=\"l-box\">\n                            <h3>Lorem Ipsum</h3>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.\n                            </p>\n                        </div>\n                    </div>\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                        <div className=\"l-box\">\n                            <h3>Dolor Sit Amet</h3>\n                            <p>\n                                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.\n                            </p>\n                        </div>\n                    </div>\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                        <div className=\"l-box\">\n                            <h3>Proident laborum</h3>\n                            <p>\n                                In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\n                            </p>\n                        </div>\n                    </div>\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                        <div className=\"l-box\">\n                            <h3>Praesent consectetur</h3>\n                            <p>\n                                Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.\n                            </p>\n                        </div>\n                    </div>\n                    <div className=\"pure-u-1\">\n                        <img className=\"pure-img\" src=\"https://s3.amazonaws.com/ooomf-com-files/wjNV6gWuQkqeuH8txHc9_sylwiabartyzel_unsplash_tatry_03.jpg\" alt=\"By Sylwia Bartyzel from unsplash.com\"  />\n                    </div>\n                    <div className=\"pure-u-2-5\">\n                        <div className=\"l-box\">\n                            <h3>Two-Fifth Column</h3>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.\n                            </p>\n                        </div>\n                    </div>\n                    <div className=\"pure-u-3-5\">\n                        <div className=\"l-box\">\n                            <h3>Three-Fifth Column</h3>\n                            <p>\n                                Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.\n                            </p>\n                            <p>\n                                Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.\n                            </p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Grids on Mobile\" />\n\n                <p>\n                    Pure's default grid system is mobile-first. If you want to have a grid on small screens, just use the <code>pure-u-*</code> classnames on your elements.\n                </p>\n            </div>\n\n            <div className=\"grids-example\">\n                <div className=\"pure-g\">\n                    <div className=\"pure-u-1-3\">\n                        <div className=\"l-box\">\n                            <h3>Thirds</h3>\n                            <p>This cell will be 1/3 width all the time.</p>\n                        </div>\n                    </div>\n                    <div className=\"pure-u-1-3\">\n                        <div className=\"l-box\">\n                            <h3>Thirds</h3>\n                            <p>This cell will be 1/3 width all the time.</p>\n                        </div>\n                    </div>\n                    <div className=\"pure-u-1-3\">\n                        <div className=\"l-box\">\n                            <h3>Thirds</h3>\n                            <p>This cell will be 1/3 width all the time.</p>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Responsive Images\" />\n\n                <p>\n                    When using Responsive Grids, you'll want your images to be fluid as well so they grow and shrink with the content, while maintaining the correct ratio. To do this, just add the <code>.pure-img</code> class on them. Check out the example below.\n                </p>\n            </div>\n\n            <div className=\"grids-example\">\n                <div className=\"pure-g\">\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg\" alt=\"Peyto Lake\" />\n                    </div>\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg\" alt=\"Train\" />\n                    </div>\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg\" alt=\"T-Shirt Store\" />\n                    </div>\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg\" alt=\"Mountain\" />\n                    </div>\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm8.staticflickr.com/7478/16185861115_4ed6353a97.jpg\" alt=\"Miami\" />\n                    </div>\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm3.staticflickr.com/4068/4666556755_091acf3253.jpg\" alt=\"BCE Place, Toronto\" />\n                    </div>\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm6.staticflickr.com/7313/13136053333_f04b335933.jpg\" alt=\"Banff\" />\n                    </div>\n                    <div className=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <img className=\"pure-img\" src=\"http://farm3.staticflickr.com/7628/16754137141_27dcaabd24.jpg\" alt=\"Boston North Point Park\" />\n                    </div>\n                </div>\n            </div>\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Applying Padding and Borders to Grid Units\" />\n\n                <p>\n                    To add borders and padding to Pure Grids, you have two options. The first option is to nest a <code>&lt;div&gt;</code> inside each Grid unit and style the child container:\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {stripIndent`\n                        <style>\n                            .l-box {\n                                padding: 1em;\n                            }\n                        </style>\n\n                        ...\n\n                        <div class=\"pure-g\">\n                            <div class=\"pure-u-1-2\">\n                                <div class=\"l-box\"> ... </div>\n                            </div>\n                            <div class=\"pure-u-1-2\">\n                                <div class=\"l-box\"> ... </div>\n                            </div>\n                        </div>\n                    `}\n                </CodeBlock>\n\n                <p>\n                    The second option is to add borders and padding directly to a grid unit. This would ordinarily risk breaking the layout, but you can easily avoid this problem by augmenting the behavior of the grid itself with a <code>box-sizing: border-box</code> rule:\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {stripIndent`\n                        <style>\n                            .pure-g > div {\n                                box-sizing: border-box;\n                            }\n                            .l-box {\n                                padding: 1em;\n                            }\n                        </style>\n\n                        ...\n\n                        <div class=\"pure-g\">\n                            <div class=\"pure-u-1-2 l-box\"> ... </div>\n                            <div class=\"pure-u-1-2 l-box\"> ... </div>\n                        </div>\n                    `}\n                </CodeBlock>\n\n                <p>\n                    Using <code>box-sizing: border-box</code> keeps your markup cleaner, but has one minor drawback. Setting this property on all grid units makes it harder to override or unset the value later on. As an unopinionated library, Pure lets <code>box-sizing</code> remain at the default value of <code>content-box</code> and leaves the choice up to you.\n                </p>\n\n                <SectionHeader heading=\"Want to just use Grids?\" />\n\n                <p>\n                    Grids is part of the Pure CSS file. However, if you just want Grids and not the other modules, you can pull it down separately. Just include these <code>&lt;link&gt;</code> elements in your <code>&lt;head&gt;</code>.\n                </p>\n\n                <CodeBlock>\n                    {stripIndent`\n                        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/base-min.css\">\n                        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/grids-min.css\">\n                        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/grids-responsive-min.css\">\n                    `}\n                </CodeBlock>\n\n                {/*\n                <aside>\n                    <p>\n                        Optionally, you can head over to the <a href=\"/start/#build-your-pure-starter-kit\">Get Started</a> page to make your very own grid with custom media query breakpoints and column sizes. Download the CSS and HTML file when you're done and get started quickly!\n                    </p>\n                </aside>\n                */}\n            </div>\n        </Layout>\n    );\n}\n\nexport default Grids;\n"
  },
  {
    "path": "site/src/pages/grids/styles.css",
    "content": ".grids-unit {\n    margin: 0.25em 0;\n    padding-left: 4.5em;\n}\n.grids-unit-width {\n    width: 4em;\n    margin-left: -4.5em;\n    padding-right: 0.5em;\n    line-height: 2em;\n    text-align: right;\n    vertical-align: baseline;\n}\n.grids-unit .grids-unit-width {\n    font-family: Consolas, 'Liberation Mono', Courier, monospace;\n}\n.grids-unit-details {\n    position: relative;\n    background: #fafafa\n}\n.grids-unit-classnames {\n    position: absolute;\n    left: 0.5em;\n}\n.grids-unit-classname {\n    margin-right: 1em;\n}\n.grids-unit-classname code {\n    background: none;\n    padding: 0;\n    margin: 0;\n}\n.grids-unit-bar {\n    height: 2em;\n    background: #eee;\n}\n\n/* hack - start.css is being pulled in, overwrite for now */\n.grids .grids-example [class *= \"pure-u\"] {\n    padding: 0;\n    border-width: 1px 0 0;\n    text-align: left;\n    font-family: Helvetica, Arial, sans-serif;\n}\n"
  },
  {
    "path": "site/src/pages/index.js",
    "content": "import Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport useBaseUrl from '@docusaurus/useBaseUrl';\nimport React from 'react';\nimport Layout from '@theme/Layout';\nimport CodeBlock from '../../components/CodeBlock';\nimport { filePercent, fileSize } from '../../lib/utils';\nimport './styles.css';\n\nconst renderModuleSize = (filesizes) => {\n    const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];\n    return modules.map((module, idx) => (\n        <div key={idx} className={`size-chart-${module} pure-u`} style={{width: filePercent({ modules, module, filesizes })}}>\n            <Link className=\"size-chart-item\" to={`/${module}`}>\n                <span className=\"size-chart-label\">\n                    <span className=\"size-chart-mod\">{module}</span>\n                    <span className=\"size-chart-size\">{fileSize({ module, filesizes })}</span>\n                </span>\n            </Link>\n        </div>\n    ));\n};\n\nfunction Home() {\n    const context = useDocusaurusContext();\n    const {siteConfig = {}} = context;\n    const {\n        customFields: {\n            moduleSizes,\n            PURE_DOWNLOAD_SNIPPET,\n            repoName,\n        },\n        organizationName,\n    } = siteConfig;\n    const renderSize = renderModuleSize(moduleSizes);\n    return (\n        <Layout description={siteConfig.tagline}>\n            <div className=\"hero\">\n                <div className=\"hero-titles\">\n                    <img className=\"logo\" src={useBaseUrl('img/logo_pure@2x.png')} alt=\"Pure\" />\n\n                    <h2 className=\"hero-tagline\">A set of small, responsive CSS modules that you can use in every web project.</h2>\n                </div>\n\n                <div className=\"hero-cta\">\n                    <CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>\n\n                    <p>\n                        <Link className=\"button-cta pure-button\" to=\"/start/\">Get Started</Link>\n                        <a className=\"button-secondary pure-button\" href={`https://github.com/${organizationName}/${repoName}/`}>View on GitHub</a>\n                    </p>\n                </div>\n            </div>\n            <div className=\"marketing\">\n                <div className=\"size-chart pure-g\">\n                    {renderSize}\n                </div>\n\n                <div className=\"content\">\n                    <h3 className=\"marketing-header\">CSS with a minimal footprint.</h3>\n\n                    <p>\n                  Pure is ridiculously tiny. The entire set of modules clocks in at <b>{fileSize({ module: 'pure', filesizes: moduleSizes })}* minified and gzipped</b>. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.\n                    </p>\n\n                    <p style={{fontSize: 'smaller'}}>\n                  * We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.\n                    </p>\n                </div>\n            </div>\n            <div className=\"marketing l-wrap pure-g\">\n                <div className=\"content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3\">\n                    <h3 className=\"marketing-header\">Your CSS foundation.</h3>\n                    <p>\n                  Pure builds on <a href=\"http://necolas.github.io/normalize.css/\">Normalize.css</a> and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft.\n                    </p>\n                </div>\n\n                <div className=\"content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3\">\n                    <h3 className=\"marketing-header\">Made with mobile in mind.</h3>\n\n                    <p>\n                  Pure is responsive out of the box, so elements look great on all screen sizes.\n                    </p>\n                </div>\n\n                <div className=\"content pure-u-1 pure-u-lg-3-4 pure-u-xl-1-3\">\n                    <h3 className=\"marketing-header\">Stays out of your way.</h3>\n\n                    <p>\n                  Pure has minimal styles and encourages you to write your application styles on top of it. It's designed to get out of your way and makes it easy to override styles.\n                    </p>\n                </div>\n            </div>\n            <div className=\"marketing l-wrap pure-g\">\n                <div className=\"marketing-diagram content pure-u-1 pure-u-sm-2-3 pure-u-md-1-2\">\n                    <Link to=\"/layouts\">\n                        <img src={useBaseUrl('img/layout-icon.jpg')} className=\"pure-img-responsive\" alt=\"Diagram of a sample layout.\" />\n                    </Link>\n                </div>\n\n                <div className=\"content pure-u-1 pure-u-md-1-2\">\n                    <h3 className=\"marketing-header\">Create responsive layouts.</h3>\n                    <p>\n                  By using <a href=\"/grids/\">Grids</a>, <a href=\"/menus/\">Menus</a>, and more, it's easy to create beautiful responsive layouts for all screen sizes. We've made it easy for you to get started. Take a look at a few different <a href=\"/layouts/\">layouts</a> and start your next web project with a rock-solid foundation.\n                    </p>\n                    <p>\n                        <Link to=\"/layouts/\" className=\"pure-button\">View Layouts</Link>\n                    </p>\n                </div>\n            </div>\n            <div className=\"marketing marketing-customize l-wrap pure-g\">\n                <div className=\"content pure-u-1 pure-u-md-1-2\">\n                    <h3 className=\"marketing-header\">Create your own look and feel.</h3>\n                    <p>\n                  Unlike other frameworks, Pure's design is unopinionated, minimal and flat. We believe that it's much easier to add new CSS rules than to overwrite existing rules. By adding a few lines of CSS, you can customize Pure's appearance to work with your web project.\n                    </p>\n                    <p>\n                        <Link to=\"/extend/\" className=\"pure-button\">Extend Pure</Link>\n                    </p>\n                </div>\n                <div className=\"sample-buttons content pure-u-1 pure-u-md-1-2\">\n                    <div className=\"pure-g\">\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"pure-button\">Default</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"button-a pure-button\">Blue</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"button-b pure-button\">Yellow</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"button-c pure-button\">Black</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"button-d pure-button\">Green</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"button-e pure-button\">Red</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"button-f pure-button\">Purple</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1-2 pure-u-sm-1-3\">\n                            <button className=\"button-g pure-button\">Orange</button>\n                        </span>\n                        <span className=\"sample-button pure-u-1 pure-u-sm-1-3\">\n                            <button className=\"button-h pure-button\">Indigo</button>\n                        </span>\n                    </div>\n                </div>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Home;\n"
  },
  {
    "path": "site/src/pages/layouts/README.md",
    "content": "Pure CSS Layout Examples\n========================\n\nLayout examples using [Pure CSS][pure] compiled from the [pure-site][] project.\n\n[pure]: http://purecss.io/\n[pure-site]: https://github.com/pure-css/pure-site\n\n\nLicense\n-------\n\nThis software is free to use under the zLib license.\nSee the [zLib][] license for more information.\n\n[zLib]: http://www.zlib.net/zlib_license.html\n"
  },
  {
    "path": "site/src/pages/layouts/index.js",
    "content": "import Link from '@docusaurus/Link';\nimport useBaseUrl from '@docusaurus/useBaseUrl';\nimport React from 'react';\nimport Layout from '@theme/Layout';\nimport Header from '../../../components/Header';\nimport SectionHeader from '../../../components/SectionHeader';\n\nimport './styles.css';\n\nconst title = 'Layouts';\nconst description = 'Quickstart your next web project with these example layouts.';\nconst layouts = [\n    {\n        type: 'blog',\n        title: 'Blog',\n        summary: 'A layout example that shows off a blog page with a list of posts.',\n        modules: ['base', 'grids', 'buttons', 'menus']\n    },\n    {\n        type: 'email',\n        title: 'Email',\n        summary: 'A layout example that shows off a responsive email layout.',\n        modules: ['base', 'grids', 'buttons', 'menus']\n    },\n    {\n        type: 'gallery',\n        title: 'Photo Gallery',\n        summary: 'A layout example that shows off a responsive photo gallery.',\n        modules: ['base', 'grids', 'forms', 'buttons', 'menus']\n    },\n    {\n        type: 'marketing',\n        title: 'Landing Page',\n        summary: 'A layout example that shows off a responsive product landing page.',\n        modules: ['base', 'grids', 'forms', 'buttons', 'menus']\n    },\n    {\n        type: 'pricing',\n        title: 'Pricing Table',\n        summary: 'A layout example that shows off a responsive pricing table.',\n        modules: ['base', 'grids', 'buttons', 'menus']\n    },\n    {\n        type: 'side-menu',\n        title: 'Responsive Side Menu',\n        summary: 'A layout example with a side menu that hides on mobile, just like the Pure website.',\n        modules: ['base', 'grids', 'menus']\n    },\n    {\n        type: 'tucked-menu-vertical',\n        title: 'Responsive Horizontal-to-Vertical Menu',\n        summary: 'A set of horizontal menus that switch to vertical and which hide at small window widths.',\n        modules: ['base', 'grids', 'menus']\n    },\n    {\n        type: 'tucked-menu',\n        title: 'Responsive Horizontal-to-Scrollable Menu',\n        summary: 'Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.',\n        modules: ['base', 'menus']\n    }\n];\n\nconst renderLayouts = (layout, idx) => (\n    <div key={idx} className=\"layout-item l-wrap pure-g\">\n        <div className=\"layout-item-screenshot content pure-u-1 u-sm-1-2\">\n            <a href={`/layouts/${layout.type}/`}>\n                <img src={useBaseUrl(`img/layouts/${layout.type}@2x.jpg`)} className=\"pure-img-responsive\" width=\"400\" height=\"214\"\n                    alt={`Screenshot of ${layout.title} example layout`} />\n            </a>\n        </div>\n        <div className=\"layout-item-content content pure-u-1 u-sm-1-2\">\n            <h3 className=\"layout-item-head\">{layout.title}</h3>\n\n            <p>{layout.summary}</p>\n\n            <ul className=\"layout-item-modules pure-g\">\n                {layout.modules.map((m, idx) => (\n                    <li key={idx} className={`layout-item-module layout-item-module-${m} pure-u`}>\n                        <Link to={`/${m}`}>{m}</Link>\n                    </li>\n                ))}\n            </ul>\n\n            <p>\n                <a href={`/layouts/${layout.type}/`}\n                    className=\"pure-button pure-button-primary\">View</a>\n                <a href={`https://github.com/pure-css/pure/tree/main/site/static/layouts/${layout.type}`}\n                    className=\"pure-button\">Source</a>\n            </p>\n        </div>\n    </div>\n);\n\nfunction Layouts() {\n    const layoutMarkup = layouts.map(renderLayouts);\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Common Layouts\" />\n\n                <p>\n                    Pure was crafted with the goal that it can be used in every web project. To showcase this, we've made some common layouts that leverage Pure. These layouts are responsive and don't require JavaScript (except for\n                    certain menu interactions).\n                </p>\n\n                <aside>\n                    <p>\n                        When viewing these layouts, view or copy the source to get a good understanding of what's happening. These layout examples are free to use in your own projects under the <a href=\"http://www.zlib.net/zlib_license.html\">zLib license</a>.\n                    </p>\n                </aside>\n\n                {layoutMarkup}\n            </div>\n        </Layout>\n    );\n}\n\nexport default Layouts;\n"
  },
  {
    "path": "site/src/pages/layouts/styles.css",
    "content": ".layout-item {\n    margin-top: 2em;\n    padding-top: 2em;\n    border-top: 1px solid #eee;\n}\n.layout-item-screenshot {\n    text-align: center;\n}\n.layout-item-head {\n    margin-top: 0; /* so that the .layout-item-head lines up with the image */\n}\n.layout-item-modules {\n    padding: 0;\n}\n.layout-item-module {\n    margin-right: 0.5714em;\n    font-size: 0.875em;\n}\n.layout-item-module-base a {\n    border-left: 3px solid rgb(14, 144, 210);\n}\n.layout-item-module-grids a {\n    border-left: 3px solid rgb(128, 88, 165);\n}\n.layout-item-module-forms a {\n    border-left: 3px solid rgb(94, 185, 94);\n}\n.layout-item-module-buttons a {\n    border-left: 3px solid rgb(221, 81, 76);\n}\n.layout-item-module-tables a {\n    border-left: 3px solid rgb(243, 123, 29);\n}\n.layout-item-module-menus a {\n    border-left: 3px solid rgb(250, 210, 50);\n}\n.layout-item-module a:link,\n.layout-item-module a:visited {\n    text-transform: capitalize;\n    color: rgb(75, 75, 75);\n    padding: 0 0.5714em;\n    line-height: 1.75;\n    display: block;\n}\n.layout-item-content .pure-button {\n    margin-right: 5px;\n}\n"
  },
  {
    "path": "site/src/pages/menus/index.js",
    "content": "import Link from '@docusaurus/Link';\nimport React, { useEffect } from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport Example from '../../../components/Example';\nimport SectionHeader from '../../../components/SectionHeader';\nimport { handleClick } from '../../../lib/utils';\n\nconst title = 'Menus';\nconst description = 'Simple CSS for menus.';\nlet menuLoaded = false;\n\nfunction Menus() {\n    \n    // load external menu js dynamically\n    useEffect(() => {\n        if (!menuLoaded) {\n            const script = document.createElement('script');\n            script.type = 'text/javascript';\n            script.src = '/js/menus.js';\n            document.head.appendChild(script);\n            menuLoaded = true;\n        }\n    });\n\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\" onClick={handleClick}>\n                <SectionHeader heading=\"Vertical Menu\" />\n\n                <p>\n                    Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block.\n                </p>\n\n                <Example>\n                    <style dangerouslySetInnerHTML={{ __html: `\n                        .custom-restricted-width {\n                            /* To limit the menu width to the content of the menu: */\n                            display: inline-block;\n                            /* Or set the width explicitly: */\n                            /* width: 10em; */\n                        }\n                    `}} />\n                    <div className=\"pure-menu custom-restricted-width\">\n                        <span className=\"pure-menu-heading\">Yahoo Sites</span>\n                        <ul className=\"pure-menu-list\">\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Flickr</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Messenger</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Sports</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Finance</a></li>\n                            <li className=\"pure-menu-heading\">More Sites</li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Games</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">News</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">OMG!</a></li>\n                        </ul>\n                    </div>\n                </Example>\n\n                <SectionHeader heading=\"Horizontal Menu\" />\n\n                <p>\n                    To create a horizontal menu, add the <code>pure-menu-horizontal</code> class name.\n                </p>\n\n                <Example>\n                    <div className=\"pure-menu pure-menu-horizontal\">\n                        <a href=\"#\" className=\"pure-menu-heading pure-menu-link\">BRAND</a>\n                        <ul className=\"pure-menu-list\">\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">News</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Sports</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Finance</a></li>\n                        </ul>\n                    </div>\n                </Example>\n\n                <SectionHeader heading=\"Selected and Disabled Items\" />\n\n                <p>\n                    Mark a selected list element by adding the <code>pure-menu-selected</code> class to the list element. To mark a link as disabled, add the class name <code>pure-menu-disabled</code> to the list element. Disabled items appear faded and do not inherit hover styles.\n                </p>\n\n                <Example>\n                    <div className=\"pure-menu pure-menu-horizontal\">\n                        <ul className=\"pure-menu-list\">\n                            <li className=\"pure-menu-item pure-menu-selected\"><a href=\"#\" className=\"pure-menu-link\">Selected</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Normal</a></li>\n                            <li className=\"pure-menu-item pure-menu-disabled\"><a href=\"#\" className=\"pure-menu-link\">Disabled</a></li>\n                        </ul>\n                    </div>\n                </Example>\n\n                <SectionHeader heading=\"Dropdowns\" />\n\n                <p>\n                    We recommend enabling submenus via JavaScript to enable accessibility. To help get you started, <a href=\"/js/menus.js\">an example script</a> written in vanilla JS provides ARIA support, limited submenu arrow-key navigation, and the ability to dismiss menus with an outside event or the ESC key. But you may wish to go further by adding edge detection, comprehensive arrow-key navigation, and polyfills for compatibility with old browsers.\n                </p>\n\n                <p>\n                    Even with JavaScript in place, you still might want to display submenus on hover. Just add <code>pure-menu-allow-hover</code> to the <code>pure-menu-has-children</code> list item. This can be nice for desktop users and provides a fallback for users with no JavaScript.\n                </p>\n\n                <Example>\n                    <div className=\"pure-menu pure-menu-horizontal\">\n                        <ul className=\"pure-menu-list\">\n                            <li className=\"pure-menu-item pure-menu-selected\"><a href=\"#\" className=\"pure-menu-link\">Home</a></li>\n                            <li className=\"pure-menu-item pure-menu-has-children pure-menu-allow-hover\">\n                                <a href=\"#\" id=\"menuLink1\" className=\"pure-menu-link\">Contact</a>\n                                <ul className=\"pure-menu-children\">\n                                    <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Email</a></li>\n                                    <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Twitter</a></li>\n                                    <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Tumblr Blog</a></li>\n                                </ul>\n                            </li>\n                        </ul>\n                    </div>\n                </Example>\n\n                <SectionHeader heading=\"Vertical Menu with Submenus\" />\n\n                <p>\n                    The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.\n                </p>\n\n                <Example>\n                    <div className=\"pure-menu custom-restricted-width\">\n                        <ul className=\"pure-menu-list\">\n                            <li className=\"pure-menu-item pure-menu-selected\"><a href=\"#\" className=\"pure-menu-link\">Flickr</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Messenger</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Sports</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Finance</a></li>\n                            <li className=\"pure-menu-item pure-menu-has-children\">\n                                <a href=\"#\" id=\"menuLink1\" className=\"pure-menu-link\">More</a>\n                                <ul className=\"pure-menu-children\">\n                                    <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Autos</a></li>\n                                    <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Flickr</a></li>\n                                    <li className=\"pure-menu-item pure-menu-has-children\">\n                                        <a href=\"#\" id=\"menuLink1\" className=\"pure-menu-link\">Even More</a>\n                                        <ul className=\"pure-menu-children\">\n                                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Foo</a></li>\n                                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Bar</a></li>\n                                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Baz</a></li>\n                                        </ul>\n                                    </li>\n                                </ul>\n                            </li>\n                        </ul>\n                    </div>\n                </Example>\n\n                <SectionHeader heading=\"Scrollable Horizontal Menu\" />\n\n                <p>\n                    To create a scrollable horizontal menu, add the <code>pure-menu-scrollable</code> class name. When there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported. If you would like momentum-based scrolling we recommend using a JS library like <a href=\"https://github.com/ilyashubin/scrollbooster\">scrollbooster</a> to add such effects. \n                </p>\n\n                <Example>\n                    <div className=\"pure-menu pure-menu-horizontal pure-menu-scrollable\">\n                        <a href=\"#\" className=\"pure-menu-link pure-menu-heading\">Yahoo</a>\n                        <ul className=\"pure-menu-list\">\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Home</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Flickr</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Messenger</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Sports</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Finance</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Autos</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Beauty</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Movies</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Small Business</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Cricket</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Tech</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">World</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">News</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Support</a></li>\n                        </ul>\n                    </div>\n                </Example>\n\n                <SectionHeader heading=\"Scrollable Vertical Menu\" />\n\n                <p>\n                    To create a scrollable vertical menu, limit the height of your menu, and then add the <code>pure-menu-scrollable</code> class name. The menu items can be scrolled or flicked. Submenus are not supported.\n                </p>\n\n                <Example>\n                    <style dangerouslySetInnerHTML={{ __html: `\n                        /* Customization to limit height of the menu */\n                        .custom-restricted {\n                            height: 160px;\n                            width: 150px;\n                            border: 1px solid gray;\n                            border-radius: 4px;\n                        }\n                    `}} />\n                    <div className=\"pure-menu pure-menu-scrollable custom-restricted\">\n                        <a href=\"#\" className=\"pure-menu-link pure-menu-heading\">Yahoo</a>\n                        <ul className=\"pure-menu-list\">\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Home</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Flickr</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Messenger</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Sports</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Finance</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Autos</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Beauty</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Movies</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Small Business</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Cricket</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Tech</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">World</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">News</a></li>\n                            <li className=\"pure-menu-item\"><a href=\"#\" className=\"pure-menu-link\">Support</a></li>\n                        </ul>\n                    </div>\n                </Example>\n\n                <SectionHeader heading=\"Responsive Menus That Hide\" />\n\n                <p>\n                    Check out our <Link to=\"/layouts/\">Layout Examples</Link> to see how you can use Pure as a foundation for more complex menus, such as:\n                </p>\n\n                <Example>\n                    <ul>\n                        <li><a href=\"/layouts/side-menu/\">Responsive Vertical Menu</a>, which\n                            collapses behind a hamburger,\n                            similar to the menu on this Pure website.\n                        </li>\n                        <li><a href=\"/layouts/tucked-menu/\">Responsive Horizontal-Scrollable Menu</a>,\n                            which tucks out of the way on small screens.\n                        </li>\n                        <li><a href=\"/layouts/tucked-menu-vertical/\">Responsive Horizontal-to-Vertical Menu</a>,\n                            which slides out of view.\n                        </li>\n                    </ul>\n                </Example>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Menus;\n"
  },
  {
    "path": "site/src/pages/start/index.js",
    "content": "import useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport SectionHeader from '../../../components/SectionHeader';\nimport CodeBlock from '../../../components/CodeBlock';\nimport { stripIndent } from 'common-tags';\nimport './styles.css';\n\nconst title = 'Get Started';\nconst description = 'Start your next web project with Pure.';\n\nfunction Start() {\n    const context = useDocusaurusContext();\n    const {siteConfig = {}} = context;\n    const {\n        customFields: {\n            PURE_DOWNLOAD_SNIPPET,\n            pureVersion\n        }\n    } = siteConfig;\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Add Pure to Your Page\" />\n\n                <p>\n                  You can add Pure to your page via the <b>free jsDelivr CDN</b>. Just add the following <code>&lt;link&gt;</code> element into your page's <code>&lt;head&gt;</code>, before your project's stylesheets.\n                </p>\n            </div>\n\n            <CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>\n\n            <div className=\"content\">\n                <aside>\n                    <p>\n                      Alternatively, <a href=\"/customize/\">check out other CDNs</a> that host Pure or you can install Pure via a <a href=\"/tools/\">package manager</a>.\n                    </p>\n                </aside>\n\n                <SectionHeader heading=\"Add the Viewport Meta Element\" />\n\n                <p>\n                  The viewport <code>meta</code> element lets you control the the width and scale of the viewport on mobile browsers. Since you're building a responsive website, you want the width to be equal to the device's native width. Add this into your page's <code>&lt;head&gt;</code>.\n                </p>\n            </div>\n\n            <CodeBlock full={true} wrap={true}>\n                {'<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">'}\n            </CodeBlock>\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Understand Pure Grids\" />\n\n                <p>\n                  Pure's grid system is very simple. You create a row by using the <code>.pure-g</code> class, and create columns within that row by using the <code>pure-u-*</code> classes.\n                </p>\n\n                <p>\n                  Here's a grid with three columns:\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {stripIndent`\n                    <div class=\"pure-g\">\n                        <div class=\"pure-u-1-3\"><p>Thirds</p></div>\n                        <div class=\"pure-u-1-3\"><p>Thirds</p></div>\n                        <div class=\"pure-u-1-3\"><p>Thirds</p></div>\n                    </div>\n                `}\n                </CodeBlock>\n            </div>\n\n            <div className=\"grids-example\">\n                <div className=\"pure-g\">\n                    <div className=\"pure-u-1-3\">\n                        <p>Thirds</p>\n                    </div>\n                    <div className=\"pure-u-1-3\">\n                        <p>Thirds</p>\n                    </div>\n                    <div className=\"pure-u-1-3\">\n                        <p>Thirds</p>\n                    </div>\n                </div>\n            </div>\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Responsive Grids\" />\n\n                <p>\n                  Pure's grid system is also <b>mobile-first</b> and <b>responsive</b>, and you're able to customize the grid by specifying CSS Media Query breakpoints and grid classnames.\n                    {/*If needed, you can <a href=\"#build-your-pure-starter-kit\">customize Pure Grids below</a>, but let's start off with an example.*/}\n                </p>\n\n                <p>\n                  You'll need to <em>also</em> include Pure's <code>grids-responsive.css</code> onto your page:\n                </p>\n\n                <CodeBlock wrap={true}>\n                    {`<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/grids-responsive-min.css\">`}\n                </CodeBlock>\n\n                <p>\n                  Here's the default responsive breakpoints included in <code>grids-responsive.css</code>:\n                </p>\n\n                <div className=\"table-responsive\">\n                    <table className=\"mq-table pure-table-bordered pure-table\">\n                        <thead>\n                            <tr>\n                                <th className=\"highlight\">Key</th>\n                                <th className=\"highlight\">CSS Media Query</th>\n                                <th>Applies</th>\n                                <th>Classname</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td className=\"highlight\"><i>None</i></td>\n                                <td className=\"highlight\"><i>None</i></td>\n                                <td><i>Always</i></td>\n                                <td><code>.pure-u-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>sm</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 35.5em)</code></td>\n                                <td>≥ <b>568px</b></td>\n                                <td><code>.pure-u-<b>sm</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>md</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 48em)</code></td>\n                                <td>≥ <b>768px</b></td>\n                                <td><code>.pure-u-<b>md</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>lg</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 64em)</code></td>\n                                <td>≥ <b>1024px</b></td>\n                                <td><code>.pure-u-<b>lg</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>xl</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 80em)</code></td>\n                                <td>≥ <b>1280px</b></td>\n                                <td><code>.pure-u-<b>xl</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>xxl</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 120em)</code></td>\n                                <td>≥ <b>1920px</b></td>\n                                <td><code>.pure-u-<b>xxl</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>xxxl</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 160em)</code></td>\n                                <td>≥ <b>2560px</b></td>\n                                <td><code>.pure-u-<b>xxxl</b>-*</code></td>\n                            </tr>\n                            <tr>\n                                <td className=\"highlight\"><b><code>x4k</code></b></td>\n                                <td className=\"mq-table-mq highlight\"><code>@media screen and (min-width: 240em)</code></td>\n                                <td>≥ <b>3840px</b></td>\n                                <td><code>.pure-u-<b>x4k</b>-*</code></td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n\n                <p>\n                  Here's an example of what you'd be able to do. <i>Try resizing your screen to see how the grid responds.</i>\n                </p>\n            </div>\n            <div className=\"grids-example\">\n                <div className=\"pure-g\">\n                    <div className=\"pure-u-1\">.pure-u-1</div>\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4\n                    </div>\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4\n                    </div>\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4\n                    </div>\n                    <div className=\"pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4\n                    </div>\n                    <div className=\"pure-u-1 pure-u-md-3-4\">.pure-u-1<br/>.pure-u-md-3-4</div>\n                    <div className=\"pure-u-1 pure-u-md-1-4\">.pure-u-1<br/>.pure-u-md-1-4</div>\n                </div>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Start;\n"
  },
  {
    "path": "site/src/pages/start/styles.css",
    "content": ".pure-form label {\n    font-size: 100%;\n}\n\n.grids-example {\n    border-top: 0;\n}\n\n.grid-input,\n.grid-output {\n    margin-bottom: 1em;\n}\n\n.grid-tabs {\n    padding: 3em 0 0;\n    margin: 0;\n}\n\n\n.grid-output-download {\n    font-size: 1.2em;\n}\n\n.grid-tab-link,\n.grid-tab-link:visited {\n    font-weight: bold;\n    padding: 1em 1em;\n    border: 1px solid transparent;\n    border-bottom-color: transparent;\n    color: #666;\n    transition: all 0.1s;\n    cursor: pointer;\n    display: inline-block;\n    font-size: 0.8em;\n}\n\n.grid-output-tabs .grid-tab-link,\n.grid-output-tabs .grid-tab-link:visited,\n.download-link {\n    padding-left: 1em;\n    padding-right: 1em;\n}\n\n.grid-tab-link-selected,\n.grid-tab-link-selected:visited {\n    border: 1px solid #ccc;\n    border-bottom-color: transparent;\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n}\n\n.grid-content {\n    padding: 0.5em;\n    border: 1px solid #ccc;\n    border-radius: 3px;\n    border-top-left-radius: 0;\n    overflow-y: hidden;\n}\n\n.grid-panel {\n    /*\n    By default, we hide these off screen. Not using display:none; to preserve\n    accessibility.\n    */\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n\n}\n.grid-panel-selected {\n    /* when a tab is selected, we remove the position: absolute;*/\n    position: static;\n}\n\n.grid-output .code {\n    overflow-y: scroll;\n    margin: 0;\n}\n#css .code {\n    max-height: 35em;\n}\n\n.offset-1-12 {\n    margin-left: 8.33%;\n}\n\n#media-query-table {\n    margin-bottom: 1em;\n    width: 100%;\n}\n\n#media-query-table td {\n    padding: 0.3em;\n}\n\n.media-query-table-example {\n    font-size: 0.875em;\n    font-weight: normal;\n    display: none;\n}\n.media-query-table-example code {\n    background: none;\n    color: inherit;\n    padding: 0;\n}\n\n.mq-key,\n.mq-value {\n    width: 100%;\n}\n\n.controls {\n    text-align: center;\n    margin-top: 1em;\n}\n\n#options .cols-control label,\n#options .prefix-control label {\n    width: 8.75em;\n}\n.cols-control input {\n    text-align: center;\n}\n\n.remove-row {\n    text-align: center;\n}\n\n.remove-mq {\n    background: white;\n    border: 1px solid rgb(229, 53, 53);\n    font-weight: 500;\n    color: rgb(229, 53, 53);\n    margin-top: 0.25em;\n    padding: 0.25em 0.5em;\n    box-shadow: none;\n    -webkit-transition: background 0.1s;\n    -moz-transition: background 0.1s;\n    transition: background 0.1s;\n}\n\n.remove-mq:hover,\n.remove-mq:active {\n    color: white;\n    background: rgb(249, 114, 114);\n    box-shadow: none;\n}\n\n.grids-example [class *= \"pure-u\"] {\n    font-family: Consolas, 'Liberation Mono', Courier, monospace;\n    text-align: center;\n    padding: 1em 0;\n    border: 1px solid #ddd;\n    border-right: none;\n    border-bottom: none;\n}\n\n.invalid-message {\n    color: #b94a48;\n    font-size: 90%;\n}\n\n.pure-form input[invalid] {\n    border: 1px solid rgb(229, 53, 53);\n}\n\n.download-link {\n    display: block;\n}\n\n@media screen and (min-width: 48em) {\n    .controls {\n        text-align: left;\n    }\n\n    .grid-content {\n        padding: 1em;\n    }\n\n    .grid-tab-link {\n        font-size: 1em;\n    }\n\n    .invalid-message {\n        padding-top: 0.625em;\n    }\n\n    .grid-output-download {\n        font-size: 1.5em;\n    }\n\n    .media-query-table-example {\n        display: block;\n    }\n}\n"
  },
  {
    "path": "site/src/pages/styles.css",
    "content": "/* stylelint-disable docusaurus/copyright-header */\n\n/* overwrite docusaurus styles */\nh3,\np {\n  margin: 1em 0;\n}\ntable {\n  display: table;\n  width: auto;\n}\ntable tr:nth-child(2n) {\n  background-color: transparent;\n}\n\n.hero {\n  display: block;\n  padding: 0;\n  text-align: center;\n}\n.hero-titles {\n  font-family: \"Raleway\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  padding: 0 1em;\n  margin: 2em auto;\n  max-width: 768px;\n}\n.hero-titles .logo {\n  width: 80%;\n  max-width: 419px;\n  margin: 40px 0;\n}\n.hero-site {\n  font-size: 400%;\n  font-weight: 200;\n  margin: 0;\n  color: #1f8dd6;\n}\n.hero-tagline {\n  font-size: 150%;\n  font-weight: 200;\n  line-height: 1.5;\n  margin: 0 0 1em;\n  color: #666;\n}\n\na:hover {\n  text-decoration: none;\n}\na.button-cta,\na.button-secondary {\n  margin: 0.25em;\n}\n\na.button-cta {\n  background: #1f8dd6;\n  color: #fff;\n  border: 1px solid #1f8dd6;\n}\n\na.button-secondary {\n  background: #fff;\n  color: #666;\n  border: 1px solid #ddd;\n}\n\n.size-chart {\n  width: 100%;\n  font-size: 87.5%;\n  line-height: 1.4;\n  margin-bottom: 2em;\n}\n\na.size-chart-item {\n  display: block;\n  color: #fff;\n  padding: 1.45em 0;\n  text-align: center;\n  text-decoration: none;\n  text-transform: capitalize;\n}\n\n.size-chart-label {\n  display: inline-block;\n  -webkit-transform: rotate(-90deg);\n  -moz-transform: rotate(-90deg);\n  -ms-transform: rotate(-90deg);\n  -o-transform: rotate(-90deg);\n}\n.size-chart-size {\n  display: none;\n}\n\n.size-chart-base {\n  background: #1f8dd6;\n}\n.size-chart-base .size-chart-size {\n  color: rgb(103, 194, 240);\n}\n\n.size-chart-grids {\n  background: rgb(128, 88, 165);\n}\n.size-chart-grids .size-chart-size {\n  color: rgb(200, 131, 255);\n}\n\n.size-chart-forms {\n  background: #5eb95e;\n}\n\n.size-chart-forms .size-chart-size {\n  color: rgb(161, 240, 137);\n}\n\n.size-chart-buttons {\n  background: #dd514c;\n}\n\n.size-chart-buttons .size-chart-size {\n  color: rgb(236, 164, 154);\n}\n\n.size-chart-menus {\n  background: rgb(250, 210, 50);\n}\n.size-chart-menus .size-chart-size {\n  color: rgb(255, 240, 134);\n}\n\n.size-chart-tables {\n  background: rgb(243, 123, 29);\n}\n.size-chart-tables .size-chart-label {\n  margin-left: -0.5em;\n}\n.size-chart-tables .size-chart-size {\n  color: rgb(255, 190, 129);\n}\n\n.marketing {\n  border-bottom: 1px solid #eee;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  padding-bottom: 2em;\n}\n.marketing-customize {\n  margin-bottom: 0;\n  border-bottom: 0;\n  padding-bottom: 0;\n}\n\n.marketing .content {\n  margin-bottom: 0;\n}\n\n.marketing-header {\n  font-weight: 400;\n}\n\n.marketing-diagram {\n  margin: 2em auto;\n}\n\n.sample-buttons {\n  margin: 1em auto;\n  padding: 0 0.5em;\n}\n\n.sample-button {\n  padding: 0.5em;\n  text-align: center;\n}\n.sample-button .pure-button {\n  width: 100%;\n}\n\n.button-a {\n  background: #e1f2fa;\n  color: #5992aa;\n}\n\n.button-b {\n  background: #fcebbd;\n  color: #af9540;\n}\n\n.button-c,\n.button-d,\n.button-e {\n  border-radius: 8px;\n}\n\n.button-f,\n.button-g,\n.button-h {\n  border-radius: 20px;\n}\n\n.button-c {\n  background: #333;\n  color: #fff;\n}\n.button-d {\n  background: #d3eda3;\n  color: #72962e;\n}\n\n.button-e {\n  background: #f5ab9e;\n  color: #8c3a2b;\n}\n.button-f {\n  background: #ddaeff;\n  color: #8156a7;\n}\n\n.button-g {\n  background: #f57b00;\n  color: #ffca95;\n}\n\n.button-h {\n  background: #008ed4;\n  color: #fff;\n}\n.sample-button .button-h {\n  width: 50%; /* Updated to 80% at sm breakpoint */\n}\n\n@media screen and (min-width: 30em) {\n  .size-chart-tables .size-chart-label {\n    margin-left: 0;\n  }\n}\n\n@media screen and (min-width: 35.5em) {\n  .hero {\n    margin-bottom: 3em;\n  }\n\n  .sample-button .button-h {\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 48em) {\n  .hero-titles {\n    padding: 0 2em;\n  }\n  .hero-titles .logo {\n    width: 419px;\n    height: auto;\n  }\n  .hero-site {\n    font-size: 720%;\n  }\n  .hero-tagline {\n    font-size: 220%;\n  }\n\n  a.button-cta,\n  a.button-secondary {\n    font-size: 125%;\n  }\n\n  .size-chart {\n    font-size: 100%;\n  }\n  a.size-chart-item {\n    padding: 0.5em;\n    text-align: left;\n  }\n  .size-chart-label {\n    -webkit-transform: none;\n    -moz-transform: none;\n    -ms-transform: none;\n    -o-transform: none;\n  }\n  .size-chart-size {\n    display: block;\n  }\n\n  .marketing-header {\n    font-size: 150%;\n  }\n\n  .l-wrap .sample-buttons {\n    padding: 0 0.5em;\n  }\n}\n"
  },
  {
    "path": "site/src/pages/tables/index.js",
    "content": "import React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport Example from '../../../components/Example';\nimport SectionHeader from '../../../components/SectionHeader';\n\nconst title = 'Tables';\nconst description = 'Simple CSS for HTML tables.';\n\nfunction Tables() {\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Default Table\" />\n\n                <p>\n              To style an HTML table, add the <code>pure-table</code> classname. This class adds padding and borders to table elements, and emphasizes the header.\n                </p>\n\n                <Example>\n                    <table className=\"pure-table\">\n                        <thead>\n                            <tr>\n                                <th>#</th>\n                                <th>Make</th>\n                                <th>Model</th>\n                                <th>Year</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>1</td>\n                                <td>Honda</td>\n                                <td>Accord</td>\n                                <td>2009</td>\n                            </tr>\n                            <tr>\n                                <td>2</td>\n                                <td>Toyota</td>\n                                <td>Camry</td>\n                                <td>2012</td>\n                            </tr>\n                            <tr>\n                                <td>3</td>\n                                <td>Hyundai</td>\n                                <td>Elantra</td>\n                                <td>2010</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </Example>\n\n                <SectionHeader heading=\"Bordered Table\" />\n\n                <p>\n              To add horizontal and vertical borders to all cells, add the <code>pure-table-bordered</code> classname to the <code>&lt;table&gt;</code> element.\n                </p>\n\n                <Example>\n                    <table className=\"pure-table pure-table-bordered\">\n                        <thead>\n                            <tr>\n                                <th>#</th>\n                                <th>Make</th>\n                                <th>Model</th>\n                                <th>Year</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>1</td>\n                                <td>Honda</td>\n                                <td>Accord</td>\n                                <td>2009</td>\n                            </tr>\n                            <tr>\n                                <td>2</td>\n                                <td>Toyota</td>\n                                <td>Camry</td>\n                                <td>2012</td>\n                            </tr>\n                            <tr>\n                                <td>3</td>\n                                <td>Hyundai</td>\n                                <td>Elantra</td>\n                                <td>2010</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </Example>\n\n                <SectionHeader heading=\"Table with Horizontal Borders\" />\n\n                <p>\n              If you prefer horizontal lines only, add the <code>pure-table-horizontal</code> classname to the <code>&lt;table&gt;</code> element.\n                </p>\n\n                <Example>\n                    <table className=\"pure-table pure-table-horizontal\">\n                        <thead>\n                            <tr>\n                                <th>#</th>\n                                <th>Make</th>\n                                <th>Model</th>\n                                <th>Year</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>1</td>\n                                <td>Honda</td>\n                                <td>Accord</td>\n                                <td>2009</td>\n                            </tr>\n                            <tr>\n                                <td>2</td>\n                                <td>Toyota</td>\n                                <td>Camry</td>\n                                <td>2012</td>\n                            </tr>\n                            <tr>\n                                <td>3</td>\n                                <td>Hyundai</td>\n                                <td>Elantra</td>\n                                <td>2010</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </Example>\n\n                <SectionHeader heading=\"Striped Table\" />\n\n                <p>\n              Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>pure-table-odd</code> class name to every other <code>&lt;tr&gt;</code> element changes the background of the row and creates a zebra-styled effect.\n                </p>\n\n                <p>\n                    <b>Note:</b> In browsers which support the CSS3 <a href=\"http://caniuse.com/#search=nth-child\"><code>nth-child</code> pseudo selector</a> a simpler approach can be used. The <code>pure-table-striped</code> classname can be added to the <code>&lt;table&gt;</code> element and the zebra-styled striping will happen automatically.\n                </p>\n\n                <Example>\n                    <table className=\"pure-table\">\n                        <thead>\n                            <tr>\n                                <th>#</th>\n                                <th>Make</th>\n                                <th>Model</th>\n                                <th>Year</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr className=\"pure-table-odd\">\n                                <td>1</td>\n                                <td>Honda</td>\n                                <td>Accord</td>\n                                <td>2009</td>\n                            </tr>\n                            <tr>\n                                <td>2</td>\n                                <td>Toyota</td>\n                                <td>Camry</td>\n                                <td>2012</td>\n                            </tr>\n                            <tr className=\"pure-table-odd\">\n                                <td>3</td>\n                                <td>Hyundai</td>\n                                <td>Elantra</td>\n                                <td>2010</td>\n                            </tr>\n                            <tr>\n                                <td>4</td>\n                                <td>Ford</td>\n                                <td>Focus</td>\n                                <td>2008</td>\n                            </tr>\n                            <tr className=\"pure-table-odd\">\n                                <td>5</td>\n                                <td>Nissan</td>\n                                <td>Sentra</td>\n                                <td>2011</td>\n                            </tr>\n                            <tr>\n                                <td>6</td>\n                                <td>BMW</td>\n                                <td>M3</td>\n                                <td>2009</td>\n                            </tr>\n                            <tr className=\"pure-table-odd\">\n                                <td>7</td>\n                                <td>Honda</td>\n                                <td>Civic</td>\n                                <td>2010</td>\n                            </tr>\n                            <tr>\n                                <td>8</td>\n                                <td>Kia</td>\n                                <td>Soul</td>\n                                <td>2010</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </Example>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Tables;\n"
  },
  {
    "path": "site/src/pages/tools/index.js",
    "content": "import React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimport CodeBlock from '../../../components/CodeBlock';\nimport SectionHeader from '../../../components/SectionHeader';\nimport { stripIndent } from 'common-tags';\n\nconst title = 'Tools';\nconst description = 'Write, manipulate, and do more with CSS.';\n\nfunction Tools() {\n    return (\n        <Layout description={description} title={title}>\n            <Header description={description} title={title} />\n\n            <div className=\"content\">\n                <SectionHeader heading=\"Installing Pure with npm\" />\n\n                <p>\n                You can add Pure to your project through <a href=\"https://www.npmjs.com/\">npm</a>. This is our recommended way to to integrate Pure into your project's build process and tool chain.\n                </p>\n\n                <CodeBlock>$ npm install purecss --save</CodeBlock>\n\n                <p>\n                    <code>require(&#x27;purecss&#x27;)</code> will load an object with the following methods:\n                </p>\n\n                <ul>\n                    <li><code>getFile(name)</code></li>\n                &ndash; Retrieve contents of a Pure module file.\n                    <li><code>getFilePath(name)</code></li>\n                &ndash; Return full path to a Pure file.\n                </ul>\n\n                <SectionHeader heading=\"Installing Pure with Composer\" />\n\n                <p>\n                You can also install Pure with <a href=\"https://getcomposer.org/\">Composer</a>.\n                </p>\n\n                <CodeBlock>$ composer require pure-css/pure</CodeBlock>\n\n                <SectionHeader heading=\"Extending Pure with Grunt\" />\n\n                <p>\n                We've written several tools that help you extend Pure and integrate it with your project's CSS. These tools are available as <b><a href=\"http://gruntjs.com\">Grunt</a></b> plugins that can easily be integrated into your existing <code>Gruntfile.js</code>.\n                </p>\n\n                <aside>\n                    <p>\n                    If you haven't used Grunt before, it's very easy to set up. Just head over to the <a href=\"http://gruntjs.com/getting-started\">Getting Started</a> page to learn more.\n                    </p>\n                </aside>\n\n                <SectionHeader heading=\"Extending Pure with Rework\" />\n\n                <p>\n                We've taken a layered approach to developing Pure's tooling. Most of the tools are first built as <b><a href=\"https://github.com/reworkcss/rework\">Rework</a></b> plugins. This allows you to compose Pure's Rework plugins together with other Rework plugins. It also allows the Grunt plugins to be written as <em>very thin</em> wrappers.\n                </p>\n\n                <SectionHeader heading=\"Generating Custom Responsive Grids\" />\n\n                <p>\n                Pure was created to help developer's build mobile-first responsive web projects. However, since CSS Media Queries cannot be over-written via CSS, you can use Pure's tooling to customize Pure's Responsive Grids for your project.\n                </p>\n\n                <h3>Via Grunt</h3>\n\n                <p>\n                Install the <a href=\"https://www.npmjs.org/package/grunt-pure-grids\">Pure Grids Grunt Plugin</a> through npm.\n                </p>\n\n                <CodeBlock>$ npm install grunt-pure-grids --save-dev</CodeBlock>\n\n                <p>\n                Next, add it to your <code>Gruntfile.js</code>.\n                </p>\n\n                <CodeBlock>grunt.loadNpmTasks(&#x27;grunt-pure-grids&#x27;);</CodeBlock>\n\n                <p>\n                Finally, add the necessary configuration through the <code>pure_grids</code> task. To see a full list of all configurable properties, check out the <a href=\"https://www.npmjs.org/package/grunt-pure-grids#readme\">README documentation</a>.\n                </p>\n\n                <CodeBlock>\n                    {stripIndent`\n                    grunt.initConfig({\n                        pure_grids: {\n                            dest : \"build/public/css/main-grid.css\",\n                            options: {\n                                units: 12, // 12-column grid\n                                mediaQueries: {\n                                    sm: 'screen and (min-width: 35.5em)', // 568px\n                                    md: 'screen and (min-width: 48em)',   // 768px\n                                    lg: 'screen and (min-width: 64em)',   // 1024px\n                                    xl: 'screen and (min-width: 80em)',   // 1280px\n                                    xxl: 'screen and (min-width: 120em)',  // 1920px\n                                    xxxl: 'screen and (min-width: 160em)',  // 2560px                                    \n                                    x4k: 'screen and (min-width: 240em)'  // 3840px                                    \n                                }\n                            }\n                        }\n                    });\n                `}\n                </CodeBlock>\n\n                <h3>Via Rework</h3>\n\n                <p>\n                If you're not using Grunt, you can also generate your custom responsive grids through using the <a href=\"https://www.npmjs.org/package/rework-pure-grids\">Pure Grids Rework Plugin</a>. It has the same configuration options as the Grunt plugin &mdash; in fact, this is what powers the Grunt plugin.\n                </p>\n\n                <p>\n                You can install the Rework plugin through npm.\n                </p>\n\n                <CodeBlock>$ npm install rework rework-pure-grids</CodeBlock>\n\n                <p>\n                And it can be used on it's own like this, or along side other Rework plugins you might be using.\n                </p>\n\n                <CodeBlock>\n                    {stripIndent`\n                    import rework from 'rework';\n                    import pureGrids from 'rework-pure-grids';\n\n                    const css = rework('').use(pureGrids.units({\n                        mediaQueries: {\n                            sm: 'screen and (min-width: 35.5em)', // 568px\n                            md: 'screen and (min-width: 48em)',   // 768px\n                            lg: 'screen and (min-width: 64em)',   // 1024px\n                            xl: 'screen and (min-width: 80em)',   // 1280px\n                            xxl: 'screen and (min-width: 120em)',  // 1920px\n                            xxxl: 'screen and (min-width: 160em)'  // 2560px\n                            x4k: 'screen and (min-width: 240em)'  // 3840px\n                        }\n                    })).toString();\n\n                    // This will log-out the grid CSS.\n                    console.log(css);\n                `}\n                </CodeBlock>\n\n                <SectionHeader heading=\"Mutating Selectors\" />\n\n                <p>\n                All selectors defined in Pure's source code begin with the <code>.pure-</code> prefix. However, you may want to change this. To accomplish this task, you can use Pure's tooling to mutate CSS selectors.\n                </p>\n\n                <h3>Via Grunt</h3>\n\n                <p>\n                Install the <a href=\"https://www.npmjs.org/package/grunt-css-selectors\">CSS Selectors Grunt Plugin</a> through npm.\n                </p>\n\n                <CodeBlock>$ npm install grunt-css-selectors --save-dev</CodeBlock>\n\n                <p>\n                Once it's installed, add the task to your <code>Gruntfile.js</code>\n                </p>\n\n                <CodeBlock>grunt.loadNpmTasks(&#x27;grunt-css-selectors&#x27;);</CodeBlock>\n\n                <p>\n                Finally, add the necessary configuration through the <code>css_selectors</code> task. Check out the <a href=\"https://www.npmjs.org/package/grunt-css-selectors#readme\">README documentation</a> for more details.\n                </p>\n\n                <CodeBlock>\n                    {stripIndent`\n                    grunt.initConfig({\n                        css_selectors: {\n                            options: {\n                                mutations: [\n                                    {prefix: '.foo'}\n                                ]\n                            },\n                            files: {\n                                'dest/foo-prefixed.css': ['src/foo.css'],\n                            }\n                        }\n                    });\n                `}\n                </CodeBlock>\n\n                <h3>Via Rework</h3>\n\n                <p>\n                If you're not using Grunt, you can also mutate CSS selectors using the <a href=\"https://www.npmjs.org/package/rework-mutate-selectors\">Mutate Selectors Rework Plugin</a>. It has a similar interface to the Grunt plugin &mdash; in fact, this is what powers the Grunt plugin.\n                </p>\n\n                <p>\n                You can install the Rework plugin through npm.\n                </p>\n\n                <CodeBlock>$ npm install rework rework-mutate-selectors</CodeBlock>\n\n                <p>\n                And it can be used on it's own like this, or along side other Rework plugins you might be using.\n                </p>\n\n                <CodeBlock>\n                    {stripIndent`\n                    import rework from 'rework';\n                    import selectors from 'rework-mutate-selectors';\n\n                    const css = rework(inputCSS)\n                        .use(selectors.prefix('.foo'))\n                        .use(selectors.replace(/^\\.pure/g, '.bar'))\n                        .toString();\n\n                    // This will log-out the resulting CSS.\n                    console.log(css);\n                `}\n                </CodeBlock>\n\n                <aside>\n                    <p>\n                    If you have questions or run into issues while these tools, please file them on their respective GitHub repositories.\n                    </p>\n                </aside>\n            </div>\n        </Layout>\n    );\n}\n\nexport default Tools;\n"
  },
  {
    "path": "site/src/theme/Layout.js",
    "content": "import React, { useEffect } from 'react';\nimport Head from '@docusaurus/Head';\nimport isInternalUrl from '@docusaurus/isInternalUrl';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport useBaseUrl from '@docusaurus/useBaseUrl';\n\nimport Menu from '../../components/Menu';\nimport Footer from '../../components/Footer';\n\n// load common custom css\nimport '../../../build/pure-min.css';\nimport '../../../build/grids-responsive-min.css';\nimport '../../static/css/main.css';\n\nlet jsLoaded = false;\n\nfunction Layout(props) {\n    const {siteConfig = {}} = useDocusaurusContext();\n    const {\n        favicon,\n        title: siteTitle,\n        themeConfig: {image: defaultImage},\n        url: siteUrl,\n    } = siteConfig;\n    const {\n        children,\n        title,\n        description,\n        image,\n        keywords,\n        permalink,\n        version,\n    } = props;\n    const metaTitle = title ? `${title} - ${siteTitle}` : siteTitle;\n\n    const metaImage = image || defaultImage;\n    let metaImageUrl = siteUrl + useBaseUrl(metaImage);\n    if (!isInternalUrl(metaImage)) {\n        metaImageUrl = metaImage;\n    }\n\n    const faviconUrl = useBaseUrl(favicon);\n  \n    // load external menu js dynamically\n    useEffect(() => {\n        if (!jsLoaded) {\n            const script = document.createElement('script');\n            script.type = 'text/javascript';\n            script.src = '/js/ui.js';\n            document.head.appendChild(script);\n            jsLoaded = true;\n        }\n    });\n\n    return (\n        <>\n            <Head>\n                <meta charset=\"utf-8\" />\n                <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\n                {metaTitle && <title>{metaTitle}</title>}\n                {metaTitle && <meta property=\"og:title\" content={metaTitle} />}\n                {favicon && <link rel=\"shortcut icon\" href={faviconUrl} />}\n                {description && <meta name=\"description\" content={description} />}\n                {description && (\n                    <meta property=\"og:description\" content={description} />\n                )}\n                {version && <meta name=\"docsearch:version\" content={version} />}\n                {keywords && keywords.length && (\n                    <meta name=\"keywords\" content={keywords.join(',')} />\n                )}\n                {metaImage && <meta property=\"og:image\" content={metaImageUrl} />}\n                {metaImage && (\n                    <meta property=\"twitter:image\" content={metaImageUrl} />\n                )}\n                {metaImage && (\n                    <meta name=\"twitter:image:alt\" content={`Image for ${metaTitle}`} />\n                )}\n                {permalink && (\n                    <meta property=\"og:url\" content={siteUrl + permalink} />\n                )}\n                <meta name=\"twitter:card\" content=\"summary_large_image\" />\n                <meta name=\"google-site-verification\" content=\"4Vwl0ECmIrHsoK0rSTN3orQJLvIKWfcQCq4IeHCYZOY\" />\n\n                <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Raleway:200\" />\n            </Head>\n            <div id=\"layout\">\n                <Menu />\n                <div id=\"main\" className={(title || 'home').toLowerCase()}>\n                    {children}\n                    <Footer siteConfig={siteConfig} />\n                </div>\n            </div>\n        </>\n    );\n}\n\nexport default Layout;\n"
  },
  {
    "path": "site/static/.nojekyll",
    "content": ""
  },
  {
    "path": "site/static/css/main.css",
    "content": "* {\n    -webkit-box-sizing: border-box;\n       -moz-box-sizing: border-box;\n            box-sizing: border-box;\n}\n\n*:before,\n*:after {\n    -webkit-box-sizing: border-box;\n       -moz-box-sizing: border-box;\n            box-sizing: border-box;\n}\n\nhtml, button, input, select, textarea,\n.pure-g [class *= \"pure-u\"] {\n    font-family: Helvetica, Arial, sans-serif;\n    letter-spacing: 0.01em;\n}\n\n\n/* --------------------------\n * Element Styles\n * --------------------------\n*/\n\nbody {\n    min-width: 320px;\n    background-color: #fff;\n    color: #777;\n    line-height: 1.6;\n}\n\nh1, h2, h3, h4, h5, h6 {\n    font-weight: bold;\n    color: rgb(75, 75, 75);\n}\nh3 {\n    font-size: 1.25em;\n}\nh4 {\n    font-size: 1.125em;\n}\n\na {\n    color: #3b8bba; /* block-background-text-normal */\n    text-decoration: none;\n}\n\na:visited {\n    color: #265778; /* block-normal-text-normal */\n}\n\ndt {\n    font-weight: bold;\n}\ndd {\n    margin: 0 0 10px 0;\n}\n\naside {\n    background: #1f8dd6; /* same color as selected state on site menu */\n    margin: 1em 0;\n    padding: 0.3em 1em;\n    border-radius: 3px;\n    color: #fff;\n}\n    aside a, aside a:visited {\n        color: rgb(169, 226, 255);\n    }\n\n\n/* --------------------------\n * Layout Styles\n * --------------------------\n*/\n\n/* Navigation Push Styles */\n#layout {\n    position: relative;\n    padding-left: 0;\n}\n    #layout.active #menu {\n        left: 160px;\n        width: 160px;\n    }\n\n/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */\n.l-box {\n    padding: 1em;\n}\n\n.l-wrap {\n    margin-left: auto;\n    margin-right: auto;\n}\n.content .l-wrap {\n    margin-left: -1em;\n    margin-right: -1em;\n}\n\n\n/* --------------------------\n * Header Module Styles\n * --------------------------\n*/\n\n.header {\n    font-family: \"Raleway\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    max-width: 768px;\n    margin: 0 auto;\n    padding: 1em;\n    text-align: center;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    letter-spacing: 0.05em;\n}\n    .header h1 {\n        font-size: 300%;\n        font-weight: 100;\n        margin: 0;\n    }\n     .header h2 {\n        font-size: 125%;\n        font-weight: 100;\n        line-height: 1.5;\n        margin: 0;\n        color: #666;\n        letter-spacing: -0.02em;\n    }\n\n\n /* --------------------------\n  * Content Module Styles\n  * --------------------------\n */\n\n/* The content div is placed as a wrapper around all the docs */\n.content {\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: 1em;\n    padding-right: 1em;\n    max-width: 768px;\n}\n\n    .content .content-subhead {\n        margin: 2em 0 1em 0;\n        font-weight: 300;\n        color: #888;\n        position: relative;\n    }\n\n    .content .content-spaced {\n        line-height: 1.8;\n    }\n\n    .content .content-quote {\n        font-family: \"Georgia\", serif;\n        color: #666;\n        font-style: italic;\n        line-height: 1.8;\n        border-left: 5px solid #ddd;\n        padding-left: 1.5em;\n    }\n\n    .content-link {\n        position: absolute;\n        top: 0;\n        right: 0;\n        display: block;\n        height: 100%;\n        width: 20px;\n        background: transparent url('/img/link-icon.png') no-repeat center center;\n        background-size: 20px 20px;\n    }\n\n    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {\n        .content-link {\n            background-image: url('/img/link-icon@2x.png');\n        }\n    }\n\n\n/* --------------------------\n * Code Styles\n * --------------------------\n*/\n\npre,\ncode {\n    font-family: Consolas, Courier, monospace;\n    color: #333;\n    background: rgb(250, 250, 250);\n}\n\ncode {\n    padding: 0.2em 0.4em;\n    white-space: nowrap;\n}\n.content p code {\n    font-size: 90%;\n}\n\n.code {\n    margin-left: -1em;\n    margin-right: -1em;\n    border: 1px solid #eee;\n    border-left-width: 0;\n    border-right-width: 0;\n    overflow-x: auto;\n}\n.code pre {\n    margin: 0;\n}\n.code code {\n    font-size: 95%;\n    white-space: pre;\n    word-wrap: normal;\n    padding: 0;\n    background: none;\n}\n.code-wrap code {\n    white-space: pre-wrap;\n    word-wrap: break-word;\n}\n.example .code {\n    margin-top: 1em;\n}\n\n/* --------------------------\n * Footer Module Styles\n * --------------------------\n*/\n\n.footer {\n    font-size: 87.5%;\n    border-top: 1px solid #eee;\n    margin-top: 3.4286em;\n    padding: 1.1429em;\n    background: rgb(250, 250, 250);\n}\n\n.legal {\n    line-height: 1.6;\n    text-align: center;\n    margin: 0 auto;\n}\n\n    .legal-license {\n        margin-top: 0;\n    }\n    .legal-links {\n        list-style: none;\n        padding: 0;\n        margin-bottom: 0;\n    }\n    .legal-copyright {\n        margin-top: 0;\n        margin-bottom: 0;\n    }\n\n\n/* --------------------------\n * Main Navigation Bar Styles\n * --------------------------\n*/\n\n/* Add transition to containers so they can push in and out */\n#layout,\n#menu,\n.menu-link {\n    -webkit-transition: all 0.2s ease-out;\n    -moz-transition: all 0.2s ease-out;\n    -ms-transition: all 0.2s ease-out;\n    -o-transition: all 0.2s ease-out;\n    transition: all 0.2s ease-out;\n}\n\n#layout.active .menu-link {\n    left: 160px;\n}\n\n#menu {\n    margin-left: -160px; /* \"#menu\" width */\n    width: 160px;\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    z-index: 1000; /* so the menu or its navicon stays above all content */\n    background: #191818;\n    overflow-y: auto;\n}\n    #menu a {\n        color: #999;\n        border: none;\n        white-space: normal;\n        padding: 0.625em 1em;\n    }\n\n    #menu .pure-menu-open {\n        background: transparent;\n        border: 0;\n    }\n\n    #menu .pure-menu ul {\n        border: none;\n        background: transparent;\n        display: block;\n    }\n\n    #menu .pure-menu ul,\n    #menu .pure-menu .menu-item-divided {\n        border-top: 1px solid #333;\n    }\n\n        #menu .pure-menu-list li .pure-menu-link:hover,\n        #menu .pure-menu-list li .pure-menu-link:focus {\n            background: #333;\n        }\n\n    .menu-link {\n        position: fixed;\n        display: block; /* show this only on small screens */\n        top: 0;\n        left: 0; /* \"#menu width\" */\n        background: #000;\n        background: rgba(0,0,0,0.7);\n        font-size: 11px; /* change this value to increase/decrease button size */\n        z-index: 10;\n        width: 4em;\n        height: 4em;\n        padding: 1em;\n    }\n\n        .menu-link:hover,\n        .menu-link:focus {\n            background: #000;\n        }\n\n        .menu-link span {\n            position: relative;\n            display: block;\n            margin-top: 0.9em;\n        }\n\n        .menu-link span,\n        .menu-link span:before,\n        .menu-link span:after {\n            background-color: #fff;\n            pointer-events: none;\n            width: 100%;\n            height: .2em;\n            -webkit-transition: all 0.4s;\n               -moz-transition: all 0.4s;\n                -ms-transition: all 0.4s;\n                 -o-transition: all 0.4s;\n                    transition: all 0.4s;\n        }\n\n            .menu-link span:before,\n            .menu-link span:after {\n                position: absolute;\n                top: -.55em;\n                content: \" \";\n            }\n\n            .menu-link span:after {\n                top: .55em;\n            }\n\n        .menu-link.active span {\n            background: transparent;\n        }\n\n            .menu-link.active span:before {\n                -webkit-transform: rotate(45deg) translate(.5em, .4em);\n                   -moz-transform: rotate(45deg) translate(.5em, .4em);\n                    -ms-transform: rotate(45deg) translate(.5em, .4em);\n                     -o-transform: rotate(45deg) translate(.5em, .4em);\n                        transform: rotate(45deg) translate(.5em, .4em);\n            }\n\n            .menu-link.active span:after {\n                -webkit-transform: rotate(-45deg) translate(.4em, -.3em);\n                   -moz-transform: rotate(-45deg) translate(.4em, -.3em);\n                    -ms-transform: rotate(-45deg) translate(.4em, -.3em);\n                     -o-transform: rotate(-45deg) translate(.4em, -.3em);\n                        transform: rotate(-45deg) translate(.4em, -.3em);\n            }\n\n    #menu .pure-menu-heading {\n        font-size: 125%;\n        font-weight: 300;\n        letter-spacing: 0.1em;\n        color: #fff;\n        margin-top: 0;\n        padding: 0.5em 0.8em;\n        text-transform: uppercase;\n    }\n    #menu .pure-menu-heading:hover,\n    #menu .pure-menu-heading:focus {\n        color: #999;\n    }\n\n    #menu .pure-menu-item .active {\n        background: #1f8dd6;\n        color: #fff;\n    }\n\n    #menu li.pure-menu-item .active:hover,\n    #menu li.pure-menu-item .active:focus {\n        background: #1f8dd6;\n    }\n\n\n/* ---------------------\n * Smaller Module Styles\n * ---------------------\n*/\n\n.pure-img-responsive {\n    max-width: 100%;\n    height: auto;\n}\n\n.pure-paginator .pure-button {\n    -webkit-box-sizing: content-box;\n    -moz-box-sizing: content-box;\n    box-sizing: content-box;\n}\n\n.pure-button {\n    font-family: inherit;\n}\na.pure-button-primary {\n    color: white;\n}\n\n\n/* green call to action button class */\n.notice {\n    background-color: #61B842;\n    color: white;\n}\n\n.muted {\n    color: #ccc;\n}\n\n\n\n/* -------------\n * Table Styles\n * -------------\n*/\n.pure-table th,\n.pure-table td {\n    padding: 0.5em 1em;\n}\n\n.table-responsive {\n    margin-left: -1em;\n    margin-right: -1em;\n    overflow-x: auto;\n    margin-bottom: 1em;\n}\n.table-responsive table {\n    width: 100%;\n    min-width: 35.5em;\n    border-left-width: 0;\n    border-right-width: 0;\n}\n\n.table-responsive .mq-table {\n    width: 100%;\n    min-width: 44em;\n}\n.mq-table th.highlight {\n    background-color: rgb(255, 234, 133);\n}\n.mq-table td.highlight {\n    background-color: rgb(255, 250, 229);\n}\n.mq-table th.highlight code,\n.mq-table td.highlight code {\n    background: rgb(255, 255, 243);\n}\n.mq-table-mq code {\n    font-size: 0.875em;\n}\n\n/* ----------------------------\n * Example for full-width Grids\n * ----------------------------\n*/\n\n.grids-example {\n    background: rgb(250, 250, 250);\n    margin: 2em auto;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n}\n\n/* --------------------------\n * State Rules\n * --------------------------\n*/\n\n\n.is-code-full {\n    text-align: center;\n}\n.is-code-full .code {\n    margin-left: auto;\n    margin-right: auto;\n}\n.is-code-full code {\n    display: inline-block;\n    max-width: 768px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n\n/* --------------------------\n * Responsive Styles\n * --------------------------\n*/\n\n@media screen and (min-width: 35.5em) {\n\n    .legal-license {\n        text-align: left;\n        margin: 0;\n    }\n    .legal-copyright,\n    .legal-links,\n    .legal-links li {\n        text-align: right;\n        margin: 0;\n    }\n\n}\n\n@media screen and (min-width: 48em) {\n\n    .l-wrap,\n    .l-wrap .content {\n        padding-left: 1em;\n        padding-right: 1em;\n    }\n    .content .l-wrap {\n        margin-left: -2em;\n        margin-right: -2em;\n    }\n\n    .header,\n    .content {\n        padding-left: 2em;\n        padding-right: 2em;\n    }\n\n    .header h1 {\n        font-size: 320%;\n    }\n    .header h2 {\n        font-size: 128%;\n    }\n\n    .content p {\n        font-size: 1.125em;\n    }\n\n    .code {\n        margin-left: auto;\n        margin-right: auto;\n        border-left-width: 1px;\n        border-right-width: 1px;\n    }\n\n    .table-responsive {\n        margin-left: auto;\n        margin-right: auto;\n    }\n    .table-responsive table {\n        border-left-width: 1px;\n        border-right-width: 1px;\n    }\n\n}\n\n@media (max-width: 58em) {\n    /* Only apply this when the window is smaller. Otherwise, the following\n    case results in extra padding on the left:\n        * Make the window small. (Rotate to portrait on a mobile.)\n        * Tap the menu to trigger the active state.\n        * Make the window large again. (Rotate to landscape on mobile.)\n    */\n    #layout.active {\n        position: relative;\n        left: 160px;\n    }\n}\n\n@media (min-width: 58em) {\n\n    #layout {\n        padding-left: 160px; /* left col width \"#menu\" */\n        left: 0;\n    }\n    #menu {\n        left: 160px;\n    }\n    .menu-link {\n        position: fixed;\n        left: 160px;\n        display: none;\n    }\n    #layout.active .menu-link {\n        left: 160px;\n    }\n\n}\n"
  },
  {
    "path": "site/static/js/grids.js",
    "content": "(function (window, document) {\n\n    var unitsToggle     = document.querySelector('.grids-show-all'),\n        notReducedUnits = document.querySelectorAll('.grids-unit-not-reduced');\n\n    unitsToggle.onclick = function (e) {\n        [].slice.call(notReducedUnits).forEach(function (unit) {\n            if (e.target.checked) {\n                unit.removeAttribute('hidden');\n            } else {\n                unit.setAttribute('hidden');\n            }\n        });\n    };\n\n}(this, this.document));\n"
  },
  {
    "path": "site/static/js/menus.js",
    "content": "/* eslint no-unused-vars:0 no-prototype-builtins:0 */\n(function (window, document) {\n    'use strict';\n\n    // Enable drop-down menus in Pure\n    // Inspired by YUI3 gallery-simple-menu by Julien LeComte\n    // [https://github.com/yui/yui3-gallery/blob/master/src/gallery-simple-menu/js/simple-menu.js]\n\n    function PureDropdown(dropdownParent) {\n\n        var PREFIX = 'pure-',\n            ACTIVE_CLASS_NAME = PREFIX + 'menu-active',\n            ARIA_ROLE = 'role',\n            ARIA_HIDDEN = 'aria-hidden',\n            MENU_OPEN = 0,\n            MENU_CLOSED = 1,\n            MENU_ACTIVE_SELECTOR = '.pure-menu-active',\n            MENU_LINK_SELECTOR = '.pure-menu-link',\n            MENU_SELECTOR = '.pure-menu-children',\n            DISMISS_EVENT = (window.hasOwnProperty &&\n                window.hasOwnProperty('ontouchstart')) ?\n                'touchstart' : 'mousedown',\n\n            ARROW_KEYS_ENABLED = true,\n\n            ddm = this; // drop down menu\n\n        this._state = MENU_CLOSED;\n\n        this.show = function () {\n            if (this._state !== MENU_OPEN) {\n                this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);\n                this._menu.setAttribute(ARIA_HIDDEN, false);\n                this._state = MENU_OPEN;\n            }\n        };\n\n        this.hide = function () {\n            if (this._state !== MENU_CLOSED) {\n                this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);\n                this._menu.setAttribute(ARIA_HIDDEN, true);\n                this._link.focus();\n                this._state = MENU_CLOSED;\n            }\n        };\n\n        this.toggle = function () {\n            this[this._state === MENU_CLOSED ? 'show' : 'hide']();\n        };\n\n        this.halt = function (e) {\n            e.stopPropagation();\n            e.preventDefault();\n        };\n\n        this._dropdownParent = dropdownParent;\n        this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);\n        this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);\n        this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);\n\n        // Set ARIA attributes\n        this._link.setAttribute('aria-haspopup', 'true');\n        this._menu.setAttribute(ARIA_ROLE, 'menu');\n        this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));\n        this._menu.setAttribute('aria-hidden', 'true');\n        [].forEach.call(\n            this._menu.querySelectorAll('li'),\n            function(el){\n                el.setAttribute(ARIA_ROLE, 'presentation');\n            }\n        );\n        [].forEach.call(\n            this._menu.querySelectorAll('a'),\n            function(el){\n                el.setAttribute(ARIA_ROLE, 'menuitem');\n            }\n        );\n\n        // Toggle on click\n        this._link.addEventListener('click', function (e) {\n            e.stopPropagation();\n            e.preventDefault();\n            ddm.toggle();\n        });\n\n        // Keyboard navigation\n        document.addEventListener('keydown', function (e) {\n            var currentLink,\n                previousSibling,\n                nextSibling,\n                previousLink,\n                nextLink;\n\n            // if the menu isn't active, ignore\n            if (ddm._state !== MENU_OPEN) {\n                return;\n            }\n\n            // if the menu is the parent of an open, active submenu, ignore\n            if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {\n                return;\n            }\n\n            currentLink = ddm._menu.querySelector(':focus');\n\n            // Dismiss an open menu on ESC\n            if (e.keyCode === 27) {\n                /* Esc */\n                ddm.halt(e);\n                ddm.hide();\n            }\n            // Go to the next link on down arrow\n            else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {\n                /* Down arrow */\n                ddm.halt(e);\n                // get the nextSibling (an LI) of the current link's LI\n                nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;\n                // if the nextSibling is a text node (not an element), go to the next one\n                while (nextSibling && nextSibling.nodeType !== 1) {\n                    nextSibling = nextSibling.nextSibling;\n                }\n                nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;\n                // if there is no currently focused link, focus the first one\n                if (!currentLink) {\n                    ddm._menu.querySelector('.pure-menu-link').focus();\n                }\n                else if (nextLink) {\n                    nextLink.focus();\n                }\n            }\n            // Go to the previous link on up arrow\n            else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {\n                /* Up arrow */\n                ddm.halt(e);\n                // get the currently focused link\n                previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;\n                while (previousSibling && previousSibling.nodeType !== 1) {\n                    previousSibling = previousSibling.previousSibling;\n                }\n                previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;\n                // if there is no currently focused link, focus the last link\n                if (!currentLink) {\n                    ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();\n                }\n                // else if there is a previous item, go to the previous item\n                else if (previousLink) {\n                    previousLink.focus();\n                }\n            }\n        });\n\n        // Dismiss an open menu on outside event\n        document.addEventListener(DISMISS_EVENT, function (e) {\n            var target = e.target;\n            if (target !== ddm._link && !ddm._menu.contains(target)) {\n                ddm.hide();\n                ddm._link.blur();\n            }\n        });\n\n    }\n\n    function initDropdowns() {\n        var dropdownParents = document.querySelectorAll('.pure-menu-has-children');\n        for (var i = 0; i < dropdownParents.length; i++) {\n            var ddm = new PureDropdown(dropdownParents[i]);\n        }\n    }\n\n    initDropdowns();\n\n}(this, this.document));\n"
  },
  {
    "path": "site/static/js/track-downloads.js",
    "content": "(function (window, document) {\n\n    // Expose as `Pure.trackDownload()`\n    (window.Pure || (window.Pure = {})).trackDownload = trackDownload;\n\n    var HAS_DOWNLOAD_ATTR = 'download' in document.createElement('a');\n\n    function trackDownload(category, name) {\n        var ga   = window.ga,\n            link = this;\n\n        // Quit early if Google Analytics isn't on the page.\n        if (!ga) { return; }\n\n        // Fire off the GA ping to track the download event.\n        ga('send', 'event', category, 'download', name);\n\n        // If the browser does not support the HTML5 `download` attribute give\n        // the GA ping some time to complete before starting the download.\n        if (!HAS_DOWNLOAD_ATTR) {\n            setTimeout(function () {\n                window.location.href = link.href;\n            }, 100);\n\n            // Prevent default.\n            return false;\n        }\n    }\n\n}(this, this.document));\n"
  },
  {
    "path": "site/static/js/ui.js",
    "content": "(function (window, document) {\n\n    // we fetch the elements each time because docusaurus removes the previous\n    // element references on page navigation\n    function getElements() {\n        return {\n            layout: document.getElementById('layout'),\n            menu: document.getElementById('menu'),\n            menuLink: document.getElementById('menuLink')\n        };\n    }\n\n    function toggleClass(element, className) {\n        var classes = element.className.split(/\\s+/);\n        var length = classes.length;\n        var i = 0;\n\n        for (; i < length; i++) {\n            if (classes[i] === className) {\n                classes.splice(i, 1);\n                break;\n            }\n        }\n        // The className is not found\n        if (length === classes.length) {\n            classes.push(className);\n        }\n\n        element.className = classes.join(' ');\n    }\n\n    function toggleAll() {\n        var active = 'active';\n        var elements = getElements();\n\n        toggleClass(elements.layout, active);\n        toggleClass(elements.menu, active);\n        toggleClass(elements.menuLink, active);\n    }\n    \n    function handleEvent(e) {\n        var elements = getElements();\n        \n        if (e.target.id === elements.menuLink.id) {\n            toggleAll();\n            e.preventDefault();\n        } else if (elements.menu.className.indexOf('active') !== -1) {\n            toggleAll();\n        }\n    }\n    \n    document.addEventListener('click', handleEvent);\n\n}(this, this.document));\n"
  },
  {
    "path": "site/static/layouts/blog/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"A layout example that shows off a blog page with a list of posts.\">\n    <title>Blog &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\">\n    <link rel=\"stylesheet\" href=\"/css/pure/grids-responsive-min.css\">\n    <link rel=\"stylesheet\" href=\"/layouts/blog/styles.css\">\n</head>\n<body>\n\n<div id=\"layout\" class=\"pure-g\">\n    <div class=\"sidebar pure-u-1 pure-u-md-1-4\">\n        <div class=\"header\">\n            <h1 class=\"brand-title\">A Sample Blog</h1>\n            <h2 class=\"brand-tagline\">Creating a blog layout using Pure</h2>\n\n            <nav class=\"nav\">\n                <ul class=\"nav-list\">\n                    <li class=\"nav-item\">\n                        <a class=\"pure-button\" href=\"http://purecss.io\">Pure</a>\n                    </li>\n                </ul>\n            </nav>\n        </div>\n    </div>\n\n    <div class=\"content pure-u-1 pure-u-md-3-4\">\n        <div>\n            <!-- A wrapper for all the blog posts -->\n            <div class=\"posts\">\n                <h1 class=\"content-subhead\">Pinned Post</h1>\n\n                <!-- A single blog post -->\n                <section class=\"post\">\n                    <header class=\"post-header\">\n                        <img width=\"48\" height=\"48\" alt=\"Tilo Mitra&#x27;s avatar\" class=\"post-avatar\" src=\"/img/common/tilo-avatar.png\">\n\n                        <h2 class=\"post-title\">Welcome to Pure</h2>\n\n                        <p class=\"post-meta\">\n                            By <a href=\"#\" class=\"post-author\">Tilo Mitra</a> under <a class=\"post-category post-category-design\" href=\"#\">CSS</a> <a class=\"post-category post-category-pure\" href=\"#\">Pure</a>\n                        </p>\n                    </header>\n\n                    <div class=\"post-description\">\n                        <p>\n                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n                        </p>\n                    </div>\n                </section>\n            </div>\n\n            <div class=\"posts\">\n                <h1 class=\"content-subhead\">Recent Posts</h1>\n\n                <section class=\"post\">\n                    <header class=\"post-header\">\n                        <img width=\"48\" height=\"48\" alt=\"Eric Ferraiuolo&#x27;s avatar\" class=\"post-avatar\" src=\"/img/common/ericf-avatar.png\">\n\n                        <h2 class=\"post-title\">Everything You Need to Know About Node.js</h2>\n\n                        <p class=\"post-meta\">\n                            By <a class=\"post-author\" href=\"#\">Eric Ferraiuolo</a> under <a class=\"post-category post-category-js\" href=\"#\">JavaScript</a>\n                        </p>\n                    </header>\n\n                    <div class=\"post-description\">\n                        <p>\n                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n                        </p>\n                    </div>\n                </section>\n\n                <section class=\"post\">\n                    <header class=\"post-header\">\n                        <img width=\"48\" height=\"48\" alt=\"Reid Burke&#x27;s avatar\" class=\"post-avatar\" src=\"/img/common/reid-avatar.png\">\n\n                        <h2 class=\"post-title\">Photos from CSSConf and JSConf</h2>\n\n                        <p class=\"post-meta\">\n                            By <a class=\"post-author\" href=\"#\">Reid Burke</a> under <a class=\"post-category\" href=\"#\">Uncategorized</a>\n                        </p>\n                    </header>\n\n                    <div class=\"post-description\">\n                        <div class=\"post-images pure-g\">\n                            <div class=\"pure-u-1 pure-u-md-1-2\">\n                                <a href=\"http://www.flickr.com/photos/uberlife/8915936174/\">\n                                    <img alt=\"Photo of someone working poolside at a resort\"\n                                         class=\"pure-img-responsive\"\n                                         src=\"http://farm8.staticflickr.com/7448/8915936174_8d54ec76c6.jpg\">\n                                </a>\n\n                                <div class=\"post-image-meta\">\n                                    <h3>CSSConf Photos</h3>\n                                </div>\n                            </div>\n\n                            <div class=\"pure-u-1 pure-u-md-1-2\">\n                                <a href=\"http://www.flickr.com/photos/uberlife/8907351301/\">\n                                    <img alt=\"Photo of the sunset on the beach\"\n                                         class=\"pure-img-responsive\"\n                                         src=\"http://farm8.staticflickr.com/7382/8907351301_bd7460cffb.jpg\">\n                                </a>\n\n                                <div class=\"post-image-meta\">\n                                    <h3>JSConf Photos</h3>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </section>\n            </div>\n\n            <div class=\"footer\">\n                <div class=\"pure-menu pure-menu-horizontal\">\n                    <ul>\n                        <li class=\"pure-menu-item\"><a href=\"http://purecss.io/\" class=\"pure-menu-link\">About</a></li>\n                        <li class=\"pure-menu-item\"><a href=\"http://github.com/pure-css/pure/\" class=\"pure-menu-link\">GitHub</a></li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n</body>\n</html>\n"
  },
  {
    "path": "site/static/layouts/blog/styles.css",
    "content": "* {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\na {\n    text-decoration: none;\n    color: rgb(61, 146, 201);\n}\na:hover,\na:focus {\n    text-decoration: underline;\n}\n\nh3 {\n    font-weight: 100;\n}\n\n/* LAYOUT CSS */\n.pure-img-responsive {\n    max-width: 100%;\n    height: auto;\n}\n\n#layout {\n    padding: 0;\n}\n\n.header {\n    text-align: center;\n    top: auto;\n    margin: 3em auto;\n}\n\n.sidebar {\n    background: rgb(61, 79, 93);\n    color: #fff;\n}\n\n.brand-title,\n.brand-tagline {\n    margin: 0;\n}\n.brand-title {\n    text-transform: uppercase;\n}\n.brand-tagline {\n    font-weight: 300;\n    color: rgb(176, 202, 219);\n}\n\n.nav-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.nav-item {\n    display: inline-block;\n    *display: inline;\n    zoom: 1;\n}\n.nav-item a {\n    background: transparent;\n    border: 2px solid rgb(176, 202, 219);\n    color: #fff;\n    margin-top: 1em;\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n    font-size: 85%;\n}\n.nav-item a:hover,\n.nav-item a:focus {\n    border: 2px solid rgb(61, 146, 201);\n    text-decoration: none;\n}\n\n.content-subhead {\n    text-transform: uppercase;\n    color: #aaa;\n    border-bottom: 1px solid #eee;\n    padding: 0.4em 0;\n    font-size: 80%;\n    font-weight: 500;\n    letter-spacing: 0.1em;\n}\n\n.content {\n    padding: 2em 1em 0;\n}\n\n.post {\n    padding-bottom: 2em;\n}\n.post-title {\n    font-size: 2em;\n    color: #222;\n    margin-bottom: 0.2em;\n}\n.post-avatar {\n    border-radius: 50px;\n    float: right;\n    margin-left: 1em;\n}\n.post-description {\n    font-family: Georgia, \"Cambria\", serif;\n    color: #444;\n    line-height: 1.8em;\n}\n.post-meta {\n    color: #999;\n    font-size: 90%;\n    margin: 0;\n}\n\n.post-category {\n    margin: 0 0.1em;\n    padding: 0.3em 1em;\n    color: #fff;\n    background: #999;\n    font-size: 80%;\n}\n    .post-category-design {\n        background: #5aba59;\n    }\n    .post-category-pure {\n        background: #4d85d1;\n    }\n    .post-category-yui {\n        background: #8156a7;\n    }\n    .post-category-js {\n        background: #df2d4f;\n    }\n\n.post-images {\n    margin: 1em 0;\n}\n.post-image-meta {\n    margin-top: -3.5em;\n    margin-left: 1em;\n    color: #fff;\n    text-shadow: 0 1px 1px #333;\n}\n\n.footer {\n    padding: 1em 0;\n}\n.footer a {\n    color: #ccc;\n    font-size: 80%;\n}\n.footer .pure-menu a:hover,\n.footer .pure-menu a:focus {\n    background: none;\n}\n\n@media (min-width: 48em) {\n    .content {\n        padding: 2em 3em 0;\n        margin-left: 25%;\n    }\n\n    .header {\n        margin: 80% 2em 0;\n        text-align: right;\n    }\n\n    .sidebar {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n    }\n\n    .footer {\n        text-align: center;\n    }\n}\n"
  },
  {
    "path": "site/static/layouts/email/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"A layout example that shows off a responsive email layout.\">\n    <title>Email &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\">\n    <link rel=\"stylesheet\" href=\"/layouts/email/styles.css\">\n</head>\n<body>\n\n<div id=\"layout\" class=\"content pure-g\">\n    <div id=\"nav\" class=\"pure-u\">\n        <a href=\"#\" id=\"menuLink\" class=\"nav-menu-button\">Menu</a>\n\n        <div class=\"nav-inner\">\n            <button class=\"primary-button pure-button\">Compose</button>\n\n            <div class=\"pure-menu\">\n                <ul class=\"pure-menu-list\">\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Inbox <span class=\"email-count\">(2)</span></a></li>\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Important</a></li>\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Sent</a></li>\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Drafts</a></li>\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Trash</a></li>\n                    <li class=\"pure-menu-heading\">Labels</li>\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\"><span class=\"email-label-personal\"></span>Personal</a></li>\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\"><span class=\"email-label-work\"></span>Work</a></li>\n                    <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\"><span class=\"email-label-travel\"></span>Travel</a></li>\n                </ul>\n            </div>\n        </div>\n    </div>\n\n    <div id=\"list\" class=\"pure-u-1\">\n        <div class=\"email-item email-item-selected pure-g\">\n            <div class=\"pure-u\">\n                <img width=\"64\" height=\"64\" alt=\"Tilo Mitra&#x27;s avatar\" class=\"email-avatar\" src=\"/img/common/tilo-avatar.png\">\n            </div>\n\n            <div class=\"pure-u-3-4\">\n                <h5 class=\"email-name\">Tilo Mitra</h5>\n                <h4 class=\"email-subject\">Hello from Toronto</h4>\n                <p class=\"email-desc\">\n                    Hey, I just wanted to check in with you from Toronto. I got here earlier today.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"email-item email-item-unread pure-g\">\n            <div class=\"pure-u\">\n                <img width=\"64\" height=\"64\" alt=\"Eric Ferraiuolo&#x27;s avatar\" class=\"email-avatar\" src=\"/img/common/ericf-avatar.png\">\n            </div>\n\n            <div class=\"pure-u-3-4\">\n                <h5 class=\"email-name\">Eric Ferraiuolo</h5>\n                <h4 class=\"email-subject\">Re: Pull Requests</h4>\n                <p class=\"email-desc\">\n                    Hey, I had some feedback for pull request #51. We should center the menu so it looks better on mobile.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"email-item pure-g\">\n            <div class=\"pure-u\">\n                <img width=\"64\" height=\"64\" alt=\"Reid Burke&#x27;s avatar\" class=\"email-avatar\" src=\"/img/common/reid-avatar.png\">\n            </div>\n\n            <div class=\"pure-u-3-4\">\n                <h5 class=\"email-name\">Reid Burke</h5>\n                <h4 class=\"email-subject\">Re: Design Language</h4>\n                <p class=\"email-desc\">\n                    Excepteur sint occaecat cupidatat non proident, sunt in culpa.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"email-item pure-g\">\n            <div class=\"pure-u\">\n                <img width=\"64\" height=\"64\" alt=\"Yahoo! Finance&#x27;s Avatar\" class=\"email-avatar\" src=\"/img/common/yfinance-avatar.png\">\n            </div>\n\n            <div class=\"pure-u-3-4\">\n                <h5 class=\"email-name\">Yahoo! Finance</h5>\n                <h4 class=\"email-subject\">How to protect your finances from winter storms</h4>\n                <p class=\"email-desc\">\n                    Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"email-item pure-g\">\n            <div class=\"pure-u\">\n                <img width=\"64\" height=\"64\" alt=\"Yahoo! News&#x27; avatar\" class=\"email-avatar\" src=\"/img/common/ynews-avatar.png\">\n            </div>\n\n            <div class=\"pure-u-3-4\">\n                <h5 class=\"email-name\">Yahoo! News</h5>\n                <h4 class=\"email-subject\">Summary for April 3rd, 2021</h4>\n                <p class=\"email-desc\">\n                    We found 10 news articles that you may like.\n                </p>\n            </div>\n        </div>\n    </div>\n\n    <div id=\"main\" class=\"pure-u-1\">\n        <div class=\"email-content\">\n            <div class=\"email-content-header pure-g\">\n                <div class=\"pure-u-1-2\">\n                    <h1 class=\"email-content-title\">Hello from Toronto</h1>\n                    <p class=\"email-content-subtitle\">\n                        From <a>Tilo Mitra</a> at <span>3:56pm, April 3, 2021</span>\n                    </p>\n                </div>\n\n                <div class=\"email-content-controls pure-u-1-2\">\n                    <button class=\"secondary-button pure-button\">Reply</button>\n                    <button class=\"secondary-button pure-button\">Forward</button>\n                    <button class=\"secondary-button pure-button\">Move to</button>\n                </div>\n            </div>\n\n            <div class=\"email-content-body\">\n                <p>\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                </p>\n                <p>\n                    Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                </p>\n                <p>\n                    Aliquam ac feugiat dolor. Proin mattis massa sit amet enim iaculis tincidunt. Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris. Curabitur ornare arcu quis mi blandit laoreet. Vivamus imperdiet fermentum mauris, ac posuere urna tempor at. Duis pellentesque justo ac sapien aliquet egestas. Morbi enim mi, porta eget ullamcorper at, pharetra id lorem.\n                </p>\n                <p>\n                    Donec sagittis dolor ut quam pharetra pretium varius in nibh. Suspendisse potenti. Donec imperdiet, velit vel adipiscing bibendum, leo eros tristique augue, eu rutrum lacus sapien vel quam. Nam orci arcu, luctus quis vestibulum ut, ullamcorper ut enim. Morbi semper erat quis orci aliquet condimentum. Nam interdum mauris sed massa dignissim rhoncus.\n                </p>\n                <p>\n                    Regards,<br>\n                    Tilo\n                </p>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- Script to make the Menu link work -->\n<!-- Just stripped down version of the js/ui.js script for the side-menu layout -->\n<script>\n    function getElements() {\n        return {\n            menu: document.getElementById('nav'),\n            menuLink: document.getElementById('menuLink')\n        };\n    }\n\n    function toggleClass(element, className) {\n        var classes = element.className.split(/\\s+/);\n        var length = classes.length;\n        var i = 0;\n\n        for (; i < length; i++) {\n            if (classes[i] === className) {\n                classes.splice(i, 1);\n                break;\n            }\n        }\n        // The className is not found\n        if (length === classes.length) {\n            classes.push(className);\n        }\n\n        element.className = classes.join(' ');\n    }\n\n    function toggleMenu() {\n        var active = 'active';\n        var elements = getElements();\n\n        toggleClass(elements.menu, active);\n    }\n\n    function handleEvent(e) {\n        var elements = getElements();\n\n        if (e.target.id === elements.menuLink.id) {\n            toggleMenu();\n            e.preventDefault();\n        } else if (elements.menu.className.indexOf('active') !== -1) {\n            toggleMenu();\n        }\n    }\n\n    document.addEventListener('DOMContentLoaded', function () {\n        document.addEventListener('click', handleEvent);\n    });\n</script>\n</body>\n</html>\n"
  },
  {
    "path": "site/static/layouts/email/styles.css",
    "content": "/*\n * -- BASE STYLES --\n * Most of these are inherited from Base, but I want to change a few.\n */\nbody {\n    color: #333;\n}\n\n\n\na {\n    text-decoration: none;\n    color: #1b98f8;\n}\n\n\n/*\n * -- HELPER STYLES --\n * Over-riding some of the .pure-button styles to make my buttons look unique\n */\n.primary-button,\n.secondary-button {\n    -webkit-box-shadow: none;\n    -moz-box-shadow: none;\n    box-shadow: none;\n    border-radius: 20px;\n}\n.primary-button {\n    color: #fff;\n    background: #1b98f8;\n    margin: 1em 0;\n}\n.secondary-button {\n    background: #fff;\n    border: 1px solid #ddd;\n    color: #666;\n    padding: 0.5em 2em;\n    font-size: 80%;\n}\n\n/*\n * -- LAYOUT STYLES --\n * This layout consists of three main elements, `#nav` (navigation bar), `#list` (email list), and `#main` (email content). All 3 elements are within `#layout`\n */\n#layout, #nav, #list, #main {\n    margin: 0;\n    padding: 0;\n}\n\n/* Make the navigation 100% width on phones */\n#nav {\n    width: 100%;\n    height: 40px;\n    position: relative;\n    background: rgb(37, 42, 58);\n    text-align: center;\n}\n/* Show the \"Menu\" button on phones */\n#nav .nav-menu-button {\n    display: block;\n    top: 0.5em;\n    right: 0.5em;\n    position: absolute;\n}\n\n/* When \"Menu\" is clicked, the navbar should be 80% height */\n#nav.active {\n    height: 80%;\n}\n/* Don't show the navigation items... */\n.nav-inner {\n    display: none;\n}\n\n/* ...until the \"Menu\" button is clicked */\n#nav.active .nav-inner {\n    display: block;\n    padding: 2em 0;\n}\n\n\n/*\n * -- NAV BAR STYLES --\n * Styling the default .pure-menu to look a little more unique.\n */\n#nav .pure-menu {\n    background: transparent;\n    border: none;\n    text-align: left;\n}\n    #nav .pure-menu-link:hover,\n    #nav .pure-menu-link:focus {\n        background: rgb(55, 60, 90);\n    }\n    #nav .pure-menu-link {\n        color: #fff;\n        margin-left: 0.5em;\n    }\n    #nav .pure-menu-heading {\n        border-bottom: none;\n        font-size:110%;\n        color: rgb(75, 113, 151);\n    }\n\n\n/*\n * -- EMAIL STYLES --\n * Styles relevant to the email messages, labels, counts, and more.\n */\n.email-count {\n    color: rgb(75, 113, 151);\n}\n\n.email-label-personal,\n.email-label-work,\n.email-label-travel {\n    width: 15px;\n    height: 15px;\n    display: inline-block;\n    margin-right: 0.5em;\n    border-radius: 3px;\n}\n.email-label-personal {\n    background: #ffc94c;\n}\n.email-label-work {\n    background: #41ccb4;\n}\n.email-label-travel {\n    background: #40c365;\n}\n\n\n/* Email Item Styles */\n.email-item {\n    padding: 0.9em 1em;\n    border-bottom: 1px solid #ddd;\n    border-left: 6px solid transparent;\n}\n    .email-avatar {\n        border-radius: 3px;\n        margin-right: 0.5em;\n    }\n    .email-name,\n    .email-subject {\n        margin: 0;\n    }\n    .email-name {\n        text-transform: uppercase;\n        color: #999;\n    }\n    .email-desc {\n        font-size: 80%;\n        margin: 0.4em 0;\n    }\n\n.email-item-selected {\n    background: #eee;\n}\n.email-item-unread {\n    border-left: 6px solid #1b98f8;\n}\n\n/* Email Content Styles */\n.email-content-header, .email-content-body, .email-content-footer {\n    padding: 1em 2em;\n}\n    .email-content-header {\n        border-bottom: 1px solid #ddd;\n    }\n\n        .email-content-title {\n            margin: 0.5em 0 0;\n        }\n        .email-content-subtitle {\n            font-size: 1em;\n            margin: 0;\n            font-weight: normal;\n        }\n            .email-content-subtitle span {\n                color: #999;\n            }\n    .email-content-controls {\n        margin-top: 2em;\n        text-align: right;\n    }\n        .email-content-controls .secondary-button {\n            margin-bottom: 0.3em;\n        }\n\n    .email-avatar {\n        width: 40px;\n        height: 40px;\n    }\n\n\n/*\n * -- TABLET (AND UP) MEDIA QUERIES --\n * On tablets and other medium-sized devices, we want to customize some\n * of the mobile styles.\n */\n@media (min-width: 40em) {\n\n    /* Move the layout over so we can fit the nav + list in on the left */\n    #layout {\n        padding-left:500px; /* \"left col (nav + list)\" width */\n        position: relative;\n    }\n\n    /* These are position:fixed; elements that will be in the left 500px of the screen */\n    #nav, #list {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        overflow: auto;\n    }\n    #nav {\n        margin-left:-500px; /* \"left col (nav + list)\" width */\n        width:150px;\n        height: 100%;\n    }\n\n    /* Show the menu items on the larger screen */\n    .nav-inner {\n        display: block;\n        padding: 2em 0;\n    }\n\n    /* Hide the \"Menu\" button on larger screens */\n    #nav .nav-menu-button {\n        display: none;\n    }\n\n    #list {\n        margin-left: -350px;\n        width: 100%;\n        height: 33%;\n        border-bottom: 1px solid #ddd;\n    }\n\n    #main {\n        position: fixed;\n        top: 33%;\n        right: 0;\n        bottom: 0;\n        left: 150px;\n        overflow: auto;\n        width: auto; /* so that it's not 100% */\n    }\n\n}\n\n/*\n * -- DESKTOP (AND UP) MEDIA QUERIES --\n * On desktops and other large-sized devices, we want to customize some\n * of the mobile styles.\n */\n@media (min-width: 60em) {\n\n    /* This will take up the entire height, and be a little thinner */\n    #list {\n        margin-left: -350px;\n        width:350px;\n        height: 100%;\n        border-right: 1px solid #ddd;\n    }\n\n    /* This will now take up it's own column, so don't need position: fixed; */\n    #main {\n        position: static;\n        margin: 0;\n        padding: 0;\n    }\n}\n"
  },
  {
    "path": "site/static/layouts/gallery/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta\n      name=\"description\"\n      content=\"A layout example that shows off a responsive photo gallery.\"\n    />\n    <title>Photo Gallery &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\" />\n    <link rel=\"stylesheet\" href=\"/css/pure/grids-responsive-min.css\" />\n    <link rel=\"stylesheet\" href=\"/layouts/gallery/styles.css\" />\n  </head>\n  <body>\n    <div>\n      <div class=\"header\">\n        <div class=\"pure-menu pure-menu-horizontal\">\n          <a class=\"pure-menu-heading\" href=\"\">Photo Gallery</a>\n\n          <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item pure-menu-selected\">\n              <a href=\"#\" class=\"pure-menu-link\">Home</a>\n            </li>\n            <li class=\"pure-menu-item\">\n              <a href=\"#\" class=\"pure-menu-link\">Blog</a>\n            </li>\n            <li class=\"pure-menu-item\">\n              <a href=\"#\" class=\"pure-menu-link\">About</a>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"pure-g\">\n        <div class=\"photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3\">\n          <a href=\"http://www.dillonmcintosh.tumblr.com/\">\n            <img\n              src=\"https://24.media.tumblr.com/d6b9403c704c3e5aa1725c106e8a9430/tumblr_mvyxd9PUpZ1st5lhmo1_1280.jpg\"\n              alt=\"Beach\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span\n              >by\n              <a href=\"http://www.dillonmcintosh.tumblr.com/\"\n                >Dillon McIntosh</a\n              ></span\n            >\n          </aside>\n        </div>\n\n        <div class=\"text-box pure-u-1 pure-u-md-1-2 pure-u-lg-2-3\">\n          <div class=\"l-box\">\n            <h1 class=\"text-box-head\">Photos from around the world</h1>\n            <p class=\"text-box-subhead\">\n              A collection of beautiful photos gathered from Unsplash.com.\n            </p>\n          </div>\n        </div>\n\n        <div class=\"photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3\">\n          <a\n            href=\"https://www.flickr.com/photos/leshaines123/9199788659/in/photolist-f1XjDR-oqUsF4-eGN3fd-uLvGyn-nsUXqP-6tKPeq-h2Bwtz-6oVtec-3vzcD-nhKUBn-eGN7RY-atDkE4-6qpKgh-5qhbkM-eXSJSR-8YGjfD-eXSK7n-c3hvqo-ddvqc2-h1FgsH-4W6bip-dcnDYJ-ejny6W-bEnete-qoSUSt-nyApt1-cs1Paf-oanrNv-dmE5c9-c4Sgiq-nLYPa4-eHQbYp-fn8csk-uq4gKy-fp186j-7ZcaSx-6wMKEA-kERNCe-veHJHy-eGNaj5-4VddEM-rXUqrU-9X8YXf-87nMXX-tKCh7h-u88G4h-nHuLus-9WPUyn-8fjvkU-nKyT33\"\n          >\n            <img\n              src=\"https://c2.staticflickr.com/6/5515/9199788659_818383d0b8_k.jpg\"\n              alt=\"Meadow\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span>\n              by\n              <a\n                href=\"https://www.flickr.com/photos/leshaines123/9199788659/in/photolist-f1XjDR-oqUsF4-eGN3fd-uLvGyn-nsUXqP-6tKPeq-h2Bwtz-6oVtec-3vzcD-nhKUBn-eGN7RY-atDkE4-6qpKgh-5qhbkM-eXSJSR-8YGjfD-eXSK7n-c3hvqo-ddvqc2-h1FgsH-4W6bip-dcnDYJ-ejny6W-bEnete-qoSUSt-nyApt1-cs1Paf-oanrNv-dmE5c9-c4Sgiq-nLYPa4-eHQbYp-fn8csk-uq4gKy-fp186j-7ZcaSx-6wMKEA-kERNCe-veHJHy-eGNaj5-4VddEM-rXUqrU-9X8YXf-87nMXX-tKCh7h-u88G4h-nHuLus-9WPUyn-8fjvkU-nKyT33\"\n                >Les Haines</a\n              >\n            </span>\n          </aside>\n        </div>\n\n        <div class=\"photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3\">\n          <a href=\"http://www.nilssonlee.se/\">\n            <img\n              src=\"https://24.media.tumblr.com/23e3f4bb271b8bdc415275fb7061f204/tumblr_mve3rvxwaP1st5lhmo1_1280.jpg\"\n              alt=\"City\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span>\n              by <a href=\"http://www.nilssonlee.se/\">Jonas Nilsson Lee</a>\n            </span>\n          </aside>\n        </div>\n\n        <div class=\"photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3\">\n          <a href=\"http://www.flickr.com/photos/rulasibai/\">\n            <img\n              src=\"https://24.media.tumblr.com/ac840897b5f73fa6bc43f73996f02572/tumblr_mrraat0H431st5lhmo1_1280.jpg\"\n              alt=\"Flowers\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span>\n              by\n              <a href=\"http://www.flickr.com/photos/rulasibai/\">Rula Sibai</a>\n            </span>\n          </aside>\n        </div>\n\n        <div class=\"photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3\">\n          <a href=\"http://www.flickr.com/photos/charliefoster/\">\n            <img\n              src=\"https://24.media.tumblr.com/e100564a3e73c9456acddb9f62f96c79/tumblr_mufs8mix841st5lhmo1_1280.jpg\"\n              alt=\"Bridge\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span>\n              by\n              <a href=\"http://www.flickr.com/photos/charliefoster/\"\n                >Charlie Foster</a\n              >\n            </span>\n          </aside>\n        </div>\n\n        <div class=\"photo-box photo-box-thin pure-u-1 pure-u-lg-2-3\">\n          <a\n            href=\"https://www.flickr.com/photos/82955120@N05/12024271573/in/photolist-jjxx28-f2vns5-jjw3rg-phetyV-djcGV4-7TBwup-7DxDnn-d4c1eC-aYoN8H-dBd8UG-ayQR7Z-8yhyLk-4nTgvd-dGtHuM-6WHtpP-9Dz8tA-gtnVfQ-rkCwz9-aYCE1B-hnK3Xs-axv6P4-pFPBdL-9vFwzg-afJk9N-dd3EJJ-oF1Nc2-aYoMCx-xojot-4Ypyo9-6BxaC2-6ybPn5-HSvt5-asaoZL-dd3CtM-9RJXk3-HSuZp-fe9yXi-7irigF-pgqPwH-9QQ2SU-dd3C2T-ccB6t5-fhtH3c-odGZC3-a4ppMF-ohvnyp-uiUswa-uYhWFR-6Cb4M6-5GoD9y\"\n          >\n            <img\n              src=\"https://c2.staticflickr.com/4/3676/12024271573_d266422362_h.jpg\"\n              alt=\"Balloons\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span>\n              by\n              <a\n                href=\"https://www.flickr.com/photos/82955120@N05/12024271573/in/photolist-jjxx28-f2vns5-jjw3rg-phetyV-djcGV4-7TBwup-7DxDnn-d4c1eC-aYoN8H-dBd8UG-ayQR7Z-8yhyLk-4nTgvd-dGtHuM-6WHtpP-9Dz8tA-gtnVfQ-rkCwz9-aYCE1B-hnK3Xs-axv6P4-pFPBdL-9vFwzg-afJk9N-dd3EJJ-oF1Nc2-aYoMCx-xojot-4Ypyo9-6BxaC2-6ybPn5-HSvt5-asaoZL-dd3CtM-9RJXk3-HSuZp-fe9yXi-7irigF-pgqPwH-9QQ2SU-dd3C2T-ccB6t5-fhtH3c-odGZC3-a4ppMF-ohvnyp-uiUswa-uYhWFR-6Cb4M6-5GoD9y\"\n                >Nicolas Raymond</a\n              >\n            </span>\n          </aside>\n        </div>\n\n        <div class=\"photo-box photo-box-thin pure-u-1 pure-u-md-2-3\">\n          <a href=\"http://twitter.com/iBoZR\">\n            <img\n              src=\"https://25.media.tumblr.com/95c842c76d60b7bc982d92c76216d037/tumblr_mx3tnm96k81st5lhmo1_1280.jpg\"\n              alt=\"Rain Drops\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span>\n              by <a href=\"http://twitter.com/iBoZR\">Thanun Buranapong</a>\n            </span>\n          </aside>\n        </div>\n\n        <div class=\"photo-box pure-u-1 pure-u-md-1-3\">\n          <a href=\"http://www.goodfreephotos.com/\">\n            <img\n              src=\"https://25.media.tumblr.com/88b812f5f9c3d7b83560fd635435d538/tumblr_mx3tlblmY21st5lhmo1_1280.jpg\"\n              alt=\"Port\"\n            />\n          </a>\n\n          <aside class=\"photo-box-caption\">\n            <span>\n              by <a href=\"http://www.goodfreephotos.com/\">Yinan Chen</a>\n            </span>\n          </aside>\n        </div>\n\n        <div class=\"pure-u-1 form-box\">\n          <div class=\"l-box\">\n            <h2>Submit a Photo</h2>\n\n            <form class=\"pure-form\">\n              <input type=\"text\" placeholder=\"Photo URL\" required />\n              <input type=\"text\" placeholder=\"Email\" />\n              <button type=\"submit\" class=\"pure-button\">Submit</button>\n            </form>\n          </div>\n        </div>\n\n        <div class=\"pure-u-1\">\n          <div class=\"l-box\">\n            <h2>Creating a Photo Gallery Layout</h2>\n\n            <p>\n              This page shows how to make a photo gallery using\n              <a href=\"/grids/\">Pure Grids</a>. Using Pure, we can create\n              interesting layouts such as this photo gallery. This layout is\n              fully responsive. We've added a bit of custom media queries on top\n              of the responsive grid provided by Pure.\n            </p>\n\n            <p>\n              We've also taken advantage of <a href=\"/forms/\">Pure Forms</a> and\n              <a href=\"/menus/\">Pure Menus</a>. This example uses a form with\n              the <code>pure-form</code> class name to create an inline form. We\n              use <a href=\"/buttons/\">Pure Buttons</a> for the button styling.\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"footer\">\n        View the source of this layout to learn more. Made with love by the Pure\n        Team.\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "site/static/layouts/gallery/styles.css",
    "content": "body {\n    color: #666;\n}\n\nh1,h2,h3,h4,h5,h6 {\n    color: #111;\n}\n\n.l-box {\n    padding: 2em;\n}\n\n.header .pure-menu {\n    border-bottom-color: black;\n    border-radius: 0;\n}\n\n.pure-menu-link {\n    padding: 1em .7em;\n}\n\n.photo-box, .text-box {\n    overflow: hidden;\n    position: relative;\n    height: 250px;\n    text-align: center;\n}\n\n.photo-box-thin {\n    height: 120px;\n}\n\n\n    .photo-box img {\n        max-width: 100%;\n        height: auto;\n        min-height: 250px;\n    }\n\n    .photo-box aside {\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        padding: 1em 0.5em;\n        color: white;\n        width: 100%;\n        font-size: 80%;\n        text-align: right;\n        background: linear-gradient(to bottom,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%);\n        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */\n\n    }\n\n    .photo-box aside span {\n        color: #aaa;\n    }\n\n        .photo-box aside span a {\n            color: #ccc;\n            text-decoration: none;\n        }\n\n.text-box {\n    background: rgb(49, 49, 49); /* bluish grey */\n    color: rgb(255, 190, 94); /* steel blue */\n}\n\n    .text-box-head {\n        color: #fff;\n        padding-bottom: 0.2em;\n        font-weight: 400;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        font-size: 24px;\n    }\n\n    .text-box-subhead {\n        font-weight: normal;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n    }\n\n.form-box {\n    text-align: center;\n    font-size: 120%;\n    border-bottom: 1px solid #eee;\n}\n\n    .form-box .pure-button {\n        background-color: #61B842;\n        color: white;\n        vertical-align: top;\n        font-size: 85%;\n        font-weight: 400;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        border-radius: 4px;\n        margin: 0.3em;\n    }\n    .pure-form input[type] {\n        margin: 0.3em auto;\n        text-align: center;\n    }\n\n.footer {\n    background: #111;\n    color: #666;\n    text-align: center;\n    padding: 1em;\n    font-size: 80%;\n}\n\n@media (min-width: 30em) {\n    .photo-box, .text-box {\n        text-align: left;\n    }\n\n    .photo-box-thin {\n        height: 250px;\n    }\n}\n"
  },
  {
    "path": "site/static/layouts/marketing/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"A layout example that shows off a responsive product landing page.\">\n    <title>Landing Page &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\">\n    <link rel=\"stylesheet\" href=\"/css/pure/grids-responsive-min.css\">\n    <link rel=\"stylesheet\" href=\"https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css\">\n    <link rel=\"stylesheet\" href=\"/layouts/marketing/styles.css\">\n</head>\n<body>\n\n<div class=\"header\">\n    <div class=\"home-menu pure-menu pure-menu-horizontal pure-menu-fixed\">\n        <a class=\"pure-menu-heading\" href=\"\">Your Site</a>\n\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item pure-menu-selected\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Tour</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Sign Up</a></li>\n        </ul>\n    </div>\n</div>\n\n<div class=\"splash-container\">\n    <div class=\"splash\">\n        <h1 class=\"splash-head\">Big Bold Text</h1>\n        <p class=\"splash-subhead\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n        </p>\n        <p>\n            <a href=\"http://purecss.io\" class=\"pure-button pure-button-primary\">Get Started</a>\n        </p>\n    </div>\n</div>\n\n<div class=\"content-wrapper\">\n    <div class=\"content\">\n        <h2 class=\"content-head is-center\">Excepteur sint occaecat cupidatat.</h2>\n\n        <div class=\"pure-g\">\n            <div class=\"l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n\n                <h3 class=\"content-subhead\">\n                    <i class=\"fa fa-rocket\"></i>\n                    Get Started Quickly\n                </h3>\n                <p>\n                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.\n                </p>\n            </div>\n            <div class=\"l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                <h3 class=\"content-subhead\">\n                    <i class=\"fa fa-mobile\"></i>\n                    Responsive Layouts\n                </h3>\n                <p>\n                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.\n                </p>\n            </div>\n            <div class=\"l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                <h3 class=\"content-subhead\">\n                    <i class=\"fa fa-th-large\"></i>\n                    Modular\n                </h3>\n                <p>\n                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.\n                </p>\n            </div>\n            <div class=\"l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4\">\n                <h3 class=\"content-subhead\">\n                    <i class=\"fa fa-check-square-o\"></i>\n                    Plays Nice\n                </h3>\n                <p>\n                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.\n                </p>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"ribbon l-box-lrg pure-g\">\n        <div class=\"l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5\">\n            <img width=\"300\" alt=\"File Icons\" class=\"pure-img-responsive\" src=\"/img/common/file-icons.png\">\n        </div>\n        <div class=\"pure-u-1 pure-u-md-1-2 pure-u-lg-3-5\">\n\n            <h2 class=\"content-head content-head-ribbon\">Laboris nisi ut aliquip.</h2>\n\n            <p>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                consequat. Duis aute irure dolor.\n            </p>\n        </div>\n    </div>\n\n    <div class=\"content\">\n        <h2 class=\"content-head is-center\">Dolore magna aliqua. Uis aute irure.</h2>\n\n        <div class=\"pure-g\">\n            <div class=\"l-box-lrg pure-u-1 pure-u-md-2-5\">\n                <form class=\"pure-form pure-form-stacked\">\n                    <fieldset>\n\n                        <label for=\"name\">Your Name</label>\n                        <input id=\"name\" type=\"text\" placeholder=\"Your Name\">\n\n\n                        <label for=\"email\">Your Email</label>\n                        <input id=\"email\" type=\"email\" placeholder=\"Your Email\">\n\n                        <label for=\"password\">Your Password</label>\n                        <input id=\"password\" type=\"password\" placeholder=\"Your Password\">\n\n                        <button type=\"submit\" class=\"pure-button\">Sign Up</button>\n                    </fieldset>\n                </form>\n            </div>\n\n            <div class=\"l-box-lrg pure-u-1 pure-u-md-3-5\">\n                <h4>Contact Us</h4>\n                <p>\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                    consequat.\n                </p>\n\n                <h4>More Information</h4>\n                <p>\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n                    tempor incididunt ut labore et dolore magna aliqua.\n                </p>\n            </div>\n        </div>\n\n    </div>\n\n    <div class=\"footer l-box is-center\">\n        View the source of this layout to learn more. Made with love by the Pure Team.\n    </div>\n\n</div>\n\n</body>\n</html>\n"
  },
  {
    "path": "site/static/layouts/marketing/styles.css",
    "content": "* {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n/*\n * -- BASE STYLES --\n * Most of these are inherited from Base, but I want to change a few.\n */\nbody {\n    line-height: 1.7em;\n    color: #7f8c8d;\n    font-size: 13px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nlabel {\n    color: #34495e;\n}\n\n.pure-img-responsive {\n    max-width: 100%;\n    height: auto;\n}\n\n/*\n * -- LAYOUT STYLES --\n * These are some useful classes which I will need\n */\n.l-box {\n    padding: 1em;\n}\n\n.l-box-lrg {\n    padding: 2em;\n    border-bottom: 1px solid rgba(0,0,0,0.1);\n}\n\n.is-center {\n    text-align: center;\n}\n\n\n\n/*\n * -- PURE FORM STYLES --\n * Style the form inputs and labels\n */\n.pure-form label {\n    margin: 1em 0 0;\n    font-weight: bold;\n    font-size: 100%;\n}\n\n.pure-form input[type] {\n    border: 2px solid #ddd;\n    box-shadow: none;\n    font-size: 100%;\n    width: 100%;\n    margin-bottom: 1em;\n}\n\n/*\n * -- PURE BUTTON STYLES --\n * I want my pure-button elements to look a little different\n */\n.pure-button {\n    background-color: #1f8dd6;\n    color: white;\n    padding: 0.5em 2em;\n    border-radius: 5px;\n}\n\na.pure-button-primary {\n    background: white;\n    color: #1f8dd6;\n    border-radius: 5px;\n    font-size: 120%;\n}\n\n\n/*\n * -- MENU STYLES --\n * I want to customize how my .pure-menu looks at the top of the page\n */\n\n.home-menu {\n    padding: 0.5em;\n    text-align: center;\n    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);\n}\n.home-menu {\n    background: #2d3e50;\n}\n.pure-menu.pure-menu-fixed {\n    /* Fixed menus normally have a border at the bottom. */\n    border-bottom: none;\n    /* I need a higher z-index here because of the scroll-over effect. */\n    z-index: 4;\n}\n\n.home-menu .pure-menu-heading {\n    color: white;\n    font-weight: 400;\n    font-size: 120%;\n}\n\n.home-menu .pure-menu-selected a {\n    color: white;\n}\n\n.home-menu a {\n    color: #6FBEF3;\n}\n.home-menu li a:hover,\n.home-menu li a:focus {\n    background: none;\n    border: none;\n    color: #AECFE5;\n}\n\n\n/*\n * -- SPLASH STYLES --\n * This is the blue top section that appears on the page.\n */\n\n.splash-container {\n    background: #1f8dd6;\n    z-index: 1;\n    overflow: hidden;\n    /* The following styles are required for the \"scroll-over\" effect */\n    width: 100%;\n    height: 88%;\n    top: 0;\n    left: 0;\n    position: fixed !important;\n}\n\n.splash {\n    /* absolute center .splash within .splash-container */\n    width: 80%;\n    height: 50%;\n    margin: auto;\n    position: absolute;\n    top: 100px; left: 0; bottom: 0; right: 0;\n    text-align: center;\n    text-transform: uppercase;\n}\n\n/* This is the main heading that appears on the blue section */\n.splash-head {\n    font-size: 20px;\n    font-weight: bold;\n    color: white;\n    border: 3px solid white;\n    padding: 1em 1.6em;\n    font-weight: 100;\n    border-radius: 5px;\n    line-height: 1em;\n}\n\n/* This is the subheading that appears on the blue section */\n.splash-subhead {\n    color: white;\n    letter-spacing: 0.05em;\n    opacity: 0.8;\n}\n\n/*\n * -- CONTENT STYLES --\n * This represents the content area (everything below the blue section)\n */\n.content-wrapper {\n    /* These styles are required for the \"scroll-over\" effect */\n    position: absolute;\n    top: 87%;\n    width: 100%;\n    min-height: 12%;\n    z-index: 2;\n    background: white;\n\n}\n\n/* We want to give the content area some more padding */\n.content {\n    padding: 1em 1em 3em;\n}\n\n/* This is the class used for the main content headers (<h2>) */\n.content-head {\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    margin: 2em 0 1em;\n}\n\n/* This is a modifier class used when the content-head is inside a ribbon */\n.content-head-ribbon {\n    color: white;\n}\n\n/* This is the class used for the content sub-headers (<h3>) */\n.content-subhead {\n    color: #1f8dd6;\n}\n    .content-subhead i {\n        margin-right: 7px;\n    }\n\n/* This is the class used for the dark-background areas. */\n.ribbon {\n    background: #2d3e50;\n    color: #aaa;\n}\n\n/* This is the class used for the footer */\n.footer {\n    background: #111;\n    position: fixed;\n    bottom: 0;\n    width: 100%;\n}\n\n/*\n * -- TABLET (AND UP) MEDIA QUERIES --\n * On tablets and other medium-sized devices, we want to customize some\n * of the mobile styles.\n */\n@media (min-width: 48em) {\n\n    /* We increase the body font size */\n    body {\n        font-size: 16px;\n    }\n\n    /* We can align the menu header to the left, but float the\n    menu items to the right. */\n    .home-menu {\n        text-align: left;\n    }\n        .home-menu ul {\n            float: right;\n        }\n\n    /* We increase the height of the splash-container */\n/*    .splash-container {\n        height: 500px;\n    }*/\n\n    /* We decrease the width of the .splash, since we have more width\n    to work with */\n    .splash {\n        width: 50%;\n        height: 50%;\n    }\n\n    .splash-head {\n        font-size: 250%;\n    }\n\n\n    /* We remove the border-separator assigned to .l-box-lrg */\n    .l-box-lrg {\n        border: none;\n    }\n\n}\n\n/*\n * -- DESKTOP (AND UP) MEDIA QUERIES --\n * On desktops and other large devices, we want to over-ride some\n * of the mobile and tablet styles.\n */\n@media (min-width: 78em) {\n    /* We increase the header font size even more */\n    .splash-head {\n        font-size: 300%;\n    }\n}\n"
  },
  {
    "path": "site/static/layouts/pricing/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"A layout example that shows off a responsive pricing table.\">\n    <title>Pricing Table &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\">\n    <link rel=\"stylesheet\" href=\"/css/pure/grids-responsive-min.css\">\n    <link rel=\"stylesheet\" href=\"/layouts/pricing/styles.css\">\n</head>\n<body>\n\n<div class=\"pure-menu pure-menu-horizontal\">\n    <a href=\"#\" class=\"pure-menu-heading\">Your Logo</a>\n    <ul class=\"pure-menu-list\">\n        <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n        <li class=\"pure-menu-item pure-menu-selected\"><a href=\"#\" class=\"pure-menu-link\">Pricing</a></li>\n        <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n    </ul>\n</div>\n\n<div class=\"banner\">\n    <h1 class=\"banner-head\">\n        Simple Pricing.<br>\n        Try before you buy.\n    </h1>\n</div>\n\n<div class=\"l-content\">\n    <div class=\"pricing-tables pure-g\">\n        <div class=\"pure-u-1 pure-u-md-1-3\">\n            <div class=\"pricing-table pricing-table-free\">\n                <div class=\"pricing-table-header\">\n                    <h2>Personal</h2>\n\n                    <span class=\"pricing-table-price\">\n                        $5 <span>per month</span>\n                    </span>\n                </div>\n\n                <ul class=\"pricing-table-list\">\n                    <li>Free setup</li>\n                    <li>Custom sub-domain</li>\n                    <li>Standard customer support</li>\n                    <li>1GB file storage</li>\n                    <li>1 database</li>\n                    <li>Unlimited bandwidth</li>\n                </ul>\n\n                <button class=\"button-choose pure-button\">Choose</button>\n            </div>\n        </div>\n\n        <div class=\"pure-u-1 pure-u-md-1-3\">\n            <div class=\"pricing-table pricing-table-biz pricing-table-selected\">\n                <div class=\"pricing-table-header\">\n                    <h2>Small Business</h2>\n\n                    <span class=\"pricing-table-price\">\n                        $25 <span>per month</span>\n                    </span>\n                </div>\n\n                <ul class=\"pricing-table-list\">\n                    <li>Free setup</li>\n                    <li>Use your own domain</li>\n                    <li>Standard customer support</li>\n                    <li>10GB file storage</li>\n                    <li>5 databases</li>\n                    <li>Unlimited bandwidth</li>\n                </ul>\n\n                <button class=\"button-choose pure-button\">Choose</button>\n            </div>\n        </div>\n\n        <div class=\"pure-u-1 pure-u-md-1-3\">\n            <div class=\"pricing-table pricing-table-enterprise\">\n                <div class=\"pricing-table-header\">\n                    <h2>Enterprise</h2>\n\n                    <span class=\"pricing-table-price\">\n                        $45 <span>per month</span>\n                    </span>\n                </div>\n\n                <ul class=\"pricing-table-list\">\n                    <li>Free setup</li>\n                    <li>Use your own domain</li>\n                    <li>Premium customer support</li>\n                    <li>Unlimited file storage</li>\n                    <li>25 databases</li>\n                    <li>Unlimited bandwidth</li>\n                </ul>\n\n                <button class=\"button-choose pure-button\">Choose</button>\n            </div>\n        </div>\n    </div> <!-- end pricing-tables -->\n\n    <div class=\"information pure-g\">\n        <div class=\"pure-u-1 pure-u-md-1-2\">\n            <div class=\"l-box\">\n                <h3 class=\"information-head\">Get started today</h3>\n                <p>\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"pure-u-1 pure-u-md-1-2\">\n            <div class=\"l-box\">\n                <h3 class=\"information-head\">Pay monthly or annually</h3>\n                <p>\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamco laboris nisi ut aliquip ex ea commodo\n                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"pure-u-1 pure-u-md-1-2\">\n            <div class=\"l-box\">\n                <h3 class=\"information-head\">24/7 customer support</h3>\n                <p>\n                    Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                </p>\n            </div>\n        </div>\n\n        <div class=\"pure-u-1 pure-u-md-1-2\">\n            <div class=\"l-box\">\n                <h3 class=\"information-head\">Cancel your plan anytime</h3>\n                <p>\n                    Duis aute irure dolor in reprehenderit in voluptate velit esse\n                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n                </p>\n            </div>\n        </div>\n    </div> <!-- end information -->\n</div> <!-- end l-content -->\n\n<div class=\"footer l-box\">\n    <p>\n        <a href=\"#\">Try now</a> for 14 days. No credit card required. Header image courtesy of <a href='http://unsplash.com/'>Unsplash</a>.\n    </p>\n</div>\n\n</body>\n</html>\n"
  },
  {
    "path": "site/static/layouts/pricing/styles.css",
    "content": "/*\n * -- BASE STYLES --\n * Most of these are inherited from Base, but I want to change a few.\n */\nbody {\n  color: #526066;\n}\n\nh2,\nh3 {\n  letter-spacing: 0.25em;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\np {\n  line-height: 1.6em;\n}\n\n/*\n * -- Layout Styles --\n */\n.l-content {\n  margin: 0 auto;\n}\n\n.l-box {\n  padding: 0.5em 2em;\n}\n\n/*\n * -- MENU STYLES --\n * Make the menu have a very faint box-shadow.\n */\n.pure-menu {\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n}\n\n.pure-menu-link {\n  padding: 0.5em 0.7em;\n}\n\n/*\n * -- BANNER --\n * The top banner with the headings. By using a combination\n * of `display: table;` and `display: table-cell;`, we can\n * vertically center the text.\n */\n\n.banner {\n  background: transparent\n    url(\"https://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg\")\n    0 0 no-repeat fixed;\n  text-align: center;\n  background-size: cover;\n  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');\n\n  height: 200px;\n  width: 100%;\n  margin-bottom: 3em;\n  display: table;\n}\n\n.banner-head {\n  display: table-cell;\n  vertical-align: middle;\n  margin-bottom: 0;\n  font-size: 2em;\n  color: white;\n  font-weight: 500;\n  text-shadow: 0 1px 1px black;\n}\n\n/*\n * -- PRICING TABLE WRAPPER --\n * This element wraps up all the pricing table elements\n */\n.pricing-tables,\n.information {\n  max-width: 980px;\n  margin: 0 auto;\n}\n.pricing-tables {\n  margin-bottom: 3.125em;\n  text-align: center;\n}\n\n/*\n * -- PRICING TABLE  --\n * Every pricing table has the .pricing-table class\n */\n.pricing-table {\n  border: 1px solid #ddd;\n  margin: 0 0.5em 2em;\n  padding: 0 0 3em;\n}\n\n/*\n * -- PRICING TABLE HEADER COLORS --\n * Choose a different color based on the type of pricing table.\n */\n.pricing-table-free .pricing-table-header {\n  background: #519251;\n}\n\n.pricing-table-biz .pricing-table-header {\n  background: #2c4985;\n}\n\n/*\n * -- PRICING TABLE HEADER --\n * By default, a header is black/white, and has some styles for its <h2> name.\n */\n.pricing-table-header {\n  background: #111;\n  color: #fff;\n}\n.pricing-table-header h2 {\n  margin: 0;\n  padding-top: 2em;\n  font-size: 1em;\n  font-weight: normal;\n}\n\n/*\n * -- PRICING TABLE PRICE --\n * Styles for the price and the corresponding <span>per month</span>\n */\n.pricing-table-price {\n  font-size: 6em;\n  margin: 0.2em 0 0;\n  font-weight: 100;\n}\n.pricing-table-price span {\n  display: block;\n  text-transform: uppercase;\n  font-size: 0.2em;\n  padding-bottom: 2em;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  *color: #fff;\n}\n\n/*\n * -- PRICING TABLE LIST --\n * Each pricing table has a <ul> which is denoted by the .pricing-table-list class\n */\n.pricing-table-list {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  text-align: center;\n}\n\n/*\n * -- PRICING TABLE LIST ELEMENTS --\n * Styles for the individual list elements within each pricing table\n */\n.pricing-table-list li {\n  padding: 0.8em 0;\n  background: #f7f7f7;\n  border-bottom: 1px solid #e7e7e7;\n}\n\n/*\n * -- PRICING TABLE BUTTON --\n * Styles for the \"Choose\" button at the bottom of a pricing table.\n * This inherits from Pure Button.\n */\n.button-choose {\n  border: 1px solid #ccc;\n  background: #fff;\n  color: #333;\n  border-radius: 2em;\n  font-weight: bold;\n  position: relative;\n  bottom: -1.5em;\n}\n\n.information-head {\n  color: black;\n  font-weight: 500;\n}\n\n.footer {\n  background: #111;\n  color: #888;\n  text-align: center;\n}\n.footer a {\n  color: #ddd;\n}\n\n/*\n * -- TABLET MEDIA QUERIES --\n * On tablets, we want to slightly adjust the size of the banner\n * text and add some vertical space between the various pricing tables\n */\n@media (min-width: 767px) {\n  .banner-head {\n    font-size: 4em;\n  }\n  .pricing-table {\n    margin-bottom: 0;\n  }\n}\n\n/*\n * -- PHONE MEDIA QUERIES --\n * On phones, we want to reduce the height and font-size of the banner further\n */\n@media (min-width: 480px) {\n  .banner {\n    height: 400px;\n  }\n  .banner-head {\n    font-size: 3em;\n  }\n}\n"
  },
  {
    "path": "site/static/layouts/side-menu/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"A layout example with a side menu that hides on mobile, just like the Pure website.\">\n    <title>Responsive Side Menu &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\">\n    <link rel=\"stylesheet\" href=\"/layouts/side-menu/styles.css\">\n</head>\n<body>\n\n<div id=\"layout\">\n    <!-- Menu toggle -->\n    <a href=\"#menu\" id=\"menuLink\" class=\"menu-link\">\n        <!-- Hamburger icon -->\n        <span></span>\n    </a>\n\n    <div id=\"menu\">\n        <div class=\"pure-menu\">\n            <a class=\"pure-menu-heading\" href=\"#company\">Company</a>\n\n            <ul class=\"pure-menu-list\">\n                <li class=\"pure-menu-item\"><a href=\"#home\" class=\"pure-menu-link\">Home</a></li>\n                <li class=\"pure-menu-item\"><a href=\"#about\" class=\"pure-menu-link\">About</a></li>\n\n                <li class=\"pure-menu-item menu-item-divided pure-menu-selected\">\n                    <a href=\"#\" class=\"pure-menu-link\">Services</a>\n                </li>\n\n                <li class=\"pure-menu-item\"><a href=\"#contact\" class=\"pure-menu-link\">Contact</a></li>\n            </ul>\n        </div>\n    </div>\n\n    <div id=\"main\">\n        <div class=\"header\">\n            <h1>Page Title</h1>\n            <h2>A subtitle for your page goes here</h2>\n        </div>\n\n        <div class=\"content\">\n            <h2 class=\"content-subhead\">How to use this layout</h2>\n            <p>\n                To use this layout, you can just copy paste the HTML, along with the CSS in <a href=\"/layouts/side-menu/styles.css\" alt=\"Side Menu CSS\">side-menu.css</a>, and the JavaScript in <a href=\"/js/ui.js\">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.\n            </p>\n\n            <h2 class=\"content-subhead\">Now Let's Speak Some Latin</h2>\n            <p>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n            </p>\n\n            <div class=\"pure-g\">\n                <div class=\"pure-u-1-4\">\n                    <img class=\"pure-img-responsive\" src=\"http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg\" alt=\"Peyto Lake\">\n                </div>\n                <div class=\"pure-u-1-4\">\n                    <img class=\"pure-img-responsive\" src=\"http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg\" alt=\"Train\">\n                </div>\n                <div class=\"pure-u-1-4\">\n                    <img class=\"pure-img-responsive\" src=\"http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg\" alt=\"T-Shirt Store\">\n                </div>\n                <div class=\"pure-u-1-4\">\n                    <img class=\"pure-img-responsive\" src=\"http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg\" alt=\"Mountain\">\n                </div>\n            </div>\n\n            <h2 class=\"content-subhead\">Try Resizing your Browser</h2>\n            <p>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n            </p>\n        </div>\n    </div>\n</div>\n\n<script src=\"/js/ui.js\"></script>\n\n</body>\n</html>\n"
  },
  {
    "path": "site/static/layouts/side-menu/styles.css",
    "content": "body {\n    color: #777;\n}\n\n.pure-img-responsive {\n    max-width: 100%;\n    height: auto;\n}\n\n/*\nAdd transition to containers so they can push in and out.\n*/\n#layout,\n#menu,\n.menu-link {\n    -webkit-transition: all 0.2s ease-out;\n    -moz-transition: all 0.2s ease-out;\n    -ms-transition: all 0.2s ease-out;\n    -o-transition: all 0.2s ease-out;\n    transition: all 0.2s ease-out;\n}\n\n/*\nThis is the parent `<div>` that contains the menu and the content area.\n*/\n#layout {\n    position: relative;\n    left: 0;\n    padding-left: 0;\n}\n    #layout.active #menu {\n        left: 150px;\n        width: 150px;\n    }\n\n    #layout.active .menu-link {\n        left: 150px;\n    }\n/*\nThe content `<div>` is where all your content goes.\n*/\n.content {\n    margin: 0 auto;\n    padding: 0 2em;\n    max-width: 800px;\n    margin-bottom: 50px;\n    line-height: 1.6em;\n}\n\n.header {\n     margin: 0;\n     color: #333;\n     text-align: center;\n     padding: 2.5em 2em 0;\n     border-bottom: 1px solid #eee;\n }\n    .header h1 {\n        margin: 0.2em 0;\n        font-size: 3em;\n        font-weight: 300;\n    }\n     .header h2 {\n        font-weight: 300;\n        color: #ccc;\n        padding: 0;\n        margin-top: 0;\n    }\n\n.content-subhead {\n    margin: 50px 0 20px 0;\n    font-weight: 300;\n    color: #888;\n}\n\n\n\n/*\nThe `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that\nappears on the left side of the page.\n*/\n\n#menu {\n    margin-left: -150px; /* \"#menu\" width */\n    width: 150px;\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    z-index: 1000; /* so the menu or its navicon stays above all content */\n    background: #191818;\n    overflow-y: auto;\n}\n    /*\n    All anchors inside the menu should be styled like this.\n    */\n    #menu a {\n        color: #999;\n        border: none;\n        padding: 0.6em 0 0.6em 0.6em;\n    }\n\n    /*\n    Remove all background/borders, since we are applying them to #menu.\n    */\n     #menu .pure-menu,\n     #menu .pure-menu ul {\n        border: none;\n        background: transparent;\n    }\n\n    /*\n    Add that light border to separate items into groups.\n    */\n    #menu .pure-menu ul,\n    #menu .pure-menu .menu-item-divided {\n        border-top: 1px solid #333;\n    }\n        /*\n        Change color of the anchor links on hover/focus.\n        */\n        #menu .pure-menu li a:hover,\n        #menu .pure-menu li a:focus {\n            background: #333;\n        }\n\n    /*\n    This styles the selected menu item `<li>`.\n    */\n    #menu .pure-menu-selected,\n    #menu .pure-menu-heading {\n        background: #1f8dd6;\n    }\n        /*\n        This styles a link within a selected menu item `<li>`.\n        */\n        #menu .pure-menu-selected a {\n            color: #fff;\n        }\n\n    /*\n    This styles the menu heading.\n    */\n    #menu .pure-menu-heading {\n        font-size: 110%;\n        color: #fff;\n        margin: 0;\n    }\n\n/* -- Dynamic Button For Responsive Menu -------------------------------------*/\n\n/*\nThe button to open/close the Menu is custom-made and not part of Pure. Here's\nhow it works:\n*/\n\n/*\n`.menu-link` represents the responsive menu toggle that shows/hides on\nsmall screens.\n*/\n.menu-link {\n    position: fixed;\n    display: block; /* show this only on small screens */\n    top: 0;\n    left: 0; /* \"#menu width\" */\n    background: #000;\n    background: rgba(0,0,0,0.7);\n    font-size: 10px; /* change this value to increase/decrease button size */\n    z-index: 10;\n    width: 2em;\n    height: auto;\n    padding: 2.1em 1.6em;\n}\n\n    .menu-link:hover,\n    .menu-link:focus {\n        background: #000;\n    }\n\n    .menu-link span {\n        position: relative;\n        display: block;\n    }\n\n    .menu-link span,\n    .menu-link span:before,\n    .menu-link span:after {\n        background-color: #fff;\n        pointer-events: none;\n        width: 100%;\n        height: 0.2em;\n    }\n\n        .menu-link span:before,\n        .menu-link span:after {\n            position: absolute;\n            margin-top: -0.6em;\n            content: \" \";\n        }\n\n        .menu-link span:after {\n            margin-top: 0.6em;\n        }\n\n\n/* -- Responsive Styles (Media Queries) ------------------------------------- */\n\n/*\nHides the menu at `48em`, but modify this based on your app's needs.\n*/\n@media (min-width: 48em) {\n\n    .header,\n    .content {\n        padding-left: 2em;\n        padding-right: 2em;\n    }\n\n    #layout {\n        padding-left: 150px; /* left col width \"#menu\" */\n        left: 0;\n    }\n    #menu {\n        left: 150px;\n    }\n\n    .menu-link {\n        position: fixed;\n        left: 150px;\n        display: none;\n    }\n\n    #layout.active .menu-link {\n        left: 150px;\n    }\n}\n\n@media (max-width: 48em) {\n    /* Only apply this when the window is small. Otherwise, the following\n    case results in extra padding on the left:\n        * Make the window small.\n        * Tap the menu to trigger the active state.\n        * Make the window large again.\n    */\n    #layout.active {\n        position: relative;\n        left: 150px;\n    }\n}\n"
  },
  {
    "path": "site/static/layouts/tucked-menu/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.\">\n    <title>Responsive Horizontal-to-Scrollable Menu &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\">\n</head>\n<body>\n\n<style>\n.custom-menu-wrapper {\n    background-color: #808080;\n    margin-bottom: 2.5em;\n    white-space: nowrap;\n    position: relative;\n}\n\n.custom-menu {\n    display: inline-block;\n    width: auto;\n    vertical-align: middle;\n    -webkit-font-smoothing: antialiased;\n}\n\n.custom-menu .pure-menu-link,\n.custom-menu .pure-menu-heading {\n    color: white;\n}\n\n.custom-menu .pure-menu-link:hover,\n.custom-menu .pure-menu-heading:hover {\n    background-color: transparent;\n}\n\n.custom-menu-top {\n    position: relative;\n    padding-top: .5em;\n    padding-bottom: .5em;\n}\n\n.custom-menu-brand {\n    display: block;\n    text-align: center;\n    position: relative;\n}\n\n.custom-menu-toggle {\n    width: 44px;\n    height: 44px;\n    display: block;\n    position: absolute;\n    top: 3px;\n    right: 0;\n    display: none;\n}\n\n.custom-menu-toggle .bar {\n    background-color: white;\n    display: block;\n    width: 20px;\n    height: 2px;\n    border-radius: 100px;\n    position: absolute;\n    top: 22px;\n    right: 12px;\n    -webkit-transition: all 0.5s;\n    -moz-transition: all 0.5s;\n    -ms-transition: all 0.5s;\n    transition: all 0.5s;\n}\n\n.custom-menu-toggle .bar:first-child {\n    -webkit-transform: translateY(-6px);\n    -moz-transform: translateY(-6px);\n    -ms-transform: translateY(-6px);\n    transform: translateY(-6px);\n}\n\n.custom-menu-toggle.x .bar {\n    -webkit-transform: rotate(45deg);\n    -moz-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n}\n\n.custom-menu-toggle.x .bar:first-child {\n    -webkit-transform: rotate(-45deg);\n    -moz-transform: rotate(-45deg);\n    -ms-transform: rotate(-45deg);\n    transform: rotate(-45deg);\n}\n\n.custom-menu-screen {\n    background-color: rgba(0, 0, 0, 0.5);\n    -webkit-transition: all 0.5s;\n    -moz-transition: all 0.5s;\n    -ms-transition: all 0.5s;\n    transition: all 0.5s;\n    height: 3em;\n    width: 70em;\n    position: absolute;\n    top: 0;\n    z-index: -1;\n}\n\n.custom-menu-tucked .custom-menu-screen {\n    -webkit-transform: translateY(-44px);\n    -moz-transform: translateY(-44px);\n    -ms-transform: translateY(-44px);\n    transform: translateY(-44px);\n}\n\n@media (max-width: 62em) {\n\n    .custom-menu {\n        display: block;\n    }\n\n    .custom-menu-toggle {\n        display: block;\n        display: none\\9;\n    }\n\n    .custom-menu-bottom {\n        position: absolute;\n        width: 100%;\n        border-top: 1px solid #eee;\n        background-color: #808080\\9;\n        z-index: 100;\n    }\n\n    .custom-menu-bottom .pure-menu-link {\n        opacity: 1;\n        -webkit-transform: translateX(0);\n        -moz-transform: translateX(0);\n        -ms-transform: translateX(0);\n        transform: translateX(0);\n        -webkit-transition: all 0.5s;\n        -moz-transition: all 0.5s;\n        -ms-transition: all 0.5s;\n        transition: all 0.5s;\n    }\n\n    .custom-menu-bottom.custom-menu-tucked .pure-menu-link {\n        -webkit-transform: translateX(-140px);\n        -moz-transform: translateX(-140px);\n        -ms-transform: translateX(-140px);\n        transform: translateX(-140px);\n        opacity: 0;\n        opacity: 1\\9;\n    }\n\n    .pure-menu-horizontal.custom-menu-tucked {\n        z-index: -1;\n        top: 45px;\n        position: absolute;\n        overflow: hidden;\n    }\n\n}\n</style>\n<div class=\"custom-menu-wrapper\">\n    <div class=\"pure-menu custom-menu custom-menu-top\">\n        <a href=\"#\" class=\"pure-menu-heading custom-menu-brand\">Brand</a>\n        <a href=\"#\" class=\"custom-menu-toggle\" id=\"toggle\"><s class=\"bar\"></s><s class=\"bar\"></s></a>\n    </div>\n    <div class=\"pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked\" id=\"tuckedMenu\">\n        <div class=\"custom-menu-screen\"></div>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Blog</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Apple</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Google</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Wang</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Yahoo</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">W3C</a></li>\n        </ul>\n    </div>\n</div>\n<script>\n(function (window, document) {\ndocument.getElementById('toggle').addEventListener('click', function (e) {\n    document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked');\n    document.getElementById('toggle').classList.toggle('x');\n});\n})(this, this.document);\n</script>\n<style>\n.main {\n    padding: 2em;\n    color: black;\n}\n</style>\n\n<div class=\"main\">\n\n    <h1>Responsive Horizontal-to-Scrollable Menu</h1>\n\n    <p>This example shows how you can build upon Pure menu classes\n    such as pure-menu-horizontal\n    and pure-menu-scrollable. At wide window-widths we display a horizontal menu.\n    At smaller window-widths,\n    we switch to a scrollable horizontal menu with a toggle control.\n    Remember that the JavaScript provided is plain vanilla JS so it won't work in\n    some browsers; you'll need to polyfill or adapt the code to your library of choice.</p>\n\n    <p>Code reproduced below:</p>\n\n<pre class=\"code\" data-language=\"html\"><code>&lt;style&gt;\n      .custom-menu-wrapper {\n          background-color: #808080;\n          margin-bottom: 2.5em;\n          white-space: nowrap;\n          position: relative;\n      }\n\n      .custom-menu {\n          display: inline-block;\n          width: auto;\n          vertical-align: middle;\n          -webkit-font-smoothing: antialiased;\n      }\n\n      .custom-menu .pure-menu-link,\n      .custom-menu .pure-menu-heading {\n          color: white;\n      }\n\n      .custom-menu .pure-menu-link:hover,\n      .custom-menu .pure-menu-heading:hover {\n          background-color: transparent;\n      }\n\n      .custom-menu-top {\n          position: relative;\n          padding-top: .5em;\n          padding-bottom: .5em;\n      }\n\n      .custom-menu-brand {\n          display: block;\n          text-align: center;\n          position: relative;\n      }\n\n      .custom-menu-toggle {\n          width: 44px;\n          height: 44px;\n          display: block;\n          position: absolute;\n          top: 3px;\n          right: 0;\n          display: none;\n      }\n\n      .custom-menu-toggle .bar {\n          background-color: white;\n          display: block;\n          width: 20px;\n          height: 2px;\n          border-radius: 100px;\n          position: absolute;\n          top: 22px;\n          right: 12px;\n          -webkit-transition: all 0.5s;\n          -moz-transition: all 0.5s;\n          -ms-transition: all 0.5s;\n          transition: all 0.5s;\n      }\n\n      .custom-menu-toggle .bar:first-child {\n          -webkit-transform: translateY(-6px);\n          -moz-transform: translateY(-6px);\n          -ms-transform: translateY(-6px);\n          transform: translateY(-6px);\n      }\n\n      .custom-menu-toggle.x .bar {\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -ms-transform: rotate(45deg);\n          transform: rotate(45deg);\n      }\n\n      .custom-menu-toggle.x .bar:first-child {\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -ms-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n      }\n\n      .custom-menu-screen {\n          background-color: rgba(0, 0, 0, 0.5);\n          -webkit-transition: all 0.5s;\n          -moz-transition: all 0.5s;\n          -ms-transition: all 0.5s;\n          transition: all 0.5s;\n          height: 3em;\n          width: 70em;\n          position: absolute;\n          top: 0;\n          z-index: -1;\n      }\n\n      .custom-menu-tucked .custom-menu-screen {\n          -webkit-transform: translateY(-44px);\n          -moz-transform: translateY(-44px);\n          -ms-transform: translateY(-44px);\n          transform: translateY(-44px);\n      }\n\n      @media (max-width: 62em) {\n\n          .custom-menu {\n              display: block;\n          }\n\n          .custom-menu-toggle {\n              display: block;\n              display: none\\9;\n          }\n\n          .custom-menu-bottom {\n              position: absolute;\n              width: 100%;\n              border-top: 1px solid #eee;\n              background-color: #808080\\9;\n              z-index: 100;\n          }\n\n          .custom-menu-bottom .pure-menu-link {\n              opacity: 1;\n              -webkit-transform: translateX(0);\n              -moz-transform: translateX(0);\n              -ms-transform: translateX(0);\n              transform: translateX(0);\n              -webkit-transition: all 0.5s;\n              -moz-transition: all 0.5s;\n              -ms-transition: all 0.5s;\n              transition: all 0.5s;\n          }\n\n          .custom-menu-bottom.custom-menu-tucked .pure-menu-link {\n              -webkit-transform: translateX(-140px);\n              -moz-transform: translateX(-140px);\n              -ms-transform: translateX(-140px);\n              transform: translateX(-140px);\n              opacity: 0;\n              opacity: 1\\9;\n          }\n\n          .pure-menu-horizontal.custom-menu-tucked {\n              z-index: -1;\n              top: 45px;\n              position: absolute;\n              overflow: hidden;\n          }\n\n      }\n      &lt;/style&gt;\n      &lt;div class&#x3D;&quot;custom-menu-wrapper&quot;&gt;\n          &lt;div class&#x3D;&quot;pure-menu custom-menu custom-menu-top&quot;&gt;\n              &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-heading custom-menu-brand&quot;&gt;Brand&lt;/a&gt;\n              &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;custom-menu-toggle&quot; id&#x3D;&quot;toggle&quot;&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;/a&gt;\n          &lt;/div&gt;\n          &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked&quot; id&#x3D;&quot;tuckedMenu&quot;&gt;\n              &lt;div class&#x3D;&quot;custom-menu-screen&quot;&gt;&lt;/div&gt;\n              &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;GitHub&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Twitter&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Apple&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Wang&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Yahoo&lt;/a&gt;&lt;/li&gt;\n                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;W3C&lt;/a&gt;&lt;/li&gt;\n              &lt;/ul&gt;\n          &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;script&gt;\n      (function (window, document) {\n      document.getElementById(&#x27;toggle&#x27;).addEventListener(&#x27;click&#x27;, function (e) {\n          document.getElementById(&#x27;tuckedMenu&#x27;).classList.toggle(&#x27;custom-menu-tucked&#x27;);\n          document.getElementById(&#x27;toggle&#x27;).classList.toggle(&#x27;x&#x27;);\n      });\n      })(this, this.document);\n      &lt;/script&gt;</code></pre>\n</div>\n\n\n</body>\n</html>\n"
  },
  {
    "path": "site/static/layouts/tucked-menu-vertical/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"description\" content=\"A set of horizontal menus that switch to vertical and which hide at small window widths.\">\n    <title>Responsive Horizontal-to-Vertical Menu &ndash; Layout Examples &ndash; Pure</title>\n    <link rel=\"stylesheet\" href=\"/css/pure/pure-min.css\">\n    <link rel=\"stylesheet\" href=\"/css/pure/grids-responsive-min.css\">\n</head>\n<body>\n\n<style>\n.custom-wrapper {\n    background-color: #ffd390;\n    margin-bottom: 1em;\n    -webkit-font-smoothing: antialiased;\n    height: 2.1em;\n    overflow: hidden;\n    -webkit-transition: height 0.5s;\n    -moz-transition: height 0.5s;\n    -ms-transition: height 0.5s;\n    transition: height 0.5s;\n}\n\n.custom-wrapper.open {\n    height: 14em;\n}\n\n.custom-menu-3 {\n    text-align: right;\n}\n\n.custom-toggle {\n    width: 34px;\n    height: 34px;\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: none;\n}\n\n.custom-toggle .bar {\n    background-color: #777;\n    display: block;\n    width: 20px;\n    height: 2px;\n    border-radius: 100px;\n    position: absolute;\n    top: 18px;\n    right: 7px;\n    -webkit-transition: all 0.5s;\n    -moz-transition: all 0.5s;\n    -ms-transition: all 0.5s;\n    transition: all 0.5s;\n}\n\n.custom-toggle .bar:first-child {\n    -webkit-transform: translateY(-6px);\n    -moz-transform: translateY(-6px);\n    -ms-transform: translateY(-6px);\n    transform: translateY(-6px);\n}\n\n.custom-toggle.x .bar {\n    -webkit-transform: rotate(45deg);\n    -moz-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n}\n\n.custom-toggle.x .bar:first-child {\n    -webkit-transform: rotate(-45deg);\n    -moz-transform: rotate(-45deg);\n    -ms-transform: rotate(-45deg);\n    transform: rotate(-45deg);\n}\n\n@media (max-width: 47.999em) {\n\n    .custom-menu-3 {\n        text-align: left;\n    }\n\n    .custom-toggle {\n        display: block;\n    }\n\n}\n</style>\n<div class=\"custom-wrapper pure-g\" id=\"menu\">\n    <div class=\"pure-u-1 pure-u-md-1-3\">\n        <div class=\"pure-menu\">\n            <a href=\"#\" class=\"pure-menu-heading custom-brand\">Brand</a>\n            <a href=\"#\" class=\"custom-toggle\" id=\"toggle\"><s class=\"bar\"></s><s class=\"bar\"></s></a>\n        </div>\n    </div>\n    <div class=\"pure-u-1 pure-u-md-1-3\">\n        <div class=\"pure-menu pure-menu-horizontal custom-can-transform\">\n            <ul class=\"pure-menu-list\">\n                <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n                <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n                <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            </ul>\n        </div>\n    </div>\n    <div class=\"pure-u-1 pure-u-md-1-3\">\n        <div class=\"pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform\">\n            <ul class=\"pure-menu-list\">\n                <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Yahoo</a></li>\n                <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">W3C</a></li>\n            </ul>\n        </div>\n    </div>\n</div>\n<script>\n(function (window, document) {\nvar menu = document.getElementById('menu'),\n    rollback,\n    WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';\n\nfunction toggleHorizontal() {\n    menu.classList.remove('closing');\n    [].forEach.call(\n        document.getElementById('menu').querySelectorAll('.custom-can-transform'),\n        function(el){\n            el.classList.toggle('pure-menu-horizontal');\n        }\n    );\n};\n\nfunction toggleMenu() {\n    // set timeout so that the panel has a chance to roll up\n    // before the menu switches states\n    if (menu.classList.contains('open')) {\n        menu.classList.add('closing');\n        rollBack = setTimeout(toggleHorizontal, 500);\n    }\n    else {\n        if (menu.classList.contains('closing')) {\n            clearTimeout(rollBack);\n        } else {\n            toggleHorizontal();\n        }\n    }\n    menu.classList.toggle('open');\n    document.getElementById('toggle').classList.toggle('x');\n};\n\nfunction closeMenu() {\n    if (menu.classList.contains('open')) {\n        toggleMenu();\n    }\n}\n\ndocument.getElementById('toggle').addEventListener('click', function (e) {\n    toggleMenu();\n    e.preventDefault();\n});\n\nwindow.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);\n})(this, this.document);\n\n</script>\n<style>\n.main {\n    padding: 2em;\n    color: black;\n}\n</style>\n\n<div class=\"main\">\n\n    <h1>Responsive Horizontal-to-Vertical Menu</h1>\n\n    <p>This example shows how you can build upon Pure Menu and Grid classes. At wide\n    window-widths we display a horizontal menu.\n    At smaller window-widths,\n    we switch to a vertical menu with a toggle control. Grids are used to\n    arrange the menus.\n    Code reproduced below:</p>\n\n<pre class=\"code\" data-language=\"html\"><code>\n      &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;/css/pure/grids-responsive-min.css&quot;&gt;\n\n      &lt;style&gt;\n      .custom-wrapper {\n          background-color: #ffd390;\n          margin-bottom: 1em;\n          -webkit-font-smoothing: antialiased;\n          height: 2.1em;\n          overflow: hidden;\n          -webkit-transition: height 0.5s;\n          -moz-transition: height 0.5s;\n          -ms-transition: height 0.5s;\n          transition: height 0.5s;\n      }\n\n      .custom-wrapper.open {\n          height: 14em;\n      }\n\n      .custom-menu-3 {\n          text-align: right;\n      }\n\n      .custom-toggle {\n          width: 34px;\n          height: 34px;\n          position: absolute;\n          top: 0;\n          right: 0;\n          display: none;\n      }\n\n      .custom-toggle .bar {\n          background-color: #777;\n          display: block;\n          width: 20px;\n          height: 2px;\n          border-radius: 100px;\n          position: absolute;\n          top: 18px;\n          right: 7px;\n          -webkit-transition: all 0.5s;\n          -moz-transition: all 0.5s;\n          -ms-transition: all 0.5s;\n          transition: all 0.5s;\n      }\n\n      .custom-toggle .bar:first-child {\n          -webkit-transform: translateY(-6px);\n          -moz-transform: translateY(-6px);\n          -ms-transform: translateY(-6px);\n          transform: translateY(-6px);\n      }\n\n      .custom-toggle.x .bar {\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -ms-transform: rotate(45deg);\n          transform: rotate(45deg);\n      }\n\n      .custom-toggle.x .bar:first-child {\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -ms-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n      }\n\n      @media (max-width: 47.999em) {\n\n          .custom-menu-3 {\n              text-align: left;\n          }\n\n          .custom-toggle {\n              display: block;\n          }\n\n      }\n      &lt;/style&gt;\n      &lt;div class&#x3D;&quot;custom-wrapper pure-g&quot; id&#x3D;&quot;menu&quot;&gt;\n          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;\n              &lt;div class&#x3D;&quot;pure-menu&quot;&gt;\n                  &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-heading custom-brand&quot;&gt;Brand&lt;/a&gt;\n                  &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;custom-toggle&quot; id&#x3D;&quot;toggle&quot;&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;/a&gt;\n              &lt;/div&gt;\n          &lt;/div&gt;\n          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;\n              &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-can-transform&quot;&gt;\n                  &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;\n                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\n                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;About&lt;/a&gt;&lt;/li&gt;\n                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;\n                  &lt;/ul&gt;\n              &lt;/div&gt;\n          &lt;/div&gt;\n          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;\n              &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform&quot;&gt;\n                  &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;\n                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Yahoo&lt;/a&gt;&lt;/li&gt;\n                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;W3C&lt;/a&gt;&lt;/li&gt;\n                  &lt;/ul&gt;\n              &lt;/div&gt;\n          &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;script&gt;\n      (function (window, document) {\n      var menu &#x3D; document.getElementById(&#x27;menu&#x27;),\n          rollBack,\n          WINDOW_CHANGE_EVENT &#x3D; (&#x27;onorientationchange&#x27; in window) ? &#x27;orientationchange&#x27;:&#x27;resize&#x27;;\n\n      function toggleHorizontal() {\n          menu.classList.remove(&#x27;closing&#x27;);\n          [].forEach.call(\n              document.getElementById(&#x27;menu&#x27;).querySelectorAll(&#x27;.custom-can-transform&#x27;),\n              function(el){\n                  el.classList.toggle(&#x27;pure-menu-horizontal&#x27;);\n              }\n          );\n      };\n\n      function toggleMenu() {\n          // set timeout so that the panel has a chance to roll up\n          // before the menu switches states\n          if (menu.classList.contains(&#x27;open&#x27;)) {\n              menu.classList.add(&#x27;closing&#x27;);\n              rollBack &#x3D; setTimeout(toggleHorizontal, 500);\n          }\n          else {\n              if (menu.classList.contains(&#x27;closing&#x27;)) {\n                  clearTimeout(rollBack);\n              } else {\n                  toggleHorizontal();\n              }\n          }\n          menu.classList.toggle(&#x27;open&#x27;);\n          document.getElementById(&#x27;toggle&#x27;).classList.toggle(&#x27;x&#x27;);\n      };\n\n      function closeMenu() {\n          if (menu.classList.contains(&#x27;open&#x27;)) {\n              toggleMenu();\n          }\n      }\n\n      document.getElementById(&#x27;toggle&#x27;).addEventListener(&#x27;click&#x27;, function (e) {\n          toggleMenu();\n          e.preventDefault();\n      });\n\n      window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);\n      })(this, this.document);\n\n      &lt;/script&gt;</code></pre>\n</div>\n\n\n</body>\n</html>\n"
  },
  {
    "path": "src/base/css/base.css",
    "content": "/*csslint important:false*/\n\n/* ==========================================================================\n   Pure Base Extras\n   ========================================================================== */\n\n/**\n * Extra rules that Pure adds on top of Normalize.css\n */\n\nhtml {\n    font-family: sans-serif;\n}\n\n/**\n * Always hide an element when it has the `hidden` HTML attribute.\n */\n\n.hidden,\n[hidden] {\n    display: none !important;\n}\n\n/**\n * Add this class to an image to make it fit within its fluid parent wrapper while maintaining\n * aspect ratio.\n */\n.pure-img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n}\n"
  },
  {
    "path": "src/buttons/css/buttons-core.css",
    "content": ".pure-button {\n    /* Structure */\n    display: inline-block;\n    line-height: normal;\n    white-space: nowrap;\n    vertical-align: middle;\n    text-align: center;\n    cursor: pointer;\n    -webkit-user-drag: none;\n    user-select: none;\n    box-sizing: border-box;\n}\n\n/* Firefox: Get rid of the inner focus border */\n.pure-button::-moz-focus-inner {\n    padding: 0;\n    border: 0;\n}\n\n/* Inherit .pure-g styles */\n.pure-button-group {\n    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */\n    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */\n}\n\n.opera-only :-o-prefocus,\n.pure-button-group {\n    word-spacing: -0.43em;\n}\n\n.pure-button-group .pure-button {\n    letter-spacing: normal;\n    word-spacing: normal;\n    vertical-align: top;\n    text-rendering: auto;\n}\n"
  },
  {
    "path": "src/buttons/css/buttons.css",
    "content": "/*csslint outline-none:false*/\n\n.pure-button {\n    font-family: inherit;\n    font-size: 100%;\n    padding: 0.5em 1em;\n    color: rgba(0, 0, 0, 0.80);\n    border: none rgba(0, 0, 0, 0);\n    background-color: #E6E6E6;\n    text-decoration: none;\n    border-radius: 2px;\n}\n\n.pure-button-hover,\n.pure-button:hover,\n.pure-button:focus {\n    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));\n}\n.pure-button:focus {\n    outline: 0;\n}\n.pure-button-active,\n.pure-button:active {\n    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;\n    border-color: #000;\n}\n\n.pure-button[disabled],\n.pure-button-disabled,\n.pure-button-disabled:hover,\n.pure-button-disabled:focus,\n.pure-button-disabled:active {\n    border: none;\n    background-image: none;\n    opacity: 0.40;\n    cursor: not-allowed;\n    box-shadow: none;\n    pointer-events: none;\n}\n\n.pure-button-hidden {\n    display: none;\n}\n\n.pure-button-primary,\n.pure-button-selected,\na.pure-button-primary,\na.pure-button-selected {\n    background-color: rgb(0, 120, 231);\n    color: #fff;\n}\n\n/* Button Groups */\n.pure-button-group .pure-button {\n    margin: 0;\n    border-radius: 0;\n    border-right: 1px solid rgba(0, 0, 0, 0.2);\n\n}\n\n.pure-button-group .pure-button:first-child {\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n}\n.pure-button-group .pure-button:last-child {\n    border-top-right-radius: 2px;\n    border-bottom-right-radius: 2px;\n    border-right: none;\n}\n"
  },
  {
    "path": "src/buttons/tests/manual/button.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\">\n    <title>Buttons Tests</title>\n\n    <link rel=\"stylesheet\" href=\"../../../../build/base.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/buttons.css\">\n    <link rel=\"stylesheet\" href=\"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css\">\n    <link rel=\"stylesheet\" href=\"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome-ie7.css\">\n    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>\n\n    <style>\n        .pure-button-green {\n            text-transform: uppercase;\n            font-weight:bold;\n            color: white;\n            padding: 0.8em 2.5em;\n            background-color: #16bb51;\n            border-radius: 6px;\n            text-shadow: 0 1px 1px rgb(22, 116, 29);\n        }\n\n        .pure-button-red {\n            background: red;\n            text-transform: uppercase;\n            color: white;\n            font-weight: bold;\n            text-shadow: 1px 1px 1px rgb(170, 46, 23);\n            border: 3px solid rgb(131, 2, 2);\n            border-radius: 20px;\n        }\n\n        .pure-button-yellow {\n            background: rgb(255, 236, 15);\n            color: rgb(146, 128, 32);\n            border: 1px solid rgb(201, 189, 52);\n            text-shadow: -1px 1px 1px white;\n        }\n\n        .pure-button-wedding:hover,\n        .pure-button-wedding:focus {\n            background-color: #555;\n            color: #eee;\n        }\n        .pure-button-wedding:active {\n            background-color: #222;\n            color: #fff;\n            box-shadow: none;\n        }\n\n        .custom-fonts {\n            font-family: 'Open Sans', sans-serif;\n        }\n    </style>\n</head>\n\n<body>\n    <h1>Buttons Tests</h1>\n\n    <h2>Regular Buttons</h2>\n    <p>\n        <button class=\"pure-button\">A Regular Button</button>\n        <a class=\"pure-button\" href=\"#\">An anchor Button</a>\n    </p>\n\n    <h2>Disabled Buttons</h2>\n    <p>\n        <button class=\"pure-button pure-button-disabled\" disabled>A Regular Button</button>\n        <a class=\"pure-button pure-button-disabled\" href=\"#\">An anchor Button</a>\n    </p>\n\n    <h2>Active Buttons</h2>\n    <p>\n        <button class=\"pure-button pure-button-active\">A Regular Button</button>\n        <a class=\"pure-button pure-button-active\" href=\"#\">An anchor Button</a>\n    </p>\n\n    <h2>Primary/Selected Buttons</h2>\n    <p>\n        <button class=\"pure-button pure-button-primary\">A Regular Button</button>\n        <a class=\"pure-button pure-button-primary\" href=\"#\">An anchor Button</a>\n    </p>\n\n    <h2>Customizing Buttons</h2>\n    <p>\n        <button class=\"pure-button pure-button-green\">A Custom Button</button>\n        <a class=\"pure-button pure-button-green\" href=\"#\">An anchor Button</a>\n    </p>\n    <p>\n        <button class=\"pure-button pure-button-red\">Another custom Button</button>\n        <a class=\"pure-button pure-button-red\" href=\"#\">Custom Button</a>\n    </p>\n    <p>\n        <button class=\"pure-button pure-button-yellow\">Another custom Button</button>\n        <a class=\"pure-button pure-button-yellow\" href=\"#\">Custom Button</a>\n    </p>\n\n    <p>\n        <button class=\"pure-button pure-button-wedding\">\n            <i class=\"fa fa-film\"></i>\n            Start Playing Movie\n        </button>\n\n        <a class=\"pure-button pure-button-wedding\" href=\"#\">\n            <i class=\"fa fa-film\"></i>\n            Start Playing Movie\n        </a>\n    </p>\n\n    <h2>Primary Form Buttons</h2>\n    <p>\n        <a class=\"pure-button pure-button-primary\" href=\"#\">Anchor</a>\n        <button class=\"pure-button pure-button-primary\">Button</button>\n        <input type=\"submit\" class=\"pure-button pure-button-primary\" value=\"Submit\">\n        <input type=\"button\" class=\"pure-button pure-button-primary\" value=\"Input Button\">\n        <input type=\"reset\" class=\"pure-button pure-button-primary\" value=\"Reset\">\n    </p>\n\n    <h2>Primary Form Buttons (Custom Fonts)</h2>\n    <p class=\"custom-fonts\">\n        <a class=\"pure-button pure-button-primary\" href=\"#\">Anchor</a>\n        <button class=\"pure-button pure-button-primary\">Button</button>\n        <input type=\"submit\" class=\"pure-button pure-button-primary\" value=\"Submit\">\n        <input type=\"button\" class=\"pure-button pure-button-primary\" value=\"Input Button\">\n        <input type=\"reset\" class=\"pure-button pure-button-primary\" value=\"Reset\">\n    </p>\n\n    <h2>Button Groups</h2>\n    <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n    </p>\n    <div class=\"pure-button-group\">\n        <input type=\"submit\" class=\"pure-button pure-button-primary\" value=\"Submit\">\n        <input type=\"button\" class=\"pure-button pure-button-primary\" value=\"Input Button\">\n        <input type=\"reset\" class=\"pure-button pure-button-primary\" value=\"Reset\">\n    </div>\n    <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n    </p>\n    <div class=\"pure-button-group\">\n        <a href=\"#\" class=\"pure-button pure-button-primary\" value=\"Submit\">Testing</a>\n        <a href=\"#\" class=\"pure-button pure-button-primary\" value=\"Input Button\">Button</a>\n        <a href=\"#\" class=\"pure-button pure-button-primary pure-button-active\" value=\"Reset\">Groups</a>\n    </div>\n    <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n    </p>\n    <div class=\"pure-button-group\">\n        <button class=\"pure-button\">Lorem</button>\n        <button class=\"pure-button pure-button-active\">Ipsum</button>\n        <button class=\"pure-button\">Dolor</button>\n    </div>\n    <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n    </p>\n\n</body>\n</html>\n"
  },
  {
    "path": "src/forms/css/forms-r.css",
    "content": "@media only screen and (max-width : 480px) {\n    .pure-form button[type=\"submit\"] {\n        margin: 0.7em 0 0;\n    }\n\n    .pure-form input:not([type]),\n    .pure-form input[type=\"text\"],\n    .pure-form input[type=\"password\"],\n    .pure-form input[type=\"email\"],\n    .pure-form input[type=\"url\"],\n    .pure-form input[type=\"date\"],\n    .pure-form input[type=\"month\"],\n    .pure-form input[type=\"time\"],\n    .pure-form input[type=\"datetime\"],\n    .pure-form input[type=\"datetime-local\"],\n    .pure-form input[type=\"week\"],\n    .pure-form input[type=\"number\"],\n    .pure-form input[type=\"search\"],\n    .pure-form input[type=\"tel\"],\n    .pure-form input[type=\"color\"],\n    .pure-form label {\n        margin-bottom: 0.3em;\n        display: block;\n    }\n\n    .pure-group input:not([type]),\n    .pure-group input[type=\"text\"],\n    .pure-group input[type=\"password\"],\n    .pure-group input[type=\"email\"],\n    .pure-group input[type=\"url\"],\n    .pure-group input[type=\"date\"],\n    .pure-group input[type=\"month\"],\n    .pure-group input[type=\"time\"],\n    .pure-group input[type=\"datetime\"],\n    .pure-group input[type=\"datetime-local\"],\n    .pure-group input[type=\"week\"],\n    .pure-group input[type=\"number\"],\n    .pure-group input[type=\"search\"],\n    .pure-group input[type=\"tel\"],\n    .pure-group input[type=\"color\"] {\n        margin-bottom: 0;\n    }\n\n    .pure-form-aligned .pure-control-group label {\n        margin-bottom: 0.3em;\n        text-align: left;\n        display: block;\n        width: 100%;\n    }\n\n    .pure-form-aligned .pure-controls {\n        margin: 1.5em 0 0 0;\n    }\n\n    .pure-form-message-inline,\n    .pure-form-message {\n        display: block;\n        font-size: 0.75em;\n        /* Increased bottom padding to make it group with its related input element. */\n        padding: 0.2em 0 0.8em;\n    }\n}\n"
  },
  {
    "path": "src/forms/css/forms.css",
    "content": "/*csslint box-model:false*/\n/*\nBox-model set to false because we're setting a height on select elements, which\nalso have border and padding. This is done because some browsers don't render\nthe padding. We explicitly set the box-model for select elements to border-box,\nso we can ignore the csslint warning.\n*/\n\n.pure-form input[type=\"text\"],\n.pure-form input[type=\"password\"],\n.pure-form input[type=\"email\"],\n.pure-form input[type=\"url\"],\n.pure-form input[type=\"date\"],\n.pure-form input[type=\"month\"],\n.pure-form input[type=\"time\"],\n.pure-form input[type=\"datetime\"],\n.pure-form input[type=\"datetime-local\"],\n.pure-form input[type=\"week\"],\n.pure-form input[type=\"number\"],\n.pure-form input[type=\"search\"],\n.pure-form input[type=\"tel\"],\n.pure-form input[type=\"color\"],\n.pure-form select,\n.pure-form textarea {\n    padding: 0.5em 0.6em;\n    display: inline-block;\n    border: 1px solid #ccc;\n    box-shadow: inset 0 1px 3px #ddd;\n    border-radius: 4px;\n    vertical-align: middle;\n    box-sizing: border-box;\n}\n\n/*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n.pure-form input:not([type]) {\n    padding: 0.5em 0.6em;\n    display: inline-block;\n    border: 1px solid #ccc;\n    box-shadow: inset 0 1px 3px #ddd;\n    border-radius: 4px;\n    box-sizing: border-box;\n}\n\n\n/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */\n/* May be able to remove this tweak as color inputs become more standardized across browsers. */\n.pure-form input[type=\"color\"] {\n    padding: 0.2em 0.5em;\n}\n\n\n.pure-form input[type=\"text\"]:focus,\n.pure-form input[type=\"password\"]:focus,\n.pure-form input[type=\"email\"]:focus,\n.pure-form input[type=\"url\"]:focus,\n.pure-form input[type=\"date\"]:focus,\n.pure-form input[type=\"month\"]:focus,\n.pure-form input[type=\"time\"]:focus,\n.pure-form input[type=\"datetime\"]:focus,\n.pure-form input[type=\"datetime-local\"]:focus,\n.pure-form input[type=\"week\"]:focus,\n.pure-form input[type=\"number\"]:focus,\n.pure-form input[type=\"search\"]:focus,\n.pure-form input[type=\"tel\"]:focus,\n.pure-form input[type=\"color\"]:focus,\n.pure-form select:focus,\n.pure-form textarea:focus {\n    outline: 0;\n    border-color: #129FEA;\n}\n\n/*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n.pure-form input:not([type]):focus {\n    outline: 0;\n    border-color: #129FEA;\n}\n\n.pure-form input[type=\"file\"]:focus,\n.pure-form input[type=\"radio\"]:focus,\n.pure-form input[type=\"checkbox\"]:focus {\n    outline: thin solid #129FEA;\n    outline: 1px auto #129FEA;\n}\n.pure-form .pure-checkbox,\n.pure-form .pure-radio {\n    margin: 0.5em 0;\n    display: block;\n}\n\n.pure-form input[type=\"text\"][disabled],\n.pure-form input[type=\"password\"][disabled],\n.pure-form input[type=\"email\"][disabled],\n.pure-form input[type=\"url\"][disabled],\n.pure-form input[type=\"date\"][disabled],\n.pure-form input[type=\"month\"][disabled],\n.pure-form input[type=\"time\"][disabled],\n.pure-form input[type=\"datetime\"][disabled],\n.pure-form input[type=\"datetime-local\"][disabled],\n.pure-form input[type=\"week\"][disabled],\n.pure-form input[type=\"number\"][disabled],\n.pure-form input[type=\"search\"][disabled],\n.pure-form input[type=\"tel\"][disabled],\n.pure-form input[type=\"color\"][disabled],\n.pure-form select[disabled],\n.pure-form textarea[disabled] {\n    cursor: not-allowed;\n    background-color: #eaeded;\n    color: #cad2d3;\n}\n\n/*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n.pure-form input:not([type])[disabled] {\n    cursor: not-allowed;\n    background-color: #eaeded;\n    color: #cad2d3;\n}\n.pure-form input[readonly],\n.pure-form select[readonly],\n.pure-form textarea[readonly] {\n    background-color: #eee; /* menu hover bg color */\n    color: #777; /* menu text color */\n    border-color: #ccc;\n}\n\n.pure-form input:focus:invalid,\n.pure-form textarea:focus:invalid,\n.pure-form select:focus:invalid {\n    color: #b94a48;\n    border-color: #e9322d;\n}\n.pure-form input[type=\"file\"]:focus:invalid:focus,\n.pure-form input[type=\"radio\"]:focus:invalid:focus,\n.pure-form input[type=\"checkbox\"]:focus:invalid:focus {\n    outline-color: #e9322d;\n}\n.pure-form select {\n    /* Normalizes the height; padding is not sufficient. */\n    height: 2.25em;\n    border: 1px solid #ccc;\n    background-color: white;\n}\n.pure-form select[multiple] {\n    height: auto;\n}\n.pure-form label {\n    margin: 0.5em 0 0.2em;\n}\n.pure-form fieldset {\n    margin: 0;\n    padding: 0.35em 0 0.75em;\n    border: 0;\n}\n.pure-form legend {\n    display: block;\n    width: 100%;\n    padding: 0.3em 0;\n    margin-bottom: 0.3em;\n    color: #333;\n    border-bottom: 1px solid #e5e5e5;\n}\n\n.pure-form-stacked input[type=\"text\"],\n.pure-form-stacked input[type=\"password\"],\n.pure-form-stacked input[type=\"email\"],\n.pure-form-stacked input[type=\"url\"],\n.pure-form-stacked input[type=\"date\"],\n.pure-form-stacked input[type=\"month\"],\n.pure-form-stacked input[type=\"time\"],\n.pure-form-stacked input[type=\"datetime\"],\n.pure-form-stacked input[type=\"datetime-local\"],\n.pure-form-stacked input[type=\"week\"],\n.pure-form-stacked input[type=\"number\"],\n.pure-form-stacked input[type=\"search\"],\n.pure-form-stacked input[type=\"tel\"],\n.pure-form-stacked input[type=\"color\"],\n.pure-form-stacked input[type=\"file\"],\n.pure-form-stacked select,\n.pure-form-stacked label,\n.pure-form-stacked textarea {\n    display: block;\n    margin: 0.25em 0;\n}\n\n/*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n.pure-form-stacked input:not([type]) {\n    display: block;\n    margin: 0.25em 0;\n}\n.pure-form-aligned input,\n.pure-form-aligned textarea,\n.pure-form-aligned select,\n.pure-form-message-inline {\n    display: inline-block;\n    vertical-align: middle;\n}\n.pure-form-aligned textarea {\n    vertical-align: top;\n}\n\n/* Aligned Forms */\n.pure-form-aligned .pure-control-group {\n    margin-bottom: 0.5em;\n}\n.pure-form-aligned .pure-control-group label {\n    text-align: right;\n    display: inline-block;\n    vertical-align: middle;\n    width: 10em;\n    margin: 0 1em 0 0;\n}\n.pure-form-aligned .pure-controls {\n    margin: 1.5em 0 0 11em;\n}\n\n/* Rounded Inputs */\n.pure-form input.pure-input-rounded,\n.pure-form .pure-input-rounded {\n    border-radius: 2em;\n    padding: 0.5em 1em;\n}\n\n/* Grouped Inputs */\n.pure-form .pure-group fieldset {\n    margin-bottom: 10px;\n}\n.pure-form .pure-group input,\n.pure-form .pure-group textarea {\n    display: block;\n    padding: 10px;\n    margin: 0 0 -1px;\n    border-radius: 0;\n    position: relative;\n    top: -1px;\n}\n.pure-form .pure-group input:focus,\n.pure-form .pure-group textarea:focus {\n    z-index: 3;\n}\n.pure-form .pure-group input:first-child,\n.pure-form .pure-group textarea:first-child {\n    top: 1px;\n    border-radius: 4px 4px 0 0;\n    margin: 0;\n}\n.pure-form .pure-group input:first-child:last-child,\n.pure-form .pure-group textarea:first-child:last-child {\n    top: 1px;\n    border-radius: 4px;\n    margin: 0;\n}\n.pure-form .pure-group input:last-child,\n.pure-form .pure-group textarea:last-child {\n    top: -2px;\n    border-radius: 0 0 4px 4px;\n    margin: 0;\n}\n.pure-form .pure-group button {\n    margin: 0.35em 0;\n}\n\n.pure-form .pure-input-1 {\n    width: 100%;\n}\n.pure-form .pure-input-3-4 {\n    width: 75%;\n}\n.pure-form .pure-input-2-3 {\n    width: 66%;\n}\n.pure-form .pure-input-1-2 {\n    width: 50%;\n}\n.pure-form .pure-input-1-3 {\n    width: 33%;\n}\n.pure-form .pure-input-1-4 {\n    width: 25%;\n}\n\n/* Inline help for forms */\n.pure-form-message-inline {\n    display: inline-block;\n    padding-left: 0.3em;\n    color: #666;\n    vertical-align: middle;\n    font-size: 0.875em;\n}\n\n/* Block help for forms */\n.pure-form-message {\n    display: block;\n    color: #666;\n    font-size: 0.875em;\n}\n"
  },
  {
    "path": "src/forms/tests/manual/forms.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <title>Forms Tests</title>\n\n    <link rel=\"stylesheet\" href=\"../../../../build/base.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/grids.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/grids-responsive.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/buttons.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/forms.css\">\n</head>\n\n<body>\n    <h1>Forms Tests</h1>\n\n    <h2>Input normalization</h2>\n\n    <form class=\"pure-form\">\n        <fieldset>\n            <legend>An inline form. Check for alignment and input/select sizing.</legend>\n\n            <input type=\"text\" placeholder=\"text input\">\n            <input type=\"search\" placeholder=\"search input\">\n            <select name=\"fooselect\">\n                <option value=\"CA\">CA</option>\n                <option value=\"NY\">NY</option>\n            <select>\n\n\n            <button type=\"submit\" class=\"pure-button\">Sign in</button>\n        </fieldset>\n    </form>\n\n    <h2>Default Form</h2>\n\n    <form class=\"pure-form\">\n        <fieldset>\n            <legend>A default inline form.</legend>\n\n            <input type=\"text\" placeholder=\"Email\">\n            <input type=\"password\" placeholder=\"Password\">\n\n            <label>\n                <input type=\"checkbox\"> Remember me\n            </label>\n\n            <button type=\"submit\" class=\"pure-button\">Sign in</button>\n        </fieldset>\n    </form>\n\n\n    <h2>Multi-Column Form with Grids</h2>\n\n    <form class=\"pure-form pure-form-stacked\">\n        <fieldset>\n            <legend>Legend</legend>\n\n            <div class=\"pure-g\">\n                <div class=\"pure-u-1 pure-u-md-1-3\">\n                    <label>First Name</label>\n                    <input type=\"text\">\n                </div>\n                <div class=\"pure-u-1 pure-u-md-1-3\">\n                    <label>Password</label>\n                    <input type=\"password\">\n                </div>\n                <div class=\"pure-u-1 pure-u-md-1-3\">\n                    <label>E-Mail</label>\n                    <input type=\"email\" required>\n                </div>\n                <div class=\"pure-u-1 pure-u-md-1-3\">\n                    <label>City</label>\n                    <input type=\"text\">\n                </div>\n                <div class=\"pure-u-1 pure-u-md-1-3\">\n                    <label>State</label>\n                    <select class=\"pure-input-medium\">\n                        <option>AL</option>\n                        <option>CA</option>\n                        <option>IL</option>\n                        <option>MD</option>\n                        <option>NY</option>\n                    </select>\n                </div>\n            </div>\n\n            <label class=\"pure-checkbox\">\n                <input type=\"checkbox\"> I've read the terms and conditions\n            </label>\n\n            <button type=\"submit\" class=\"pure-button\">Submit</button>\n            <button type=\"reset\" class=\"pure-button\">Reset</button>\n        </fieldset>\n    </form>\n\n\n    <h2>Stacked Form</h2>\n\n    <form class=\"pure-form pure-form-stacked\">\n        <fieldset>\n            <legend>Legend</legend>\n\n            <label>First Name</label>\n            <input type=\"text\">\n\n            <label>Password</label>\n            <input type=\"password\">\n\n            <label>E-Mail</label>\n            <input type=\"email\" required>\n            <aside class=\"pure-form-message-inline\">This is a required field.</aside>\n\n            <label>City</label>\n            <input type=\"text\">\n            <aside class=\"pure-form-message\">This is another required field.</aside>\n\n            <label>State</label>\n            <select class=\"pure-input-medium\">\n                <option>AL</option>\n                <option>CA</option>\n                <option>IL</option>\n                <option>MD</option>\n                <option>NY</option>\n            </select>\n\n            <label>Color</label>\n            <input type=\"color\">\n\n            <label class=\"pure-checkbox\">\n                <input type=\"checkbox\"> I've read the terms and conditions\n            </label>\n\n            <button type=\"submit\" class=\"pure-button notice\">Submit</button>\n            <button type=\"reset\" class=\"pure-button\">Reset</button>\n        </fieldset>\n    </form>\n\n\n    <h2>Aligned Form</h2>\n\n    <form class=\"pure-form pure-form-aligned\">\n        <fieldset>\n            <div class=\"pure-control-group\">\n                <label>Username</label>\n                <input type=\"text\" placeholder=\"Username\">\n                <aside class=\"pure-form-message-inline\">This is a <code>pure-form-message-inline</code> field.</aside>\n            </div>\n\n            <div class=\"pure-control-group\">\n                <label>Password</label>\n                <input type=\"password\" placeholder=\"Password\">\n                <aside class=\"pure-form-message-inline\">This is a <code>pure-form-message-inline</code> field.</aside>\n            </div>\n\n            <div class=\"pure-control-group\">\n                <label>Email Address</label>\n                <input type=\"text\" placeholder=\"Email Address\">\n            </div>\n\n            <div class=\"pure-control-group\">\n                <label>Here's a button</label>\n                <input type=\"button\" value=\"Button\" class=\"pure-button\">\n            </div>\n\n            <div class=\"pure-control-group\">\n                <label>Supercalifragilistic Label</label>\n                <input type=\"text\" placeholder=\"Enter something here...\">\n            </div>\n\n            <div class=\"pure-controls\">\n                <label class=\"pure-checkbox\">\n                    <input type=\"checkbox\"> Remember Me\n                </label>\n\n                <button type=\"submit\" class=\"pure-button\">Submit</button>\n            </div>\n        </fieldset>\n    </form>\n\n\n    <h2>Grouped Inputs</h2>\n\n    <form class=\"pure-form\">\n        <fieldset class=\"pure-group\">\n            <input type=\"text\" class=\"pure-input-1-3\" placeholder=\"Username\">\n            <input type=\"text\" class=\"pure-input-1-3\" placeholder=\"Password\">\n            <input type=\"text\" class=\"pure-input-1-3\" placeholder=\"Email\">\n        </fieldset>\n\n        <fieldset class=\"pure-group\">\n            <input type=\"text\" class=\"pure-input-1-3\" placeholder=\"Another Group\">\n            <textarea class=\"pure-input-1-3\" placeholder=\"Textareas can work here too\"></textarea>\n            <input type=\"text\" class=\"pure-input-1-3\" placeholder=\"Even More Stuff\">\n            <input type=\"text\" class=\"pure-input-1-3\" placeholder=\"Last Item\">\n        </fieldset>\n        <button type=\"submit\" class=\"pure-button pure-input-1-3\">Sign in</button>\n    </form>\n\n\n    <h2>Dynamic Grouped Inputs</h2>\n\n    <form class=\"pure-form\" onsubmit=\"return false\">\n        <script type=\"text/javascript\">\n        function testDynamicGroupAdd() {\n            var g = document.getElementById('test-dynamic-group'),\n                newNode = g.getElementsByTagName(\"input\")[0].cloneNode();\n\n            g.appendChild(newNode);\n        }\n        function testDynamicGroupRemove() {\n            var g = document.getElementById('test-dynamic-group'),\n                nodeCount = g.getElementsByTagName(\"input\").length;\n\n            if (nodeCount > 1) {\n                g.removeChild(g.lastChild);\n            }\n        }\n        </script>\n\n        <fieldset class=\"pure-group\">\n            <button type=\"submit\" class=\"pure-button\" onclick=\"testDynamicGroupAdd()\">Add field</button>\n            <button type=\"submit\" class=\"pure-button\" onclick=\"testDynamicGroupRemove()\">Remove field</button>\n        </fieldset>\n\n        <fieldset class=\"pure-group\" id=\"test-dynamic-group\">\n            <input type=\"text\" class=\"pure-input-1-3\" placeholder=\"Add or remove fields to test\">\n        </fieldset>\n    </form>\n\n\n    <h2>Input Sizing</h2>\n\n    <form class=\"pure-form\">\n        <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-input-1\"><br/>\n        <input class=\"pure-input-3-4\" type=\"text\" placeholder=\".pure-input-3-4\"><br/>\n        <input class=\"pure-input-2-3\" type=\"text\" placeholder=\".pure-input-2-3\"><br/>\n        <input class=\"pure-input-1-2\" type=\"text\" placeholder=\".pure-input-1-2\"><br/>\n        <input class=\"pure-input-1-3\" type=\"text\" placeholder=\".pure-input-1-3\"><br/>\n        <input class=\"pure-input-1-4\" type=\"text\" placeholder=\".pure-input-1-4\"><br/>\n    </form>\n\n\n    <form class=\"pure-form\">\n        <div class=\"pure-g\">\n            <div class=\"pure-u-1-4\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-4\">\n            </div>\n\n            <div class=\"pure-u-3-4\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-3-4\">\n            </div>\n        </div>\n\n        <div class=\"pure-g\">\n            <div class=\"pure-u-1-2\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-2\">\n            </div>\n\n            <div class=\"pure-u-1-2\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-2\">\n            </div>\n        </div>\n\n        <div class=\"pure-g\">\n            <div class=\"pure-u-1-8\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-8\">\n            </div>\n\n            <div class=\"pure-u-1-8\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-8\">\n            </div>\n\n            <div class=\"pure-u-1-4\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-4\">\n            </div>\n\n            <div class=\"pure-u-1-2\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-2\">\n            </div>\n        </div>\n\n        <div class=\"pure-g\">\n            <div class=\"pure-u-1-5\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1-5\">\n            </div>\n\n            <div class=\"pure-u-2-5\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-2-5\">\n            </div>\n\n            <div class=\"pure-u-2-5\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-2-5\">\n            </div>\n\n            <div class=\"pure-u-1\">\n                <input class=\"pure-input-1\" type=\"text\" placeholder=\".pure-u-1\">\n            </div>\n        </div>\n    </form>\n\n\n    <h2>Invalid Inputs</h2>\n\n    <form class=\"pure-form\">\n        <input type=\"email\" placeholder=\"Requires an email\" required>\n    </form>\n\n\n    <h2>Disabled Inputs</h2>\n\n    <form class=\"pure-form\">\n        <input class=\"pure-input-xlarge\" type=\"text\" placeholder=\"Disabled input here...\" value=\"Foo bar baz\" disabled>\n    </form>\n\n\n    <h2>Readonly Inputs</h2>\n\n    <form class=\"pure-form\">\n        <input class=\"pure-input-xlarge\" type=\"text\" placeholder=\"Readonly input here...\" value=\"Foo bar baz\" readonly>\n    </form>\n\n\n    <h2>Rounded Form</h2>\n\n    <form class=\"pure-form pure-form-stacked\">\n        <label>Subject</label>\n        <input type=\"text\" class=\"pure-input-rounded\" placeholder=\"Subject\" />\n\n        <label>Message</label>\n        <textarea class=\"pure-input-rounded\" rows=\"5\" cols=\"40\" placeholder=\"Message...\"></textarea>\n\n        <button type=\"submit\" class=\"pure-button pure-input-rounded\">Search</button>\n        <input type=\"reset\" class=\"pure-button pure-input-rounded\" value=\"Reset\" />\n    </form>\n\n\n    <h2>Selects</h2>\n\n    <form class=\"pure-form\">\n        <select class=\"pure-input-medium\">\n            <option>Brazil</option>\n            <option>Canada</option>\n            <option>United States</option>\n            <option>United Kingdom</option>\n            <option>Venezuela</option>\n        </select>\n\n        <select multiple=\"multiple\" class=\"pure-input-large\">\n            <option>Brazil</option>\n            <option>Canada</option>\n            <option>United States</option>\n            <option>United Kingdom</option>\n            <option>Venezuela</option>\n        </select>\n    </form>\n\n\n    <h2>Checkboxes and Radios</h2>\n\n    <form class=\"pure-form\">\n        <label class=\"pure-checkbox\">\n            <input type=\"checkbox\" value=\"\">\n            Here's option one.\n        </label>\n\n        <label class=\"pure-radio\">\n            <input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios1\" value=\"option1\" checked>\n            Here's a radio button. You can choose this one...\n        </label>\n\n        <label class=\"pure-radio\">\n            <input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios2\" value=\"option2\">\n            ...Or this one!\n        </label>\n    </form>\n\n\n    <h2>Help text</h2>\n\n    <form class=\"pure-form pure-form-stacked\">\n        <fieldset>\n            <label>Last Name</label>\n            <input type=\"text\" />\n            <aside class=\"pure-form-message\">Block help text</aside>\n        </fieldset>\n    </form>\n\n\n    <h2>Buttons</h2>\n\n    <form class=\"pure-form\">\n        <a class=\"pure-button pure-button-primary\">Anchor</a>\n        <button class=\"pure-button pure-button-primary\">Button</button>\n        <input type=\"submit\" class=\"pure-button pure-button-primary\" value=\"Submit\" />\n        <input type=\"button\" class=\"pure-button pure-button-primary\" value=\"Input Button\" />\n        <input type=\"reset\" class=\"pure-button pure-button-primary\" value=\"Reset\" />\n    </form>\n</body>\n</html>\n"
  },
  {
    "path": "src/grids/README.md",
    "content": "Pure Grids\n==========\n\nPure Grids ship with build-in 5ths- and 24ths-based units styles. The unit style\nrules are generated via Pure's [`rework-pure-grids`][rework-pure-grids]\n[Rework][] plugin.\n\nThe tooling used by Pure to generate its built-in Grids can also be used to\ncreate custom Grids that use any nth-unit base.\n\n\n[rework-pure-grids]: https://github.com/ericf/rework-pure-grids\n[Rework]: https://github.com/visionmedia/rework\n"
  },
  {
    "path": "src/grids/css/grids-core.css",
    "content": "/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/\n\n.pure-g {\n    display: flex;\n    flex-flow: row wrap;\n\n    /* Prevents distributing space between rows */\n    align-content: flex-start;\n}\n\n.pure-u {\n    display: inline-block;\n    vertical-align: top;\n}\n"
  },
  {
    "path": "src/grids/tests/manual/responsive.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Responsive Grids Tests</title>\n\n    <link rel=\"stylesheet\" href=\"../../../../build/base.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/grids.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/grids-responsive.css\">\n\n    <style>\n        .content {\n            text-align: center;\n            border: 1px solid #999;\n            margin: 10px;\n            padding: 5px;\n            font-family: \"Lucida Console\", Monaco, monospace;\n        }\n\n        .serif,\n        .serif .content {\n            font-family: Georgia, Times, \"Times New Roman\", serif;\n        }\n\n        .monospace,\n        .monospace .content {\n            font-family: \"Courier New\", Courier, monospace;\n        }\n    </style>\n</head>\n\n<body>\n    <h1>Grids Tests</h1>\n\n    <h2>Base Grid</h2>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-2\">\n            <div class=\"content\">1/2</div>\n        </div>\n        <div class=\"pure-u-1-2\">\n            <div class=\"content\">1/2</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-3-4\">\n            <div class=\"content\">3/4</div>\n        </div>\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-3\">\n            <div class=\"content\">1/3</div>\n        </div>\n        <div class=\"pure-u-1-3\">\n            <div class=\"content\">1/3</div>\n        </div>\n        <div class=\"pure-u-1-3\">\n            <div class=\"content\">1/3</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-3\">\n            <div class=\"content\">1/3</div>\n        </div>\n        <div class=\"pure-u-2-3\">\n            <div class=\"content\">2/3</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-5\">\n            <div class=\"content\">1/5</div>\n        </div>\n        <div class=\"pure-u-2-5\">\n            <div class=\"content\">2/5</div>\n        </div>\n        <div class=\"pure-u-2-5\">\n            <div class=\"content\">2/5</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-3-5\">\n            <div class=\"content\">3/5</div>\n        </div>\n        <div class=\"pure-u-2-5\">\n            <div class=\"content\">2/5</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-6\">\n            <div class=\"content\">1/6</div>\n        </div>\n        <div class=\"pure-u-1-6\">\n            <div class=\"content\">1/6</div>\n        </div>\n        <div class=\"pure-u-1-6\">\n            <div class=\"content\">1/6</div>\n        </div>\n        <div class=\"pure-u-1-6\">\n            <div class=\"content\">1/6</div>\n        </div>\n        <div class=\"pure-u-1-6\">\n            <div class=\"content\">1/6</div>\n        </div>\n        <div class=\"pure-u-1-6\">\n            <div class=\"content\">1/6</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-6\">\n            <div class=\"content\">1/6</div>\n        </div>\n        <div class=\"pure-u-5-6\">\n            <div class=\"content\">5/6</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-8\">\n            <div class=\"content\">1/8</div>\n        </div>\n        <div class=\"pure-u-3-8\">\n            <div class=\"content\">3/8</div>\n        </div>\n        <div class=\"pure-u-3-8\">\n            <div class=\"content\">3/8</div>\n        </div>\n        <div class=\"pure-u-1-8\">\n            <div class=\"content\">1/8</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-3-8\">\n            <div class=\"content\">3/8</div>\n        </div>\n        <div class=\"pure-u-5-8\">\n            <div class=\"content\">5/8</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-7-8\">\n            <div class=\"content\">7/8</div>\n        </div>\n        <div class=\"pure-u-1-8\">\n            <div class=\"content\">1/8</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n        <div class=\"pure-u-1-2\">\n            <div class=\"content\">1/2</div>\n        </div>\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-8\">\n            <div class=\"content\">1/8</div>\n        </div>\n        <div class=\"pure-u-1-2\">\n            <div class=\"content\">1/2</div>\n        </div>\n        <div class=\"pure-u-1-8\">\n            <div class=\"content\">1/8</div>\n        </div>\n        <div class=\"pure-u-1-4\">\n            <div class=\"content\">1/4</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-12\">\n            <div class=\"content\">1/12</div>\n        </div>\n        <div class=\"pure-u-5-12\">\n            <div class=\"content\">5/12</div>\n        </div>\n        <div class=\"pure-u-1-12\">\n            <div class=\"content\">1/12</div>\n        </div>\n        <div class=\"pure-u-5-12\">\n            <div class=\"content\">5/12</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-7-12\">\n            <div class=\"content\">7/12</div>\n        </div>\n        <div class=\"pure-u-5-12\">\n            <div class=\"content\">5/12</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-12\">\n            <div class=\"content\">1/12</div>\n        </div>\n        <div class=\"pure-u-11-12\">\n            <div class=\"content\">11/12</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-24\">\n            <div class=\"content\">1/24</div>\n        </div>\n        <div class=\"pure-u-5-24\">\n            <div class=\"content\">5/24</div>\n        </div>\n        <div class=\"pure-u-7-24\">\n            <div class=\"content\">7/24</div>\n        </div>\n        <div class=\"pure-u-11-24\">\n            <div class=\"content\">11/24</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-17-24\">\n            <div class=\"content\">17/24</div>\n        </div>\n        <div class=\"pure-u-7-24\">\n            <div class=\"content\">7/24</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-19-24\">\n            <div class=\"content\">19/24</div>\n        </div>\n        <div class=\"pure-u-5-24\">\n            <div class=\"content\">5/24</div>\n        </div>\n    </div>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-24\">\n            <div class=\"content\">1/24</div>\n        </div>\n        <div class=\"pure-u-23-24\">\n            <div class=\"content\">23/24</div>\n        </div>\n    </div>\n\n\n    <h2>Custom Font and Grids</h2>\n\n    <div class=\"serif\">\n        <p>\n            Grids with a serif font stack.\n        </p>\n\n        <div class=\"pure-g\">\n            <div class=\"pure-u-1-2\">\n                <div class=\"content\">\n                    <div class=\"pure-g\">\n                        <div class=\"pure-u-1-2\">\n                            <div class=\"content\">Nested 1/2</div>\n                        </div>\n                        <div class=\"pure-u-1-2\">\n                            <div class=\"content\">Nested 1/2</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"pure-u-1-2\">\n                <div class=\"content\">\n                    <div class=\"pure-g\">\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"monospace\">\n        <p>\n            Grids with a monospace font stack.\n        </p>\n\n        <div class=\"pure-g\">\n            <div class=\"pure-u-1-2\">\n                <div class=\"content\">\n                    <div class=\"pure-g\">\n                        <div class=\"pure-u-1-2\">\n                            <div class=\"content\">Nested 1/2</div>\n                        </div>\n                        <div class=\"pure-u-1-2\">\n                            <div class=\"content\">Nested 1/2</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"pure-u-1-2\">\n                <div class=\"content\">\n                    <div class=\"pure-g\">\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                        <div class=\"pure-u-1-4\">\n                            <div class=\"content\">r1/4</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n\n    <h2>Wrapping Grids</h2>\n\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1-2\">\n            <div class=\"content\">Wrapping 1/2</div>\n        </div>\n        <div class=\"pure-u-1-2\">\n            <div class=\"content\">Wrapping 1/2</div>\n        </div>\n        <div class=\"pure-u-1-3\">\n            <div class=\"content\">Wrapping 1/3</div>\n        </div>\n    </div>\n\n    <h2>Responsive Grids</h2>\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <div class=\"content\">1 -> 1/2 -> 1/4</div>\n        </div>\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <div class=\"content\">1 -> 1/2 -> 1/4</div>\n        </div>\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <div class=\"content\">1 -> 1/2 -> 1/4</div>\n        </div>\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <div class=\"content\">1 -> 1/2 -> 1/4</div>\n        </div>\n    </div>\n\n    <h2>Nested Responsive Grids</h2>\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1 pure-u-md-1-2\">\n            <div class=\"content\">\n                <div class=\"pure-g\">\n                    <div class=\"pure-u-1 pure-u-lg-1-2\">\n                        <div class=\"content\">1 -> 1/2</div>\n                    </div>\n                    <div class=\"pure-u-1 pure-u-lg-1-2\">\n                        <div class=\"content\">1 -> 1/2</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"pure-u-1 pure-u-md-1-2\">\n            <div class=\"content\">\n                <div class=\"pure-g\">\n                    <div class=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <div class=\"content\">1/4 -> 1/8</div>\n                    </div>\n                    <div class=\"pure-u-1-4 pure-u-lg-1-8\">\n                        <div class=\"content\">1/4 -> 1/8</div>\n                    </div>\n                    <div class=\"pure-u-1-4 pure-u-lg-3-8\">\n                        <div class=\"content\">1/4 -> 3/8</div>\n                    </div>\n                    <div class=\"pure-u-1-4 pure-u-lg-3-8\">\n                        <div class=\"content\">1/4 -> 3/8</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <h2><code>.pure-img</code> Images</h2>\n    <div class=\"pure-g\">\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <img class=\"pure-img\" src=\"http://placehold.it/350x200\">\n        </div>\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <img class=\"pure-img\" src=\"http://placehold.it/350x200\">\n        </div>\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <img class=\"pure-img\" src=\"http://placehold.it/350x200\">\n        </div>\n        <div class=\"pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4\">\n            <img class=\"pure-img\" src=\"http://placehold.it/350x200\">\n        </div>\n    </div>\n\n\t<h2>Grid Inside Table</h2>\n\t<table>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<div class=\"pure-g\">\n\t\t\t\t\t<div class=\"pure-u-1-2\">\n\t\t\t\t\t\t<div class=\"content\">1/2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Vivamus pharetra eros et mattis venenatis.</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"pure-u-1-2\">\n\t\t\t\t\t\t<div class=\"content\">1/2 Nam neque sapien, lacinia non lectus non, accumsan suscipit ipsum.</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n\n</body>\n</html>\n"
  },
  {
    "path": "src/menus/css/menus-core.css",
    "content": "/*csslint adjoining-classes: false, box-model:false*/\n.pure-menu {\n    box-sizing: border-box;\n}\n\n.pure-menu-fixed {\n    position: fixed;\n    left: 0;\n    top: 0;\n    z-index: 3;\n}\n\n.pure-menu-list,\n.pure-menu-item {\n    position: relative;\n}\n\n.pure-menu-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.pure-menu-item {\n    padding: 0;\n    margin: 0;\n    height: 100%;\n}\n\n.pure-menu-link,\n.pure-menu-heading {\n    display: block;\n    text-decoration: none;\n    white-space: nowrap;\n}\n"
  },
  {
    "path": "src/menus/css/menus-dropdown.css",
    "content": "/* Submenus should still be display: block; */\n.pure-menu-item .pure-menu-item {\n    display: block;\n}\n\n.pure-menu-children {\n    display: none;\n    position: absolute;\n    left: 100%;\n    top: 0;\n    margin: 0;\n    padding: 0;\n    z-index: 3;\n}\n\n.pure-menu-horizontal .pure-menu-children {\n    left: 0;\n    top: auto;\n    width: inherit;\n}\n\n.pure-menu-allow-hover:hover > .pure-menu-children,\n.pure-menu-active > .pure-menu-children {\n    display: block;\n    position: absolute;\n}\n\n/* Vertical Menus - show the dropdown arrow */\n.pure-menu-has-children > .pure-menu-link:after {\n    padding-left: 0.5em;\n    content: \"\\25B8\";\n    font-size: small;\n}\n\n/* Horizontal Menus - show the dropdown arrow */\n.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {\n    content: \"\\25BE\";\n}\n"
  },
  {
    "path": "src/menus/css/menus-horizontal.css",
    "content": "/* HORIZONTAL MENU */\n.pure-menu-horizontal {\n    width: 100%;\n    white-space: nowrap;\n}\n\n.pure-menu-horizontal .pure-menu-list {\n    display: inline-block;\n}\n\n/* Initial menus should be inline-block so that they are horizontal */\n.pure-menu-horizontal .pure-menu-item,\n.pure-menu-horizontal .pure-menu-heading,\n.pure-menu-horizontal .pure-menu-separator {\n    display: inline-block;\n    vertical-align: middle;\n}\n"
  },
  {
    "path": "src/menus/css/menus-scrollable.css",
    "content": "/* scrollable menus */\n.pure-menu-scrollable {\n    overflow-y: scroll;\n    overflow-x: hidden;\n}\n\n.pure-menu-scrollable .pure-menu-list {\n    display: block;\n}\n\n.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {\n    display: inline-block;\n}\n\n.pure-menu-horizontal.pure-menu-scrollable {\n    white-space: nowrap;\n    overflow-y: hidden;\n    overflow-x: auto;\n    /* a little extra padding for this style to allow for scrollbars */\n    padding: .5em 0;\n}\n"
  },
  {
    "path": "src/menus/css/menus-skin.css",
    "content": "/* misc default styling */\n\n.pure-menu-separator,\n.pure-menu-horizontal .pure-menu-children .pure-menu-separator {\n    background-color: #ccc;\n    height: 1px;\n    margin: .3em 0;\n}\n\n.pure-menu-horizontal .pure-menu-separator {\n    width: 1px;\n    height: 1.3em;\n    margin: 0 .3em ;\n}\n\n/* Need to reset the separator since submenu is vertical */\n.pure-menu-horizontal .pure-menu-children .pure-menu-separator {\n    display: block;\n    width: auto;\n}\n\n.pure-menu-heading {\n    text-transform: uppercase;\n    color: #565d64;\n}\n\n.pure-menu-link {\n    color: #777;\n}\n\n.pure-menu-children {\n    background-color: #fff;\n}\n\n.pure-menu-link,\n.pure-menu-heading {\n    padding: .5em 1em;\n}\n\n.pure-menu-disabled {\n    opacity: .5;\n}\n\n.pure-menu-disabled .pure-menu-link:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.pure-menu-active > .pure-menu-link,\n.pure-menu-link:hover,\n.pure-menu-link:focus {\n    background-color: #eee;\n}\n\n.pure-menu-selected > .pure-menu-link,\n.pure-menu-selected > .pure-menu-link:visited {\n    color: #000;\n}\n"
  },
  {
    "path": "src/menus/tests/manual/menus.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset='utf-8'>\n    <meta name=\"viewport\" content=\"width = device-width\">\n    <title>Menus CSS</title>\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"../../../../build/base-min.css\">\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"../../../../build/buttons-min.css\">\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"../../../../build/menus-min.css\">\n    <script src=\"http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js\"></script>\n    <style>\n        h1 {\n            margin-top: 2em;\n            font-size: 15px;\n            font-weight: normal;\n        }\n        body {\n            padding: 2em 2em 8em;\n        }\n\n        /* Update background on menu. */\n        .menu-custom,\n        .children-custom,\n        .menu-custom .pure-menu-list {\n            background: #111;\n            padding: 0.8em;\n            border-radius: 5px;\n        }\n\n        /* Make the heading white */\n        .heading-custom {\n            color: white;\n        }\n        .heading-custom:hover {\n            background-color: transparent;\n        }\n\n        /* Make links light-gray with a transition */\n        .link-custom {\n            color: #ddd;\n            transition: color 0.5s;\n        }\n\n        /* Color links blue on hover and focus */\n        .link-custom:hover,\n        .link-custom:focus {\n            color: #40a4ff;\n            background-color: transparent;\n        }\n\n        /* Update the positioning of the toggle button\n        because we are modifying the menu's padding, and change its color. */\n        .toggle-custom {\n            margin-right: 15px;\n            color: white;\n        }\n\n        .pure-menu-custom-1 {\n            border: 1px solid #ccc;\n            border-radius: 2px;\n            min-width: 480px;\n        }\n        .pure-menu-custom-2 {\n            border: 1px solid #ccc;\n            border-radius: 2px;\n            width: 150px;\n        }\n        .pure-menu-custom-2 .pure-menu-list {\n            display: block;\n        }\n        .pure-menu-custom-2 .pure-menu-children {\n            border: 1px solid #ccc;\n            border-radius: 2px;\n            width: 170px;\n            box-shadow: 0 6px 12px rgba(0,0,0,.175);\n        }\n        .pure-menu-custom-3 {\n            border: 1px solid #ccc;\n            border-radius: 7px;\n            width: 180px;\n            height: 150px;\n        }\n        .pure-menu-custom-3 .pure-menu-list {\n            display: block;\n        }\n    </style>\n</head>\n<body>\n\n    <h1>plain div.pure-menu.pure-menu-horizontal</h1>\n    <div class=\"pure-menu pure-menu-horizontal\">\n        <a href=\"#\" class=\"pure-menu-link pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Blog</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n        </ul>\n    </div>\n\n    <h1>div.pure-menu.pure-menu-horizontal.pure-menu-custom-1</h1>\n    <div class=\"pure-menu pure-menu-horizontal pure-menu-custom-1\">\n        <a href=\"#\" class=\"pure-menu-link pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-separator\"></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Blog</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n        </ul>\n    </div>\n\n    <h1>div.pure-menu.pure-menu-custom-2</h1>\n    <div class=\"pure-menu pure-menu-custom-2\">\n        <a href=\"#\" class=\"pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-separator\"></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Blog</a></li>\n            <li class=\"pure-menu-separator\"></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n        </ul>\n    </div>\n\n    <h1>plain div.pure-menu, with nested children. Note that with no width set, it's funky, but using inline-block would not be desirable for most cases.</h1>\n    <div class=\"pure-menu\">\n        <a href=\"#\" class=\"pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item pure-menu-has-children\">\n                <a href=\"#\" class=\"pure-menu-link\">Blog</a>\n                <ul class=\"pure-menu-children\">\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/handlebars\">Handlebars Helpers</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/dust\">Dust Helpers</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/react\">React Mixins</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/javascript\">Intl Message Format</a></li>\n                </ul>\n            </li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n        </ul>\n    </div>\n\n    <h1>div.pure-menu.pure-menu-custom-2, with nested children. Here, a width is set. Sub-sub menu functionality demonstrated as well.</h1>\n    <div class=\"pure-menu pure-menu-custom-2\">\n        <a href=\"#\" class=\"pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item pure-menu-has-children\">\n                <a href=\"#\" class=\"pure-menu-link\">Blog</a>\n                <ul class=\"pure-menu-children\">\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/handlebars\">Handlebars Helpers</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/dust\">Dust Helpers</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/react\">React Mixins</a></li>\n                    <li class=\"pure-menu-item pure-menu-has-children\">\n                        <a href=\"#\" class=\"pure-menu-link\">More Stuff</a>\n                        <ul class=\"pure-menu-children\">\n                            <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/handlebars\">Foo</a></li>\n                            <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/dust\">Bar</a></li>\n                            <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/react\">Baz</a></li>\n                        </ul>\n                    </li>\n                </ul>\n            </li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n        </ul>\n    </div>\n\n    <h1>div.pure-menu.pure-menu-custom-2, with nested children. Here, a width is set to limit the menu width.\n        The .pure-menu-allow-hover class is in play as well, no click required to display a submenu.</h1>\n    <div class=\"pure-menu pure-menu-custom-2\">\n        <a href=\"#\" class=\"pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item pure-menu-has-children pure-menu-allow-hover\">\n                <a href=\"#\" class=\"pure-menu-link\">Blog</a>\n                <ul class=\"pure-menu-children\">\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/handlebars\">Handlebars Helpers</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/dust\">Dust Helpers</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/react\">React Mixins</a></li>\n                    <li class=\"pure-menu-item pure-menu-has-children pure-menu-allow-hover\">\n                        <a href=\"#\" class=\"pure-menu-link\">More Stuff</a>\n                        <ul class=\"pure-menu-children\">\n                            <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/handlebars\">Foo</a></li>\n                            <li class=\"pure-menu-separator\"></li>\n                            <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/dust\">Bar</a></li>\n                            <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/react\">Baz</a></li>\n                        </ul>\n                    </li>\n                </ul>\n            </li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n        </ul>\n    </div>\n\n    <h1>div.pure-menu.pure-menu-horizontal with nested dropdown and separator</h1>\n    <div class=\"pure-menu pure-menu-horizontal\">\n        <a href=\"#\" class=\"pure-menu-link pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Blog</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Wang</a></li>\n            <li class=\"pure-menu-item pure-menu-has-children pure-menu-allow-hover\">\n                <a href=\"#\" class=\"pure-menu-link\">Yahoo</a>\n                <ul class=\"pure-menu-children\">\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/handlebars\">Foo</a></li>\n                    <li class=\"pure-menu-separator\"></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/dust\">Bar</a></li>\n                    <li class=\"pure-menu-item\"><a class=\"pure-menu-link\" href=\"/react\">Baz</a></li>\n                </ul>\n            </li>\n        </ul>\n    </div>\n\n\n    <h1>div.pure-menu.pure-menu-horizontal.pure-menu-scrollable</h1>\n    <div class=\"pure-menu pure-menu-horizontal pure-menu-scrollable\">\n        <a href=\"#\" class=\"pure-menu-link pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Blog</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Google</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Apple</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Borland</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Wang</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Yahoo</a></li>\n        </ul>\n    </div>\n\n    <h1>div.pure-menu.pure-menu-scrollable.pure-menu-custom-3</h1>\n    <div class=\"pure-menu pure-menu-scrollable pure-menu-custom-3\">\n        <a href=\"#\" class=\"pure-menu-link pure-menu-heading\">Title</a>\n        <ul class=\"pure-menu-list\">\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Blog</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Twitter</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Google</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Apple</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Borland</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Wang</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Yahoo</a></li>\n        </ul>\n    </div>\n\n    <h1>div.pure-menu.pure-menu-horizontal, with nested children, customized</h1>\n    <div class=\"menu-custom pure-menu pure-menu-horizontal\" hidden>\n        <a href=\"#\" class=\"heading-custom pure-menu-link pure-menu-heading\">Title</a>\n        <ul class=\"list-custom pure-menu-list\">\n            <li class=\"item-custom pure-menu-item\"><a href=\"#\" class=\"link-custom pure-menu-link\">Home</a></li>\n            <li class=\"item-custom pure-menu-item\"><a href=\"#\" class=\"link-custom pure-menu-link\">About</a></li>\n            <li class=\"item-custom pure-menu-item pure-menu-has-children\">\n                <a href=\"#\" class=\"link-custom pure-menu-link\">Blog</a>\n                <ul class=\"children-custom pure-menu-children\">\n                    <li class=\"item-custom pure-menu-item\"><a class=\"link-custom pure-menu-link\" href=\"/handlebars\">Handlebars Helpers</a></li>\n                    <li class=\"item-custom pure-menu-item\"><a class=\"link-custom pure-menu-link\" href=\"/dust\">Dust Helpers</a></li>\n                    <li class=\"item-custom pure-menu-item\"><a class=\"link-custom pure-menu-link\" href=\"/react\">React Mixins</a></li>\n                    <li class=\"item-custom pure-menu-item\"><a class=\"link-custom pure-menu-link\" href=\"/javascript\">Intl Message Format</a></li>\n                </ul>\n            </li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"link-custom pure-menu-link\">Contact</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"link-custom pure-menu-link\">GitHub</a></li>\n            <li class=\"pure-menu-item\"><a href=\"#\" class=\"link-custom pure-menu-link\">Twitter</a></li>\n        </ul>\n    </div>\n    <!-- script src=\"http://10.73.144.35:5000/js/menus.js\"></script -->\n\n</body>\n</html>\n"
  },
  {
    "path": "src/tables/css/tables.css",
    "content": ".pure-table {\n    /* Remove spacing between table cells (from Normalize.css) */\n    border-collapse: collapse;\n    border-spacing: 0;\n    empty-cells: show;\n    border: 1px solid #cbcbcb;\n}\n\n.pure-table caption {\n    color: #000;\n    font: italic 85%/1 arial, sans-serif;\n    padding: 1em 0;\n    text-align: center;\n}\n\n.pure-table td,\n.pure-table th {\n    border-left: 1px solid #cbcbcb; /* inner column border */\n    border-width: 0 0 0 1px;\n    font-size: inherit;\n    margin: 0;\n    overflow: visible; /* to make this where the title is really long work */\n    padding: 0.5em 1em; /* cell padding */\n}\n\n.pure-table thead {\n    background-color: #e0e0e0;\n    color: #000;\n    text-align: left;\n    vertical-align: bottom;\n}\n\n/*\nstriping:\n   even - #fff (white)\n   odd  - #f2f2f2 (light gray)\n*/\n.pure-table td {\n    background-color: transparent;\n}\n.pure-table-odd td {\n    background-color: #f2f2f2;\n}\n\n/* nth-child selector for modern browsers */\n.pure-table-striped tr:nth-child(2n-1) td {\n    background-color: #f2f2f2;\n}\n\n/* BORDERED TABLES */\n.pure-table-bordered td {\n    border-bottom: 1px solid #cbcbcb;\n}\n.pure-table-bordered tbody > tr:last-child > td {\n    border-bottom-width: 0;\n}\n\n\n/* HORIZONTAL BORDERED TABLES */\n\n.pure-table-horizontal td,\n.pure-table-horizontal th {\n    border-width: 0 0 1px 0;\n    border-bottom: 1px solid #cbcbcb;\n}\n.pure-table-horizontal tbody > tr:last-child > td {\n    border-bottom-width: 0;\n}\n"
  },
  {
    "path": "src/tables/tests/manual/tables.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\">\n    <title>Tables Tests</title>\n\n    <link rel=\"stylesheet\" href=\"../../../../build/base.css\">\n    <link rel=\"stylesheet\" href=\"../../../../build/tables.css\">\n    <style>\n        body {\n            /* adding a little margin so we can see the borders better */\n            margin: 1em;\n        }\n        .box {\n            display: inline-block;\n            width: 100px;\n            height: 24px;\n            background-color: gray;\n        }\n    </style>\n</head>\n\n<body>\n    <h1>Tables Tests</h1>\n\n    <h2>Default Table</h2>\n\n    <table class=\"pure-table\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>Honda</td>\n                <td>Accord</td>\n                <td>2009</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>2012</td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>2010</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h2>Checking alignment</h2>\n\n    <table class=\"pure-table pure-table-bordered\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n            </tr>\n            <tr>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n            </tr>\n            <tr>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n                <td><s class=\"box\" /></td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h2>Bordered Table</h2>\n\n    <table class=\"pure-table pure-table-bordered\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>Honda</td>\n                <td>Accord</td>\n                <td>2009</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>2012</td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>2010</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h2>Bordered Table with rowspan</h2>\n\n    <table class=\"pure-table pure-table-bordered\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td rowspan=\"3\">1</td>\n                <td>Honda</td>\n                <td>Accord</td>\n                <td>2009</td>\n            </tr>\n            <tr>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>2012</td>\n            </tr>\n            <tr>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>2010</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h2>Bordered Table with colspan</h2>\n\n    <table class=\"pure-table pure-table-bordered\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>2012</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td colspan=\"3\">[ redacted ]</td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>2010</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h2>Table with Horizontal Borders</h2>\n\n    <table class=\"pure-table pure-table-horizontal\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>Honda</td>\n                <td>Accord</td>\n                <td>2009</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>2012</td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>2010</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h2>Striped Table</h2>\n\n    <table class=\"pure-table\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr class=\"pure-table-odd\">\n                <td>1</td>\n                <td>Honda</td>\n                <td>Accord</td>\n                <td>2009</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>2012</td>\n            </tr>\n            <tr class=\"pure-table-odd\">\n                <td>3</td>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>2010</td>\n            </tr>\n            <tr>\n                <td>4</td>\n                <td>Ford</td>\n                <td>Focus</td>\n                <td>2008</td>\n            </tr>\n            <tr class=\"pure-table-odd\">\n                <td>5</td>\n                <td>Nissan</td>\n                <td>Sentra</td>\n                <td>2011</td>\n            </tr>\n            <tr>\n                <td>6</td>\n                <td>BMW</td>\n                <td>M3</td>\n                <td>2009</td>\n            </tr>\n            <tr class=\"pure-table-odd\">\n                <td>7</td>\n                <td>Honda</td>\n                <td>Civic</td>\n                <td>2010</td>\n            </tr>\n            <tr>\n                <td>8</td>\n                <td>Kia</td>\n                <td>Soul</td>\n                <td>2010</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h3>Nth Child Selector Styling</h3>\n\n    <table class=\"pure-table pure-table-striped\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Year</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>Honda</td>\n                <td>Accord</td>\n                <td>2009</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>2012</td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>2010</td>\n            </tr>\n            <tr>\n                <td>4</td>\n                <td>Ford</td>\n                <td>Focus</td>\n                <td>2008</td>\n            </tr>\n            <tr>\n                <td>5</td>\n                <td>Nissan</td>\n                <td>Sentra</td>\n                <td>2011</td>\n            </tr>\n            <tr>\n                <td>6</td>\n                <td>BMW</td>\n                <td>M3</td>\n                <td>2009</td>\n            </tr>\n            <tr>\n                <td>7</td>\n                <td>Honda</td>\n                <td>Civic</td>\n                <td>2010</td>\n            </tr>\n            <tr>\n                <td>8</td>\n                <td>Kia</td>\n                <td>Soul</td>\n                <td>2010</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <h2>Nested Table</h2>\n\n    <table class=\"pure-table pure-table-bordered\">\n        <thead>\n            <tr>\n                <th>#</th>\n                <th>Make</th>\n                <th>Model</th>\n                <th>Type</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>Honda</td>\n                <td>Accord</td>\n                <td>\n                    <table class=\"pure-table pure-table-bordered\">\n                        <thead>\n                            <tr>\n                                <th>Fuel</th>\n                                <th>Year</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>Diesel</td>\n                                <td>2009</td>\n                            </tr>\n                            <tr>\n                                <td>Petrol</td>\n                                <td>2009</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Toyota</td>\n                <td>Camry</td>\n                <td>\n                    <table class=\"pure-table pure-table-bordered\">\n                        <thead>\n                            <tr>\n                                <th>Fuel</th>\n                                <th>Year</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>Diesel</td>\n                                <td>2012</td>\n                            </tr>\n                            <tr>\n                                <td>Petrol</td>\n                                <td>2012</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>Hyundai</td>\n                <td>Elantra</td>\n                <td>\n                    <table class=\"pure-table pure-table-bordered\">\n                        <thead>\n                            <tr>\n                                <th>Fuel</th>\n                                <th>Year</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>Diesel</td>\n                                <td>2010</td>\n                            </tr>\n                            <tr>\n                                <td>Petrol</td>\n                                <td>2010</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</body>\n</html>\n"
  },
  {
    "path": "tasks/license.js",
    "content": "'use strict';\n\nmodule.exports = function (grunt) {\n    grunt.registerMultiTask('license', 'Stamps license banners on files.', function () {\n        var options = this.options({banner: ''}),\n            banner  = grunt.template.process(options.banner),\n            tally   = 0;\n\n        this.files.forEach(function (filePair) {\n            filePair.src.forEach(function (file) {\n                grunt.file.write(file, banner + grunt.file.read(file));\n                tally += 1;\n            });\n        });\n\n        grunt.log.writeln('Stamped license on ' + String(tally).cyan + ' files.');\n    });\n};\n"
  },
  {
    "path": "tasks/suppress.js",
    "content": "'use strict';\n\nmodule.exports = function (grunt) {\n    grunt.registerTask('suppress', 'Suppresses noisy logs', function () {\n        var allowed = ['success', 'fail', 'warn', 'error'];\n\n        grunt.util.hooker.hook(grunt.log, {\n            passName: true,\n\n            pre: function (name) {\n                if (allowed.indexOf(name) === -1) {\n                    grunt.log.muted = true;\n                }\n            },\n\n            post: function () {\n                grunt.log.muted = false;\n            }\n        });\n    });\n};\n"
  },
  {
    "path": "test/index.js",
    "content": "var tap = require('tap');\nvar pure = require('../index.js');\n\n// api\ntap.ok(pure.getFile);\ntap.ok(pure.getFilePath);\n\n// assertions\ntap.match(pure.getFile('pure-min.css'), /pure-button/, 'should load the file');\ntap.match(pure.getFilePath('pure-min.css'), /pure-min\\.css/, 'should return file path');\ntap.throws(pure.getFile, new Error('undefined does not exist'));\n"
  }
]