Showing preview only (438K chars total). Download the full file or copy to clipboard to get everything.
Repository: pure-css/pure
Branch: main
Commit: d35fb6fcbcd8
Files: 94
Total size: 411.3 KB
Directory structure:
gitextract_j5euxoq_/
├── .csslintrc
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ ├── stale.yml
│ └── workflows/
│ ├── deploy.yml
│ └── test.yml
├── .gitignore
├── .npmrc
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── CREDITS.md
├── Gruntfile.js
├── HISTORY.md
├── LICENSE
├── README.md
├── RELEASE.md
├── composer.json
├── eslint.config.mjs
├── index.js
├── package.json
├── site/
│ ├── .gitignore
│ ├── README.md
│ ├── components/
│ │ ├── CodeBlock.js
│ │ ├── Example.js
│ │ ├── Footer.js
│ │ ├── Header.js
│ │ ├── Menu.js
│ │ └── SectionHeader.js
│ ├── docusaurus.config.js
│ ├── lib/
│ │ ├── pure.js
│ │ └── utils.js
│ ├── package.json
│ ├── src/
│ │ ├── index.js
│ │ ├── pages/
│ │ │ ├── base/
│ │ │ │ └── index.js
│ │ │ ├── buttons/
│ │ │ │ └── index.js
│ │ │ ├── customize/
│ │ │ │ └── index.js
│ │ │ ├── extend/
│ │ │ │ └── index.js
│ │ │ ├── forms/
│ │ │ │ └── index.js
│ │ │ ├── grids/
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── index.js
│ │ │ ├── layouts/
│ │ │ │ ├── README.md
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── menus/
│ │ │ │ └── index.js
│ │ │ ├── start/
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── styles.css
│ │ │ ├── tables/
│ │ │ │ └── index.js
│ │ │ └── tools/
│ │ │ └── index.js
│ │ └── theme/
│ │ └── Layout.js
│ └── static/
│ ├── .nojekyll
│ ├── css/
│ │ └── main.css
│ ├── js/
│ │ ├── grids.js
│ │ ├── menus.js
│ │ ├── track-downloads.js
│ │ └── ui.js
│ └── layouts/
│ ├── blog/
│ │ ├── index.html
│ │ └── styles.css
│ ├── email/
│ │ ├── index.html
│ │ └── styles.css
│ ├── gallery/
│ │ ├── index.html
│ │ └── styles.css
│ ├── marketing/
│ │ ├── index.html
│ │ └── styles.css
│ ├── pricing/
│ │ ├── index.html
│ │ └── styles.css
│ ├── side-menu/
│ │ ├── index.html
│ │ └── styles.css
│ ├── tucked-menu/
│ │ └── index.html
│ └── tucked-menu-vertical/
│ └── index.html
├── src/
│ ├── base/
│ │ └── css/
│ │ └── base.css
│ ├── buttons/
│ │ ├── css/
│ │ │ ├── buttons-core.css
│ │ │ └── buttons.css
│ │ └── tests/
│ │ └── manual/
│ │ └── button.html
│ ├── forms/
│ │ ├── css/
│ │ │ ├── forms-r.css
│ │ │ └── forms.css
│ │ └── tests/
│ │ └── manual/
│ │ └── forms.html
│ ├── grids/
│ │ ├── README.md
│ │ ├── css/
│ │ │ └── grids-core.css
│ │ └── tests/
│ │ └── manual/
│ │ └── responsive.html
│ ├── menus/
│ │ ├── css/
│ │ │ ├── menus-core.css
│ │ │ ├── menus-dropdown.css
│ │ │ ├── menus-horizontal.css
│ │ │ ├── menus-scrollable.css
│ │ │ └── menus-skin.css
│ │ └── tests/
│ │ └── manual/
│ │ └── menus.html
│ └── tables/
│ ├── css/
│ │ └── tables.css
│ └── tests/
│ └── manual/
│ └── tables.html
├── tasks/
│ ├── license.js
│ └── suppress.js
└── test/
└── index.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .csslintrc
================================================
{
"adjoining-classes" : false,
"box-sizing" : false,
"display-property-grouping": false,
"fallback-colors" : false,
"order-alphabetical" : false,
"star-property-hack" : false,
"unqualified-attributes" : false
}
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
- Pure Version: [e.g. 2.0.0]
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
Please consider the following before submitting a pull request:
Guidelines for contributing: https://github.com/pure-css/pure/blob/main/CONTRIBUTING.md
Example of changes on an interactive website such as the following:
- http://jsbin.com/
- http://jsfiddle.net/
- http://codepen.io/pen/
---
<!-- The following statement must stay in the PR description -->
I 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.
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
# repository root
- package-ecosystem: npm
directory: "/"
schedule:
interval: daily
open-pull-requests-limit: 10
ignore:
- dependency-name: autoprefixer
versions:
- 10.x
# purecss.io site
- package-ecosystem: npm
directory: "/site"
schedule:
interval: daily
open-pull-requests-limit: 10
groups:
docusaurus:
patterns:
- '@docusaurus/*'
================================================
FILE: .github/stale.yml
================================================
# Configuration for probot-stale - https://github.com/probot/stale
# Number of days of inactivity before an Issue or Pull Request becomes stale
daysUntilStale: 60
# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
daysUntilClose: 7
# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)
onlyLabels: []
# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
exemptLabels:
- pinned
- security
- "[Status] Maybe Later"
- enhancement
# Set to true to ignore issues in a project (defaults to false)
exemptProjects: false
# Set to true to ignore issues in a milestone (defaults to false)
exemptMilestones: false
# Set to true to ignore issues with an assignee (defaults to false)
exemptAssignees: false
# Label to use when marking as stale
staleLabel: wontfix
# Comment to post when marking as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
# Comment to post when removing the stale label.
# unmarkComment: >
# Your comment here.
# Comment to post when closing a stale Issue or Pull Request.
closeComment: >
Issue was closed because of inactivity.
If you think this is still a valid issue, please file a new issue with additional information.
# Limit the number of actions per hour, from 1-30. Default is 30
limitPerRun: 30
# Limit to only `issues` or `pulls`
# only: issues
# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls':
# pulls:
# daysUntilStale: 30
# markComment: >
# This pull request has been automatically marked as stale because it has not had
# recent activity. It will be closed if no further activity occurs. Thank you
# for your contributions.
# issues:
# exemptLabels:
# - confirmed
================================================
FILE: .github/workflows/deploy.yml
================================================
name: Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: 20.x
- uses: webfactory/ssh-agent@v0.5.0
with:
ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}
- name: Release to GitHub Pages
env:
DEPLOYMENT_BRANCH: main
GH_EMAIL: ${{ secrets.GH_EMAIL }}
GH_NAME: ${{ secrets.GH_NAME }}
GIT_USER: ${{ secrets.GH_NAME }}
USE_SSH: true
run: |
npm ci
git config --global user.name "${GH_NAME}"
git config --global user.email "${GH_EMAIL}"
cd site
npm install
npm run deploy
================================================
FILE: .github/workflows/test.yml
================================================
name: Testing
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: 20.x
- run: npm ci
- run: npm run lint
- run: npm test
================================================
FILE: .gitignore
================================================
.DS_Store
.nyc_output/
artifacts/
build/
coverage/
node_modules/
release/
================================================
FILE: .npmrc
================================================
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
================================================
FILE: CONTRIBUTING.md
================================================
# How to Contribute to Pure
Feel free to [open issues][] and send pull requests on GitHub! When sending a
pull request, please create a new topic/feature branch, and send your pull
request from that branch. Please do _not_ send pull requests from your `main`
branch because this tends to lead to merge conflicts.
In order for us to to merge your pull requests, we need you to review and sign
our [Contributor License Agreement][]. The CLA protects you and your
contributions along with all other developers who use Pure.
[contributor license agreement]: #contributor-license-agreement
[open issues]: https://github.com/pure-css/pure/issues
## Docs and Website
[Pure's website][pure] is located in the `site` directory. Please feel free
to open issues or questions in the Issue tab.
[pure]: http://purecss.io/
[pure-site]: https://github.com/pure-css/pure/tree/main/site
## Building and Testing Pure
Pure uses [Grunt][], a JavaScript task runner that runs on [Node.js][], for
building and testing. You'll need Node.js and Grunt installed to work on Pure.
Once installed, clone the `pure` repo (either the main repo or your fork) and
install Pure's gruntplugins via npm:
```shell
$ git clone git://github.com/pure-css/pure.git
$ cd pure/
$ npm install
```
Building Pure is easy, run `grunt`:
```shell
$ grunt
```
Pure uses [CSSLint][] for basic testing to make sure we're shipping valid CSS
which complies with standard best practices. To run Pure's tests, run
`grunt test`:
```shell
$ grunt test
```
**Note:** To save your fingers from The Developer Konami Code: ⌘⇥ ↑ ⏎ run the
`grunt watch` task with will continuously test and build Pure anytime a CSS file
changes:
```shell
$ grunt watch
```
### Browser Support and Testing
Pure is tested and works in:
- Latest Stable: Edge, Firefox, Chrome, Safari
- iOS 6+
- Android 4.x
Before sending pull requests, please ensure that you open the test HTML files
in these environments. If you don't have access to all these environments, list
the ones that you have tested in on the pull request description. That way, we
know what's missing, and can help you out.
[grunt]: http://gruntjs.com/
[node.js]: http://nodejs.org/
[csslint]: https://github.com/stubbornella/csslint
## Coding Standards and Style Guide
Pure has adopted the [SMACSS][] conventions for writing CSS. If you are new to
SMACSS, you should give it a read, especially the section on [module rules][].
The [Extend][] section of the Pure website more info about the style guide and
naming conventions, along with examples of how to extend the library.
[smacss]: http://smacss.com/
[module rules]: http://smacss.com/book/type-module
[extend]: http://purecss.io/extend/
## Contributor License Agreement
Please [sign the Yahoo CLA][cla] after sending pull requests. We can't merge
your pull requests unless you have a signed CLA.
The CLA ensures that everyone who submits a work of authorship to Pure is
contributing work that is their own or for which they can authoritatively speak.
This protects the all of of developers who use Pure in their daily work, all of
whom rely on Pure's BSD license to appropriately cover their use of the library.
The CLA does **not** transfer title or copyright of your contributed work to
Yahoo!. It merely guarantees that you approve the use of your work within Pure
and by those who use the library under the terms of its license.
If you want to make contributions (software, documentation or other material) to
the Pure Project and such contributions could be covered under intellectual
property laws, you must submit a Contributor License Agreement (CLA) prior to
making your contribution:
1. Review Pure's BSD license. All of Pure's code is issued under this license,
and contributions you make to the library will be subject to this license.
**Note:** that the BSD license is very liberal; it allows for reuse and
adaptation in commercial projects.
2. [Sign the Yahoo CLA][cla] online. If you have questions about the CLA, you
can address them to opensource-cla@yahoo-inc.com.
[cla]: https://yahoocla.herokuapp.com/
================================================
FILE: CREDITS.md
================================================
Normalize.css License
=====================
Copyright (c) Nicolas Gallagher and Jonathan Neal
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: Gruntfile.js
================================================
module.exports = function (grunt) {
// -- Config -------------------------------------------------------------------
grunt.initConfig({
nick : 'pure',
pkg : grunt.file.readJSON('package.json'),
// -- Clean Config ---------------------------------------------------------
clean: {
build : ['build/'],
build_res: ['build/*-r.css'],
release : ['release/<%= pkg.version %>/']
},
// -- Copy Config ----------------------------------------------------------
copy: {
build: {
src : 'src/**/css/*.css',
dest : 'build/',
expand : true,
flatten: true
},
release: {
src : '{LICENSE,README.md,HISTORY.md}',
dest: 'build/'
}
},
// -- Concat Config --------------------------------------------------------
concat: {
build: {
files: [
{'build/base.css': [
'node_modules/normalize.css/normalize.css',
'build/base.css'
]},
{'build/buttons.css': [
'build/buttons-core.css',
'build/buttons.css'
]},
{'build/forms-nr.css': [
'build/forms.css'
]},
{'build/forms.css': [
'build/forms-nr.css',
'build/forms-r.css'
]},
{'build/grids.css': [
'build/grids-core.css',
'build/grids-units.css'
]},
{'build/menus.css': [
'build/menus-core.css',
'build/menus-horizontal.css',
'build/menus-dropdown.css',
'build/menus-scrollable.css',
'build/menus-skin.css',
]},
// Rollups
{'build/<%= nick %>.css': [
'build/base.css',
'build/grids.css',
'build/buttons.css',
'build/forms.css',
'build/menus.css',
'build/tables.css'
]},
{'build/<%= nick %>-nr.css': [
'build/base.css',
'build/grids.css',
'build/buttons.css',
'build/forms-nr.css',
'build/menus.css',
'build/tables.css'
]}
]
}
},
// -- PostCSS Config --------------------------------------------------------
postcss: {
options: {
processors: [
require('autoprefixer')()
]
},
dist: {
src: 'build/*.css'
}
},
// -- CSSLint Config -------------------------------------------------------
csslint: {
options: {
csslintrc: '.csslintrc'
},
base : ['src/base/css/*.css'],
buttons: ['src/buttons/css/*.css'],
forms : ['src/forms/css/*.css'],
grids : ['src/grids/css/*.css'],
menus : ['src/menus/css/*.css'],
tables : ['src/tables/css/*.css']
},
// -- CSSMin Config --------------------------------------------------------
cssmin: {
options: {
noAdvanced: true
},
files: {
expand: true,
src : 'build/*.css',
ext : '-min.css'
}
},
// -- Compress Config ------------------------------------------------------
compress: {
release: {
options: {
archive: 'release/<%= pkg.version %>/<%= nick %>-<%= pkg.version %>.tar.gz'
},
expand : true,
flatten: true,
src : 'build/*',
dest : '<%= nick %>/<%= pkg.version %>/'
}
},
// -- License Config -------------------------------------------------------
license: {
normalize: {
options: {
banner: [
'/*!',
'normalize.css v<%= pkg.devDependencies["normalize-css"] %> | MIT License | https://necolas.github.io/normalize.css/',
'Copyright (c) Nicolas Gallagher and Jonathan Neal',
'*/\n'
].join('\n')
},
expand: true,
cwd : 'build/',
src : ['base*.css', '<%= nick %>*.css']
},
yahoo: {
options: {
banner: [
'/*!',
'Pure v<%= pkg.version %>',
'Copyright 2013 Yahoo!',
'Licensed under the BSD License.',
'https://github.com/pure-css/pure/blob/main/LICENSE',
'*/\n'
].join('\n')
},
expand: true,
src : ['build/*.css']
}
},
// -- Pure Grids Units Config ----------------------------------------------
pure_grids: {
default_units: {
dest: 'build/grids-units.css',
options: {
units: [5, 24]
}
},
responsive: {
dest: 'build/grids-responsive.css',
options: {
mediaQueries: {
sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)', // 768px
lg: 'screen and (min-width: 64em)', // 1024px
xl: 'screen and (min-width: 80em)', // 1280px
xxl: 'screen and (min-width: 120em)', // 1920px
xxxl: 'screen and (min-width: 160em)', // 2560px
x4k: 'screen and (min-width: 240em)' // 3840px
}
}
}
},
// -- CSS Selectors Config -------------------------------------------------
css_selectors: {
base: {
src : 'build/base.css',
dest: 'build/base-context.css',
options: {
mutations: [{prefix: '.pure'}]
}
}
},
// -- Watch/Observe Config -------------------------------------------------
observe: {
src: {
files: 'src/**/css/*.css',
tasks: ['test', 'suppress', 'build'],
options: {
interrupt: true
}
}
}
});
// -- Main Tasks ---------------------------------------------------------------
// npm tasks.
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-css-selectors');
grunt.loadNpmTasks('@lodder/grunt-postcss');
grunt.loadNpmTasks('grunt-pure-grids');
// Local tasks.
grunt.loadTasks('tasks/');
grunt.registerTask('default', ['test', 'build']);
grunt.registerTask('test', ['csslint']);
grunt.registerTask('build', [
'clean:build',
'copy:build',
'pure_grids',
'concat:build',
'clean:build_res',
'css_selectors:base',
'postcss',
'cssmin',
'license'
]);
// Makes the `watch` task run a build first.
grunt.renameTask('watch', 'observe');
grunt.registerTask('watch', ['default', 'observe']);
grunt.registerTask('release', [
'default',
'clean:release',
'copy:release',
'compress:release'
]);
};
================================================
FILE: HISTORY.md
================================================
# Pure Change History
## 3.0.0 (2022-10-26)
This is a major version bump that has the following changes:
- Removed the `font-family` hack from Grids (#1074)
- IE is no longer supported and all code and documentation references have been removed
- 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.
### Migration
This major version should not include too many breaking changes for your app, but please check the following:
- 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.
- 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.
2.2.0 (2022-10-19)
---
- feat: added media queries for 2.5K and 4K screens (#1065)
2.1.0 (2022-03-14)
---
- feat: support xxl (1920px) media query
2.0.6 (2021-04-28)
---
- chore: update to cssmin@4
2.0.5 (2021-01-20)
---
- fix #824: cursor style for disabled menu link
2.0.4 (2021-01-19)
---
- chore: update license path
2.0.3 (2020-05-11)
---
- fix: update browser list for all environments
2.0.2 (2020-05-11)
---
- refactor: Remove button CSS for IE 6-8
2.0.1 (2020-05-05)
---
- refactor: remove usage of deprecated webkit-overflow-scrolling
2.0.0 (2020-05-05)
---
This is a major version bump that has the following changes:
- Reduced overall size of Pure to 3.6kb (gzipped/min)
- Updated Normalize to v8.
- Removed bower
- Removed old IE 8 hacks
- Removed deprecated `pure-help-inline` form class
### Migration
This major version should not include too many breaking changes for your app, but please check the following:
- 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.
- 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`.
### New Browser support
- Chrome
- Edge
- Firefox
- Internet Explorer 10+
- Safari 8+
- Opera
> Deprecated support for < IE 10
## 1.0.1 (2019-07-10)
- Fix "selected" menu item labels in nested menus (#708)
- Fix bug in pure-button active state's border color. (#729)
- Fix horizontal scrollbars not appearing in IE11 and Chrome (#740)
- Fix pure-table-bordered issues (#718)
1.0.0 (2017-06-05)
---
The 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.
We 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.
## 0.6.2 (2017-01-05)
- Added proper module API for node users [#619]
### Buttons
- Added Button Groups to Pure [#621]
### Menus
- Reset style for horizontal dropdown separator [#620]
0.6.1 (2016-10-12)
---
- Migrate to PostCSS for browser prefixes [#617]
- Remove duplicate Firefox inner focus border [#457]
- Fix grid inside table in IE 10/11 [#504]
- Fix CSSLint issues [#609]
- Upgraded grunt dependencies to 1.x [#609]
0.6.0 (2015-02-07)
---
- Upgraded Normalize.css to 3.0.2.
- Dropped IE7 support.
- Refactored Menus.
- Numerous minor bug fixes.
### Menus
- Implemented flatter, low-specificity selectors, not attached to HTML elements,
for easier customization.
- Removed pure-menu-open class.
- Added pure-menu-scrollable capability, to allow for scrollable menus when
restricted by width or height.
- Added pure-menu-allow-hover to reveal dropdowns on hover.
- Removed various default styling properties, making menus a bit more bare-bones,
a bit less opinionated, a bit easier to customize on top.
- Broke Menu up into files for core, horizontal, dropdowns, scrollable, and skin,
again for improved optimization and ease of customization: take only what you
need.
- Removed Paginator.
- While not part of the Pure repo itself, the accompanying Pure website now
features additional menu examples and an example script for enabling dropdowns
and improved accessiblity.
0.5.0 (2014-05-27)
---
### Base
- Added the `.pure-img` class name for make images scale with the viewport in
fluid layouts.
### Grids
- **[!]** Removed `.pure-g-r` from core, in favor of a mobile-first responsive
grid system. ([#24][], [#267][])
To use the mobile-first grid system, you need to pull in `pure.css`, along
with `grids-responsive.css`. We also have `grids-responsive-old-ie.css` that
you can serve to IE < 9 users so that they can view a desktop-version of your
website:
```html
<link
rel="stylesheet"
href="http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css"
/>
<!--[if lt IE 9]>
<link
rel="stylesheet"
href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-old-ie-min.css"
/>
<![endif]-->
<!--[if gt IE 8]><!-->
<link
rel="stylesheet"
href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css"
/>
<!--<![endif]-->
```
Find out more about the new grid system at <http://purecss.io/grids/>.
### Tables
- Switched cell padding in Tables from `px` to `em` units, and also increased
the amount of padding to `padding: 0.5em 1em`.
[#24]: https://github.com/pure-css/pure/issues/24
[#267]: https://github.com/pure-css/pure/pull/267
## 0.4.2 (2014-02-13)
- Added `main` to Pure's `bower.json` file to allow easier integration with
build processes and tooling. ([#286][] @stevenvachon)
### Forms
- Improved how `<input type="color">` elements look in Chrome by fixing
paddings. ([#283][] @jpetto)
- Removed `font-size` rules from `<input>`, `<legend>`, and `<fieldset>`
elements within `.pure-form`. Font sizes are now inherited from the
application's CSS file. ([#265][])
- Invalid `<input>` elements within a Pure Form no longer explicitly set a
`border-width`. ([#295][] @kwando)
[#265]: https://github.com/pure-css/pure/issues/265
[#283]: https://github.com/pure-css/pure/issues/283
[#286]: https://github.com/pure-css/pure/issues/286
[#295]: https://github.com/pure-css/pure/issues/295
## 0.4.1 (2014-02-06)
### Base
- Elements that have Pure classnames which set a `display` declaration _and_ use
the `hidden` HTML attribute will now properly be hidden. With these changes,
the following button will be hidden from view:
```html
<button class="pure-button" hidden>No showy</button>
```
A new rule for the `[hidden]` selector has been added with the declaration:
`display: none !important;`. This is a time where it's appropriate for a
project like Pure to use `!important`. ([#177][])
### Buttons
- Removed all the occurrences of `-ms-linear-gradient()` from Buttons since it
has never been in the final version of IE 10. ([#200][]: @AurelioDeRosa)
- `<input>` Buttons now have the same height as non-input buttons.
`font-family: inherit;` has been added to the `.pure-button` selector to
normalize the difference in height. ([#221][] @narcis-radu)
- Buttons now have visually uniform default `padding` on all four sides. The
left/right padding is 2x the top/bottom padding. ([#191][] @achalv)
### Forms
- Added `vertical-align: top;` to `<textarea>`s within `.pure-form-aligned`
Forms to fix an alignment issue where its label was aligned to the middle.
([#174][] @rictorres, @ItsAsbreuk)
- Added styling for `<input>` elements that don't have a `type` attribute.
([#261][] @dougdavies)
### Grids
- Added all non-reduced fractions to Grids default 5ths- and 24ths-based units.
There are now styles specified for `.pure-u-1-24` – `.pure-u-24-24`. All 5ths-
based units and reduced factions still remain; e.g., both `.pure-u-12-24` and
`.pure-u-1-2` exist. ([#144][] @mike-engel)
- Removed `grids-units.css` from `src/`, this file is now generated via a Grunt
task. The units generation is done via the new
[`rework-pure-grids`][rework-pure-grids] [Rework][] plugin, and it can be used
to create any custom nth-based units for Pure's Grids system.
### Menus
- Removed hard-coded height for horizontal menus. ([#164][])
[#144]: https://github.com/pure-css/pure/issues/144
[#164]: https://github.com/pure-css/pure/issues/164
[#174]: https://github.com/pure-css/pure/issues/174
[#177]: https://github.com/pure-css/pure/issues/177
[#191]: https://github.com/pure-css/pure/issues/191
[#200]: https://github.com/pure-css/pure/issues/200
[#221]: https://github.com/pure-css/pure/issues/221
[#261]: https://github.com/pure-css/pure/issues/261
[rework-pure-grids]: https://github.com/ericf/rework-pure-grids
[Rework]: https://github.com/visionmedia/rework
## 0.4.0 (2014-02-06)
- **[!]** Corrupted release build, use `0.4.1`.
0.3.0 (2013-09-09)
---
- **[!]** Pure now requires the Base module (which is Normalize.css) to be on
the page. Pure has essentially always required the styles provided by
Normalize.css via the Base module, and this now makes it a firm requirement.
The `pure-min.css` and `pure-nr-min.css` rollup files already include the Base
module.
**Note:** When using a [custom subset][Customize] of Pure, be sure to include
the Base module.
- Added non-minified rollup files: `pure.css` and `pure-nr.css`. These files are
created in addition to the minified rollups: `pure-min.css` and
`pure-nr-min.css`. The minified rollups _should_ be used in production.
([#171][] @omeid)
### Base
- **[!]** Removed Normalize.css from checked-in `src/`. Bower is now used to
programmatically import Normalize.css into `bower_components/` if it's not
already installed. Normalize.css is still bundled with Pure, this change is a
development-time change only. ([#160][])
### Buttons
- Removed `-webkit-font-smoothing: antialiased` rule from Buttons. Pure should
not dictate sub-pixel font rendering, that should be left to the person's
browser settings and/or the developer. ([#170][] @dchest)
### Forms
- **[!]** Removed `forms-core.css`. This was a copy of Normalize.css' form
related styles. Now that Pure requires the Base module (Normalize.css) to be
on the page, the Forms Core submodule is no longer needed. ([#160][])
- Added `:focus` styles to `[readonly]` `<input>` elements. ([#143][])
- Removed `-webkit-font-smoothing: antialiased` rule from Forms input styles.
Pure should not dictate sub-pixel font rendering, that should be left to the
person's browser settings and/or the developer. ([#185][] @dchest)
### Grids
- **[!]** Improved support for Grids across OS/browser combinations, and its
ability to withstand the use of non-default fonts when set by either the
person in their browser settings or by the developer using custom fonts.
Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting
a negative `letter-spacing` — the fallback for older browsers. Grids also now
uses a specific font stack on `.pure-g` and `.pure-g-r` classes to ensure the
greatest OS/browser compatibility when non-default fonts are being used. By
default grid units will now have `font-family: sans-serif;` applied — this is
the default font stack Pure's Base module (Normalize.css) applies to the
`<body>`.
This is a **breaking change** if you are using any non-default fonts in your
web project. Fortunately, it's quite easy to make sure your custom font stacks
apply to content within Pure Girds. Instead of applying your custom font to
only the `<body>` element, apply it to the grid units as well:
```css
body,
.pure-g [class*="pure-u"],
.pure-g-r [class*="pure-u"] {
/* Set you're content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif;
}
```
Refer to the [Grids Documentation][Grids-fonts] for more details on using
non-default fonts with Pure Grids.
([#41][], [#162][], [#166][], [#189][]: @adapterik @dannyfritz, @pandeiro)
- Fixed grid units from falling to a new line on IE 6 and IE 7. Grid units now
have a separate `*width` value for these older versions of IE. This value is
`0.005%` less than the standard `width` value. This fix does not affect modern
browsers because it uses the star hack. ([#154][])
- Added a `height: auto` rule to images within a `.pure-g-r` so that their
aspect ratios are maintained when the page is resized. ([#172][]: @dchest)
[#41]: https://github.com/pure-css/pure/issues/41
[#143]: https://github.com/pure-css/pure/issues/143
[#154]: https://github.com/pure-css/pure/issues/154
[#160]: https://github.com/pure-css/pure/issues/160
[#162]: https://github.com/pure-css/pure/issues/162
[#166]: https://github.com/pure-css/pure/issues/166
[#170]: https://github.com/pure-css/pure/issues/170
[#171]: https://github.com/pure-css/pure/issues/171
[#172]: https://github.com/pure-css/pure/issues/172
[#185]: https://github.com/pure-css/pure/issues/185
[#189]: https://github.com/pure-css/pure/issues/189
[Customize]: http://purecss.io/customize/
[Grids-fonts]: http://purecss.io/grids/#using-grids-with-custom-fonts
## 0.2.1 (2013-07-17)
### Forms
- **[!]** Made `[readonly]` `<input>`s look visually different to `[disabled]`
and regular `<input>`s. ([#102][]: @jaseg)
- Fixed copy/paste bug that mapped text inputs to `.pure-form` instead of
`.pure-group`. The `.pure-form-group input` styles are now applied to all
text-ish `<input>` elements. ([#96][])
- Fixed `.pure-input-rounded` styles to now apply correctly. The change to use
more specific selectors for text-ish inputs in v0.2.0 caused the
`.pure-input-rounded` selector to not apply because it was less specific. This
selector now has right specificity. ([#109][]: @AurelioDeRosa)
- Added `display: block` to `<textarea>`s in `.pure-form-stacked` `<form>`s to
fix an alignment issue for subsequent elements. ([#90][]: @AurelioDeRosa)
- Removed the gray `color` from `.pure-form label`. This allows `<label>`s to
inherit their foreground color. ([#89][]: @AurelioDeRosa)
### Grids
- **[!]** Changed `.pure-u-1` grid unit to now use `width: 100%` instead of
`display: block` to achieve taking up the full width of its container. This
makes it easier to override and align since it's using `display: inline-block`
like the other grid units. ([#94][])
- Fixed `width` value typo in `.pure-u-1-6`, changed it from `16.656%` to
`16.666%`. ([#115][]: @chilts)
### Menus
- **[!]** Fixed broken styling of active paginator items by using Grids CSS
rules to layout items horizontally; this makes sure the active item isn't
overlapped. ([#127][])
### Tables
- Removed `white-space: nowrap` from `.pure-table thead`. This fixes issues
where tables inside of grids would break the grid. ([#95][]: @AurelioDeRosa)
[#89]: https://github.com/pure-css/pure/issues/89
[#90]: https://github.com/pure-css/pure/issues/90
[#94]: https://github.com/pure-css/pure/issues/94
[#95]: https://github.com/pure-css/pure/issues/95
[#96]: https://github.com/pure-css/pure/issues/96
[#102]: https://github.com/pure-css/pure/issues/102
[#109]: https://github.com/pure-css/pure/issues/109
[#115]: https://github.com/pure-css/pure/issues/115
[#127]: https://github.com/pure-css/pure/issues/127
[#172]: https://github.com/pure-css/pure/pull/172
## 0.2.0 (2013-06-11)
- **[!]** Fixed accessibility mistake by removing `a:focus {outline: none;}`
rule from `buttons-core.css`.
- **[!]** Improved `:focus` styles by applying the same rules that are used by
`:hover` styles. When overriding Pure's `:hover` styles, be sure to include
`:focus` selectors as well.
- Added improvements to developer workflow:
- Added basic Tests using CSSLint via `grunt test` ([#25][])
- Integrated Travis CI which runs `grunt test` on pushes to `main` and for
pull requests.
- Added `grunt watch` task which runs tests and build.
- Added support to `pure-site` for serving `pure` locally during
development. ([#46][], [pure-css/pure-site#111][])
- Removed vendor prefixes for `box-shadow`, `text-shadow`, `border-radius`. All
modern browsers support the non-prefixed versions of these properties.
([#23][])
### Forms
- **[!]** Replaced `.pure-help-inline` with `.pure-form-message-inline`. We
still support the older classname but it is deprecated and will be going away
in a future release. ([#32][]: @dannytatom)
- Added a new class called `.pure-form-message`. It works the same way as
`.pure-form-message-inline` but is meant for block elements.
([#32][]: @dannytatom)
- Added focus styles for file, radio, and checkbox `<input>`s to improve
accessibility. ([#42][]: @codepb)
- `<textarea>`s now have the same styling as `<input>`s. ([#49][]: @rcbdev)
- `.pure-form input` rules are now more specific by targetting only "texty"
`<inputs>`. This prevents these styles from affecting "buttony" `<input>`s.
([#54][])
### Grids
- Elements with classnames before the responsive grid's unit classnames now
works correctly. Before units were targeted using the `^=` ("starts with")
selector, which meant that if another classname preceded the unit classname,
then the rule would not apply. ([#44][])
### Menus
- Added `.pure-menu-separator` classname that can be used to visually
separate horizontal menu items. ([#53][]: @codepb, @mseri)
- Focused menus have an `outline: none` by default. Instead, menu-items that
have been opened to display children (in a drop-down menu) get a slight
background (`#dedede`) for accessibility. ([#22][])
[#22]: https://github.com/pure-css/pure/issues/22
[#23]: https://github.com/pure-css/pure/issues/23
[#25]: https://github.com/pure-css/pure/issues/25
[#32]: https://github.com/pure-css/pure/issues/32
[#42]: https://github.com/pure-css/pure/issues/42
[#44]: https://github.com/pure-css/pure/issues/44
[#46]: https://github.com/pure-css/pure/issues/46
[#49]: https://github.com/pure-css/pure/issues/49
[#53]: https://github.com/pure-css/pure/issues/53
[#54]: https://github.com/pure-css/pure/issues/54
[pure-css/pure-site#111]: https://github.com/pure-css/pure-site/issues/111
## 0.1.0 (2013-05-24)
- **[!]** Initial public release.
- Upgraded Normalize.css to 1.1.2.
- Integrated Bower into `grunt import` process.
- Cleaned up manual test files, removing unnecessary CSS files and cruft.
### Buttons
- Added `border-radius: 2px` to enhance the appearance the they are click-able.
### Menus
- Removed `border-radius` from vertical menus.
- Replaced blue hover for menus with light grey (`#eee`)
- Removed `font-weight: bold` from selected menu items.
0.0.2 (2013-05-16)
---
- **[!]** Renamed to Pure.
- **[!]** Renamed CSS classname prefix to `pure`.
- Preview release (2).
0.0.1 (2013-05-14)
---
- Preview release.
================================================
FILE: LICENSE
================================================
Software License Agreement (BSD License)
========================================
Copyright 2013 Yahoo! Inc.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of the Yahoo! Inc. nor the
names of its contributors may be used to endorse or promote products
derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
================================================
FILE: README.md
================================================
# Pure
[][pure]
A set of small, responsive CSS modules that you can use in every web project.
[https://purecss.io/][pure]
## Features
Pure is a starting point for every website or web app. We take care
of all the CSS work that every site needs without making it look cookie-cutter:
- A responsive grid that can be customized to your needs.
- A solid base built on [Normalize.css][] to fix cross-browser compatibility
issues.
- Consistently styled buttons that work with `<a>` and `<button>` elements.
- Styles for vertical and horizontal menus, including support for dropdown
menus.
- Useful form alignments that look great on all screen sizes.
- Various common table styles.
- An extremely minimalist look that is super-easy to customize.
- Responsive by default, with a non-responsive option.
- Extremely small file size: **3.7KB minified + gzip**.
## Get Started
Check out the [Get Started][started] page for more information.
## Build From Source
Optionally, you can build Pure from its source on Github. To do this, you'll
need to have Node.js and npm installed. We use [Grunt][] to build Pure.
```shell
git clone git@github.com:pure-css/pure.git
cd pure
npm install
grunt
```
### Build Files
Now, all Pure CSS files should be built into the `pure/build/` directory. All
files that are in this build directory are also available on the CDN. The naming
conventions of the files in the `build/` directory follow these rules:
- `[module]-core.css`: The minimal set of styles, usually structural, that
provide the base on which the rest of the module's styles build.
- `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` +
`[module]-[feature].css` from the `src/[module]/` dir. This is the
non-responsive version of a module.
- `[module].css`: Rollup of `[module]-nr.css` + `[module]-r.css` from the
`build/` dir. This is the responsive version of a module.
- `*-min.css`: A minified file version of the files of the same name.
- `pure.css`: A rollup of all `[module].css` files in the `build/` dir. This is
a responsive roll-up of everything, non-minified. Note: does not contain responsive grids with @media queries.
- `pure-min.css`: Minified version of `pure.css` that should be used in
production.
- `pure-nr.css`: A Rollup of all modules without @media queries. This is a
non-responsive roll-up of everything, non-minified.
- `pure-nr-min.css`: Minified version of `pure-nr.css` that should be used in
production.
- `grids-responsive.css`: Unminified version of Pure's grid stylesheet which
includes @media queries.
- `grids-responsive-min.css`: Minified version of `grids-responsive.css` that
should be used in production.
## Browser Support and Testing
Pure is tested and works in:
- Latest Stable: Firefox, Chrome, Safari
## Docs and Website
[Pure's website][pure] is located in the [`site`][pure-site] directory. Please feel free
to open issues or questions in the Issue tab.
## Contributing
See the [CONTRIBUTING file][] for information on how to contribute to Pure.
## License
This software is free to use under the Yahoo! Inc. BSD-3-Clause license.
See the [LICENSE file][] for license text and copyright information.
[grunt]: http://gruntjs.com/
[contributing file]: https://github.com/pure-css/pure/blob/main/CONTRIBUTING.md
[license file]: https://github.com/pure-css/pure/blob/main/LICENSE
[normalize.css]: http://necolas.github.io/normalize.css/
[pure]: http://purecss.io/
[pure-site]: https://github.com/pure-css/pure/tree/main/site
[started]: https://purecss.io/start/
================================================
FILE: RELEASE.md
================================================
# Pure Deployment Checklist
These are the steps formally used to publish a new version of Pure.
For all of these steps, replace `1.0.0` with the correct version!
## Prerequisite
This assumes the following repo's are cloned and `npm` installed:
- https://github.com/pure-css/pure
## First, check everything
- [ ] **Update local Pure to latest from pure-css/pure#main**
```bash
$ cd pure/
$ git pull upstream main
```
- [ ] **Build Pure via `grunt`**
```bash
$ grunt
```
- [ ] **Review all src/.../tests/manual/ files in target environments, including:**
- [ ] Edge
- [ ] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] **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)**
- [ ] Edge
- [ ] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] **Review HISTORY.md**
https://github.com/pure-css/pure/blob/main/HISTORY.md
Make sure all the major changes since the last release of Pure are reflected in HISTORY.md entries.
## Prepare repos for release
### Pure repo
- [ ] **Bump versions**
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):
- [ ] package.json
- [ ] HISTORY.md (Update "NEXT")
- [ ] **Build Pure release files via `grunt release`**
Using Grunt, create the release/[version]/pure-[version].tar.gz file:
```bash
$ grunt release
```
**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.
## Publish pure to NPM
From the `pure` repo run the following command to publish Pure to NPM. This will ensure `jsdelivr.com` CDN gets the new files.
```bash
npm publish .
```
Verify via https://www.jsdelivr.com/package/npm/purecss
## Draft releases on Github
- [ ] **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.**
- [ ] **pure**
## Formally publish Pure
Now all our files are out there and everything is looking good.
- [ ] **Publish pure**
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.
## Spread the word
- [ ] **Write blog post**
- [ ] **Tweet**
## Mark repo as pre-release
- [ ] 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.
================================================
FILE: composer.json
================================================
{
"name": "pure-css/purecss",
"description": "Pure is a ridiculously tiny CSS library you can use to start any web project.",
"keywords": [
"css",
"mobile-first",
"pure",
"purecss",
"responsive",
"front-end",
"framework",
"web",
"yahoo"
],
"homepage": "http://purecss.io/",
"authors": [
{
"name": "ericf",
"email": "edf@ericf.me"
},
{
"name": "tilomitra",
"email": "tilomitra@gmail.com"
},
{
"name": "msweeney",
"email": "matt.sweeney@yahoo.com"
},
{
"name": "jamesalley",
"email": "manalagi001@yahoo.com"
}
],
"support": {
"issues": "https://github.com/pure-css/pure/issues"
},
"license": "BSD-3-Clause"
}
================================================
FILE: eslint.config.mjs
================================================
import js from '@eslint/js';
import globals from 'globals';
import reactPlugin from 'eslint-plugin-react';
export default [
js.configs.recommended,
reactPlugin.configs.flat.recommended,
{
ignores: [
'.idea/',
'*-debug.log',
'build/',
'node_modules/',
'release/',
'npm-*.log',
'site/.docusaurus',
'site/build',
'site/node_modules',
'site/static/css/pure',
],
},
{
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
languageOptions: {
...reactPlugin.configs.flat.recommended.languageOptions,
ecmaVersion: 2024,
globals: {
...globals.browser,
...globals.jest,
...globals.mocha,
...globals.node,
...globals.protractor,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
},
plugins: {
react: reactPlugin,
},
rules: {
indent: [2, 4, { SwitchCase: 1 }],
quotes: [0, 'single'],
'no-console': 0,
'react/no-unescaped-entities': 0,
'react/prop-types': 0,
},
settings: {
react: {
version: 'detect',
},
},
},
];
================================================
FILE: index.js
================================================
var fs = require('fs');
var path = require('path');
var cache = {};
module.exports = {
getFile: function(name) {
if (!cache[name]) {
try {
cache[name] = fs.readFileSync(this.getFilePath(name), 'utf-8');
} catch(e) {
throw new Error(name + ' does not exist', e);
}
}
return cache[name];
},
getFilePath: function(name) {
return path.resolve(__dirname, 'build', name);
}
};
================================================
FILE: package.json
================================================
{
"name": "purecss",
"version": "3.0.0",
"repository": {
"type": "git",
"url": "git://github.com/pure-css/pure.git"
},
"scripts": {
"lint": "eslint . --fix",
"prepare": "grunt release",
"start": "cd site && npm install && npm run start",
"test": "grunt test && tap test/*.js --no-coverage"
},
"files": [
"build/"
],
"devDependencies": {
"@lodder/grunt-postcss": "^3.1.1",
"autoprefixer": "^10.4.2",
"eslint": "^9.12.0",
"eslint-plugin-react": "^7.37.1",
"globals": "^16.0.0",
"grunt": "^1.3.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^2.0.0",
"grunt-contrib-compress": "^2.0.0",
"grunt-contrib-concat": "^2.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-csslint": "^2.0.0",
"grunt-contrib-cssmin": "^5.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-css-selectors": "^1.1.0",
"grunt-pure-grids": "^2.0.0",
"husky": "^9.0.11",
"normalize.css": "^8.0.1",
"postcss": "^8.4.8",
"tap": "^16.0.0"
},
"description": "Pure is a ridiculously tiny CSS library you can use to start any web project.",
"bugs": {
"url": "https://github.com/pure-css/pure/issues"
},
"homepage": "https://purecss.io",
"main": "index.js",
"browser": "build/pure-min.css",
"style": "build/pure.css",
"keywords": [
"pure",
"css",
"purecss",
"yahoo"
],
"authors": [
"ericf <edf@ericf.me>",
"tilomitra <tilomitra@gmail.com>",
"msweeney <matt.sweeney@yahoo.com>",
"jamesalley <manalagi001@yahoo.com>"
],
"license": "BSD-3-Clause",
"browserslist": "> 1%",
"husky": {
"hooks": {
"pre-commit": "npm test"
}
}
}
================================================
FILE: site/.gitignore
================================================
# Dependencies
/node_modules
# Production
/build
# Ignore manually copied pure files to static/css folder
/static/css/pure
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: site/README.md
================================================
# Pure Documentation
This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
### Installation
```
$ npm install
```
### Local Development
```
$ npm run start
```
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
### Build
```
$ npm run build
```
This command generates static content into the `build` directory and can be served using any static contents hosting service.
### Deployment
```
$ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy
```
The site is hosted on [Vercel](https://vercel.com/) and will automatically deploy when commits are merged to `main`.
### Including Pure
We 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.
To 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.
================================================
FILE: site/components/CodeBlock.js
================================================
import React from 'react';
import classnames from 'classnames';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
function CodeBlock({ children, language = 'html', full = false, wrap = false }) {
var fullClass = classnames({ 'is-code-full': full });
var codeClass = classnames({ code: true, 'code-wrap': wrap });
return (
<div className={fullClass}>
<div className={codeClass}>
<SyntaxHighlighter language={language} style={docco} wrapLongLines={full}>{children}</SyntaxHighlighter>
</div>
</div>
);
}
export default CodeBlock;
================================================
FILE: site/components/Example.js
================================================
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import CodeBlock from './CodeBlock';
import { html } from 'js-beautify';
function Example({ children }) {
const opts = { inline: 'b' };
const markup = html(ReactDOMServer.renderToStaticMarkup(children), opts);
return (
<div className="example">
<div dangerouslySetInnerHTML={{ __html: markup }} />
<CodeBlock>{markup}</CodeBlock>
</div>
);
}
export default Example;
================================================
FILE: site/components/Footer.js
================================================
import React from 'react';
function Footer({ siteConfig }) {
const { customFields, organizationName } = siteConfig;
return (
<div className="footer">
<div className="legal pure-g">
<div className="pure-u-1 u-sm-1-2">
<p className="legal-license">
This site is built with ❤️ using Pure v{customFields.pureVersion}<br />
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.
</p>
</div>
<div className="pure-u-1 u-sm-1-2">
<ul className="legal-links">
<li><a href={`https://github.com/${organizationName}/${customFields.repoName}/`}>GitHub Project</a></li>
<li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li>
</ul>
<p className="legal-copyright">
© 2014 - Present Yahoo Inc. All rights reserved.
</p>
</div>
</div>
</div>
);
}
export default Footer;
================================================
FILE: site/components/Header.js
================================================
import React from 'react';
function Header({ description, title }) {
return (
<div className="header">
<h1>{title}</h1>
<h2>{description}</h2>
</div>
);
}
export default Header;
================================================
FILE: site/components/Menu.js
================================================
import Link from '@docusaurus/Link';
import React from 'react';
function Menu() {
return (
<>
<a href="#menu" id="menuLink" className="menu-link">
<span></span>
</a>
<div id="menu">
<div className="pure-menu">
<Link className="pure-menu-heading" to="/">Pure</Link>
<ul className="pure-menu-list">
<li className="pure-menu-item">
<Link to="/start/" className="pure-menu-link">Get Started</Link>
</li>
<li className="pure-menu-item">
<Link to="/layouts/" className="pure-menu-link">Layouts</Link>
</li>
<li className="pure-menu-item menu-item-divided">
<Link to="/base/" className="pure-menu-link">Base</Link>
</li>
<li className="pure-menu-item">
<Link to="/grids/" className="pure-menu-link">Grids</Link>
</li>
<li className="pure-menu-item">
<Link to="/forms/" className="pure-menu-link">Forms</Link>
</li>
<li className="pure-menu-item">
<Link to="/buttons/" className="pure-menu-link">Buttons</Link>
</li>
<li className="pure-menu-item">
<Link to="/tables/" className="pure-menu-link">Tables</Link>
</li>
<li className="pure-menu-item">
<Link to="/menus/" className="pure-menu-link">Menus</Link>
</li>
<li className="pure-menu-item menu-item-divided">
<Link to="/tools/" className="pure-menu-link">Tools</Link>
</li>
<li className="pure-menu-item">
<Link to="/customize/" className="pure-menu-link">Customize</Link>
</li>
<li className="pure-menu-item">
<Link to="/extend/" className="pure-menu-link">Extend</Link>
</li>
{/*
<li className="pure-menu-item">
<a href="http://blog.purecss.io/" className="pure-menu-link">Blog</a>
</li>
*/}
<li className="pure-menu-item">
<a href="https://github.com/pure-css/pure/releases/" className="pure-menu-link">Releases</a>
</li>
</ul>
</div>
</div>
</>
);
}
export default Menu;
================================================
FILE: site/components/SectionHeader.js
================================================
import React from 'react';
function SectionHeader({ heading, TagName = 'h2' }) {
// Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`.
const id = heading.toLowerCase()
.replace(/&[^\s;]+;?/g, '')
.replace(/[^\s\w-]+/g, '')
.replace(/\s+/g, '-');
return (
<TagName id={id} className="content-subhead">
{heading}
<a href={`#${id}`} className="content-link" title="Heading anchor"></a>
</TagName>
);
}
export default SectionHeader;
================================================
FILE: site/docusaurus.config.js
================================================
const { moduleSizes, PURE_DOWNLOAD_SNIPPET } = require('./lib/pure');
const { version } = require('../package.json');
module.exports = {
title: 'Pure',
tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.',
url: 'https://pure-css.github.io',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'pure-css',
plugins: [
[
'@docusaurus/plugin-content-pages',
{
path: 'src/pages',
},
],
[
'@docusaurus/plugin-google-analytics',
{
trackingID: 'UA-41480445-1',
anonymizeIP: true,
},
],
],
projectName: 'pure-css.github.io',
scripts: [
{
src: 'https://kit.fontawesome.com/f7f35653b1.js',
defer: true,
}
],
themes: ['@docusaurus/theme-classic'],
trailingSlash: true,
customFields: {
PURE_DOWNLOAD_SNIPPET,
moduleSizes: moduleSizes(),
pureVersion: version,
repoName: 'pure',
},
};
================================================
FILE: site/lib/pure.js
================================================
const crypto = require('crypto');
const fs = require('fs');
const gzip = require('gzip-size');
const path = require('path');
// load pure package metadata
const pureDir = path.dirname(require.resolve('purecss'));
const { version } = require(path.resolve(pureDir, 'package.json'));
const pureFiles = path.resolve(pureDir, 'build');
const pureMin = fs.readFileSync(path.resolve(pureFiles, 'pure-min.css'), 'utf8');
// use pure-min.css to determine site integrity hash
const sriHash = crypto.createHash('sha384').update(pureMin, 'utf8').digest('base64');
// copy/pastable code snippet for users
module.exports.PURE_DOWNLOAD_SNIPPET = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@${version}/build/pure-min.css" integrity="sha384-${sriHash}" crossorigin="anonymous">`;
// calculate each pure module size
module.exports.moduleSizes = function moduleSizes() {
const files = fs.readdirSync(pureFiles);
// collect all minified module files
const modules = files.filter(file => (/-min\.css$/).test(file))
.map(file => file.replace(/-min\.css$/, ''));
// get sizes across all modules
const moduleSizes = modules.map(module => {
const filePath = path.join(pureFiles, module + '-min.css');
const contents = fs.readFileSync(filePath, { encoding: 'utf-8' });
return gzip.sync(contents);
});
// return final list of sizes
return moduleSizes.reduce((map, size, i) => {
map[modules[i]] = size;
return map;
}, {});
};
================================================
FILE: site/lib/utils.js
================================================
/**
* Calculates filesize for a given module
*/
export function fileSize({ module, decimals = 1, filesizes }) {
const filesize = (filesizes[module] / 1024);
return filesize.toFixed(decimals) + 'KB';
}
/**
* Calculates the module percentage size against all modules
*/
export function filePercent({ modules, module, filesizes }) {
const total = modules.reduce((size, m) => {
return size + filesizes[m];
}, 0);
return (filesizes[module] / total * 100).toFixed(4) + '%';
}
/**
* Generic click handler for pages
*/
export function handleClick(e) {
e.preventDefault();
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}
================================================
FILE: site/package.json
================================================
{
"name": "pure",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "docusaurus build",
"deploy": "docusaurus deploy",
"predeploy": "npm run pure && npm run build",
"prestart": "npm run pure",
"pure": "cp -rf ./node_modules/purecss/build/ ./static/css/pure/",
"start": "docusaurus start",
"swizzle": "docusaurus swizzle"
},
"dependencies": {
"@docusaurus/core": "^3.7.0",
"@docusaurus/plugin-content-pages": "^3.7.0",
"@docusaurus/plugin-google-analytics": "^3.7.0",
"@docusaurus/theme-classic": "^3.7.0",
"classnames": "^2.5.1",
"common-tags": "^1.8.2",
"gzip-size": "^6.0.0",
"js-beautify": "^1.15.4",
"purecss": "^3.0.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-syntax-highlighter": "^15.6.1",
"webpack": "^5.98.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: site/src/index.js
================================================
const path = require('path');
module.exports = function() {
return {
name: 'pure-theme',
getThemePath() {
return path.resolve(__dirname, './theme');
},
getClientModules() {
return [];
},
};
};
================================================
FILE: site/src/pages/base/index.js
================================================
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
const title = 'Base';
const description = 'Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.';
function Base() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {
customFields: {
pureVersion,
},
} = siteConfig;
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="The Foundation" />
<p>
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><link></code> element on your page:
</p>
<CodeBlock wrap={true}>
{`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/base-min.css">`}
</CodeBlock>
<h3>A bit about Normalize.css</h3>
<p>
<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>:
</p>
<blockquote className="content-quote">
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."
</blockquote>
<p>
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.
</p>
<SectionHeader heading="Extras" />
<p>
In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites.
</p>
<h3>Hiding Elements</h3>
<p>
Add the <code>hidden</code> attribute to an HTML element to hide it from the screen via <code>display: none !important;</code>.
</p>
<CodeBlock wrap={true}>
{'<input type="text" name="_csrf" hidden>'}
</CodeBlock>
<h3>Responsive Images</h3>
<p>
Add the <code>.pure-img</code> class name to an <code><img></code> element to make it scale with the viewport. This is handy when building responsive websites.
</p>
<CodeBlock wrap={true}>
{'<img class="pure-img" src="...">'}
</CodeBlock>
<SectionHeader heading="Moving beyond Normalize" />
<p>
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.
</p>
<p>
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>.
</p>
</div>
</Layout>
);
}
export default Base;
================================================
FILE: site/src/pages/buttons/index.js
================================================
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import Example from '../../../components/Example';
import SectionHeader from '../../../components/SectionHeader';
import { handleClick } from '../../../lib/utils';
const title = 'Buttons';
const description = 'Simple CSS for buttons.';
function Buttons() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content" onClick={handleClick}>
<SectionHeader heading="Default Buttons" />
<p>
To create a Pure Button, add the <code>pure-button</code> classname to any <code><a></code> or <code><button></code> element.
</p>
<Example>
<a className="pure-button" href="#">A Pure Button</a>
<button className="pure-button">A Pure Button</button>
</Example>
<SectionHeader heading="Disabled Buttons" />
<p>
To mark a button as disabled, add the <code>pure-button-disabled</code> classname alongside <code>pure-button</code>.
Alternatively, add the "disabled" attribute directly to your button.
</p>
<Example>
<button className="pure-button pure-button-disabled">A Disabled Button</button>
<button className="pure-button" disabled>A Disabled Button</button>
</Example>
<SectionHeader heading="Active Buttons" />
<p>
To style a button so that it appears "pressed", add the <code>pure-button-active</code> classname alongside <code>pure-button</code>.
</p>
<Example>
<a className="pure-button pure-button-active" href="#">An Active Button</a>
<button className="pure-button pure-button-active">An Active Button</button>
</Example>
<SectionHeader heading="Primary Buttons" />
<p>
To indicate that a button represents a primary action, add the <code>pure-button-primary</code> classname alongside <code>pure-button</code>.
</p>
<Example>
<a className="pure-button pure-button-primary" href="#">A Primary Button</a>
<button className="pure-button pure-button-primary">A Primary Button</button>
</Example>
<SectionHeader heading="Customizing Buttons" />
<p>
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.
</p>
<p>
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.
</p>
<h3 className="content-subhead">Colored buttons with rounded corners</h3>
<Example>
<div>
<style dangerouslySetInnerHTML={{ __html: `
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
`}} />
<button className="button-success pure-button">Success Button</button>
<button className="button-error pure-button">Error Button</button>
<button className="button-warning pure-button">Warning Button</button>
<button className="button-secondary pure-button">Secondary Button</button>
</div>
</Example>
<h3 className="content-subhead">Buttons with different sizes</h3>
<Example>
<div>
<style dangerouslySetInnerHTML={{ __html: `
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
`}} />
<button className="button-xsmall pure-button">Extra Small Button</button>
<button className="button-small pure-button">Small Button</button>
<button className="pure-button">Regular Button</button>
<button className="button-large pure-button">Large Button</button>
<button className="button-xlarge pure-button">Extra Large Button</button>
</div>
</Example>
<h3 className="content-subhead">Buttons with icons</h3>
<p>
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><i></code> element within a <code>pure-button</code> element.
</p>
<Example>
<button className="pure-button">
<i className="fa fa-cog"></i>
Settings
</button>
<a className="pure-button" href="#">
<i className="fa fa-shopping-cart fa-lg"></i>
Checkout
</a>
</Example>
<SectionHeader heading="Button Groups" />
<p>
Group multiple buttons together on a single line.
</p>
<aside>
<p>
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="group"</code>, while toolbars should have <code>role="toolbar"</code>.
</p>
<p>
Additionally, a clear label should be provided since most assistive technologies will not announce them. The code snippet below provides an example.
</p>
</aside>
<Example>
<div className="pure-button-group" role="group" aria-label="...">
<button className="pure-button">A Pure Button</button>
<button className="pure-button">A Pure Button</button>
<button className="pure-button pure-button-active">A Pure Button</button>
</div>
</Example>
</div>
</Layout>
);
}
export default Buttons;
================================================
FILE: site/src/pages/customize/index.js
================================================
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
import { fileSize } from '../../../lib/utils';
const title = 'Customize';
const description = 'Choose the modules that you need.';
function Customize() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {
customFields: {
moduleSizes: filesizes,
pureVersion,
},
} = siteConfig;
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Rollups" />
<p>
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.
</p>
<div className="table-responsive">
<table className="pure-table pure-table-bordered">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
<th>Size (gzip)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Responsive Rollup</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-min.css</td>
<td>{fileSize({ module: 'pure', filesizes })}</td>
</tr>
<tr>
<td>Non-Responsive Rollup</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-nr-min.css</td>
<td>{fileSize({ module: 'pure-nr', filesizes })}</td>
</tr>
</tbody>
</table>
</div>
<aside>
<p>
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.
</p>
</aside>
<h3>Alternate CDNs</h3>
<p>
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.
</p>
<div className="table-responsive">
<table className="pure-table pure-table-bordered">
<thead>
<tr>
<th>CDN</th>
<th>URL</th>
<th>HTTPS</th>
<th>Combo</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://cdnjs.com/">cdnjs</a></td>
<td>{`//cdnjs.cloudflare.com/ajax/libs/pure/${pureVersion}/build/pure-min.css`}</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td><a href="https://www.keycdn.com/">KeyCDN</a></td>
<td>{`//opensource.keycdn.com/pure/${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td>
<td>{`//oss.maxcdn.com/libs/pure/${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://rawgit.com/">RawGit</a></td>
<td>{`//cdn.rawgit.com/pure-css/pure-release/v${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://www.staticfile.org/">Staticfile</a></td>
<td>{`//cdn.staticfile.org/pure/${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>
</tbody>
</table>
</div>
<p>
<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>
</p>
<SectionHeader heading="Individual Modules" />
<p>
You can also pull in the following modules individually.
</p>
<div className="table-responsive">
<table className="pure-table pure-table-bordered">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Base</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/base-min.css</td>
</tr>
<tr>
<td>Buttons</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/buttons-min.css</td>
</tr>
<tr>
<td>Forms (Responsive)</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/forms-min.css</td>
</tr>
<tr>
<td>Forms (Non-Responsive)</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/forms-nr-min.css</td>
</tr>
<tr>
<td>Grids (Base)</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/grids-min.css</td>
</tr>
<tr>
<td>Grids (Responsive)</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/grids-responsive-min.css</td>
</tr>
<tr>
<td>Menus (Responsive)</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/menus-min.css</td>
</tr>
<tr>
<td>Tables</td>
<td>https://cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/tables-min.css</td>
</tr>
</tbody>
</table>
</div>
<SectionHeader heading="Combo Handling" />
<p>
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.
</p>
<CodeBlock>
{`<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" />`}
</CodeBlock>
<p>
See the <a href="https://github.com/jsdelivr/jsdelivr#combine-multiple-files">jsDelivr combo handler documentation</a> to learn more about its features.
</p>
<SectionHeader heading="Contribute on GitHub" />
<p>
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>.
</p>
</div>
</Layout>
);
}
export default Customize;
================================================
FILE: site/src/pages/extend/index.js
================================================
import Link from '@docusaurus/Link';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
import { stripIndent } from 'common-tags';
const title = 'Extend';
const description = 'Build on top of Pure.';
function Extend() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<p>
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.
</p>
<aside>
<p>
Want a quick start? Take a look at some <Link href="/layouts/">layouts</Link> that we've built on top of Pure.
</p>
</aside>
<SectionHeader heading="Style Guide" />
<h3>Based on SMACSS</h3>
<p>
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>.
</p>
<h3>Class Name Conventions</h3>
<p>
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.
</p>
<p>
For example, let's consider the HTML and CSS for a <Link href="/forms/">Stacked Form</Link>:
</p>
<h4>Stacked Form: HTML</h4>
<p>
A stacked form is created by adding two class names, <code>pure-form</code> and <code>pure-form-stacked</code>.
</p>
<CodeBlock>
{'<form class="pure-form pure-form-stacked"></form>'}
</CodeBlock>
<h4>Stacked Form: CSS</h4>
<p>
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.
</p>
<CodeBlock>
{stripIndent`
/*
Standard rules that all Pure Forms have. This includes rules for
styling .pure-form <inputs>, <fieldsets>, and <legends>, as well as layout
rules such as vertical alignments.
*/
.pure-form { ... }
/*
Specific rules that apply to stacked forms. This includes rules
such as taking child <input> elements and making them display: block
for the stacked effect.
*/
.pure-form-stacked { ... }
`}
</CodeBlock>
<SectionHeader heading="Extending Pure" />
<p>
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:
</p>
<CodeBlock>
{'<form class="form-custom pure-form"></form>'}
</CodeBlock>
<CodeBlock className="test">
{stripIndent`
/* add your custom styles in this selector */
.form-custom { ... }
`}
</CodeBlock>
<p>
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.
</p>
<SectionHeader heading="Pure + Bootstrap + JavaScript" />
<p>
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:
</p>
<ul>
<li>
<p>
Your website or webapp's CSS will be a lot smaller — up to <em>5X smaller</em> in some cases!
</p>
</li>
<li>
<p>
You get Pure's minimalist look that's easy to build on top of. No need to overwrite styles!
</p>
</li>
</ul>
<p>
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.
</p>
<CodeBlock>
{stripIndent`
<!-- Button to trigger modal -->
<button type="button" class="pure-button-primary pure-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch Pure + Bootstrap Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
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.
</p>
<form class="pure-form pure-form-stacked">
<legend>A Stacked Form</legend>
<label for="email">Email</label>
<input id="email" type="text" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">State</label>
<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label class="pure-checkbox">
<input type="checkbox"> Remember me
</label>
</form>
</div>
<div class="modal-footer">
<button type="button" class="pure-button" data-bs-dismiss="modal">Close</button>
<button type="button" class="pure-button pure-button-primary">Save changes</button>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
`}
</CodeBlock>
</div>
</Layout>
);
}
export default Extend;
================================================
FILE: site/src/pages/forms/index.js
================================================
import Link from '@docusaurus/Link';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import Example from '../../../components/Example';
import SectionHeader from '../../../components/SectionHeader';
const title = 'Forms';
const description = 'Simple CSS for HTML forms.';
function Forms() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Default Form" />
<p>
To create a default inline form, add the <code>pure-form</code> classname to any <code><form></code> element.
</p>
<Example>
<form className="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<label htmlFor="default-remember">
<input id="default-remember" type="checkbox" /> Remember me
</label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</Example>
<SectionHeader heading="Stacked Form" />
<p>
To create a stacked form with input elements below the labels, add the <code>pure-form-stacked</code> classname to a <code><form></code> element alongside <code>pure-form</code>.
</p>
<Example>
<form className="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label htmlFor="stacked-email">Email</label>
<input id="stacked-email" type="email" placeholder="Email" />
<span className="pure-form-message">This is a required field.</span>
<label htmlFor="stacked-password">Password</label>
<input id="stacked-password" type="password" placeholder="Password" />
<label htmlFor="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label htmlFor="stacked-remember" className="pure-checkbox">
<input id="stacked-remember" type="checkbox" /> Remember me
</label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</Example>
<SectionHeader heading="Aligned Form" />
<p>
To create an aligned form, add the <code>pure-form-aligned</code> classname to a <code><form></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>.
</p>
<Example>
<form className="pure-form pure-form-aligned">
<fieldset>
<div className="pure-control-group">
<label htmlFor="aligned-name">Username</label>
<input id="aligned-name" type="text" placeholder="Username" />
<span className="pure-form-message-inline">This is a required field.</span>
</div>
<div className="pure-control-group">
<label htmlFor="aligned-password">Password</label>
<input id="aligned-password" type="password" placeholder="Password" />
</div>
<div className="pure-control-group">
<label htmlFor="aligned-email">Email Address</label>
<input id="aligned-email" type="email" placeholder="Email Address" />
</div>
<div className="pure-control-group">
<label htmlFor="aligned-foo">Supercalifragilistic Label</label>
<input id="aligned-foo" type="text" placeholder="Enter something here..." />
</div>
<div className="pure-controls">
<label htmlFor="aligned-cb" className="pure-checkbox">
<input id="aligned-cb" type="checkbox" /> I've read the terms and conditions
</label>
<button type="submit" className="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</Example>
<SectionHeader heading="Multi-Column Form (with Pure Grids)" />
<p>
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.
</p>
<Example>
<form className="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div className="pure-g">
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-first-name">First Name</label>
<input id="multi-first-name" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-last-name">Last Name</label>
<input id="multi-last-name" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-email">E-Mail</label>
<input id="multi-email" className="pure-u-23-24" type="email" required />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-city">City</label>
<input id="multi-city" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-state">State</label>
<select id="multi-state" className="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label htmlFor="multi-terms" className="pure-checkbox">
<input id="multi-terms" type="checkbox" /> I've read the terms and conditions
</label>
<button type="submit" className="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</Example>
<SectionHeader heading="Grouped Inputs" />
<p>
To group sets of text-based input elements, wrap them in a <code><fieldset></code> element with a <code>pure-group</code> classname. Grouped inputs work well for sign-up forms and look natural on mobile devices.
</p>
<Example>
<form className="pure-form">
<fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="Username" />
<input type="text" className="pure-input-1-2" placeholder="Password" />
<input type="email" className="pure-input-1-2" placeholder="Email" />
</fieldset>
<fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="A title" />
<textarea className="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>
<button type="submit" className="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
</Example>
<SectionHeader heading="Input Sizing" />
<p>
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.
</p>
<Example>
<form className="pure-form">
<input className="pure-input-1" type="text" placeholder=".pure-input-1" /><br />
<input className="pure-input-2-3" type="text" placeholder=".pure-input-2-3" /><br />
<input className="pure-input-1-2" type="text" placeholder=".pure-input-1-2" /><br />
<input className="pure-input-1-3" type="text" placeholder=".pure-input-1-3" /><br />
<input className="pure-input-1-4" type="text" placeholder=".pure-input-1-4" /><br />
</form>
</Example>
<p>
You can control input sizing even further by wrapping them in grid containers. In the example below, the <code><input></code> elements have a <code>pure-input-1</code> class, but are wrapped in a <code><div></code> with a specific grid class.
</p>
<Example>
<form className="pure-form pure-g">
<div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div>
<div className="pure-u-3-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-3-4" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div>
<div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div>
<div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-5" />
</div>
<div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div>
<div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div>
<div className="pure-u-1">
<input className="pure-input-1" type="text" placeholder=".pure-u-1" />
</div>
</form>
</Example>
<SectionHeader heading="Required Inputs" />
<p>
To mark a form control as required, add the <code>required</code> attribute.
</p>
<Example>
<form className="pure-form">
<input type="email" placeholder="Requires an email" required />
</form>
</Example>
<SectionHeader heading="Disabled Inputs" />
<p>
To disable a form control, add the <code>disabled</code> attribute.
</p>
<Example>
<form className="pure-form">
<input type="text" placeholder="Disabled input here..." disabled />
</form>
</Example>
<SectionHeader heading="Read-Only Inputs" />
<p>
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.
</p>
<Example>
<form className="pure-form">
<input type="text" value="Readonly input here..." readOnly />
</form>
</Example>
<SectionHeader heading="Rounded Inputs" />
<p>
To display a form control with rounded corners, add the <code>pure-input-rounded</code> classname.
</p>
<Example>
<form className="pure-form">
<input type="text" className="pure-input-rounded" />
<button type="submit" className="pure-button">Search</button>
</form>
</Example>
<SectionHeader heading="Checkboxes and Radios" />
<p>
To normalize and align checkboxes and radio inputs, add the <code>pure-checkbox</code> or <code>pure-radio</code> classname.
</p>
<Example>
<form className="pure-form">
<label htmlFor="checkbox-radio-option-one" className="pure-checkbox">
<input id="checkbox-radio-option-one" type="checkbox" value="" /> Here's option one.
</label>
<label htmlFor="checkbox-radio-option-two" className="pure-radio">
<input id="checkbox-radio-option-two" type="radio" name="optionsRadios" value="option1" defaultChecked /> Here's a radio button. You can choose this one..
</label>
<label htmlFor="checkbox-radio-option-three" className="pure-radio">
<input id="checkbox-radio-option-three" type="radio" name="optionsRadios" value="option2" /> ..Or this one!
</label>
</form>
</Example>
</div>
</Layout>
);
}
export default Forms;
================================================
FILE: site/src/pages/grids/index.js
================================================
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
import { stripIndent } from 'common-tags';
import './styles.css';
const title = 'Grids';
const description = 'Fully customizable and responsive CSS grids.';
function Grids() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {
customFields: {
pureVersion
}
} = siteConfig;
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Introduction to Pure Grids" />
<p>Pure Grids are easy to work with, and very powerful. There are a few simple concepts to keep in mind:</p>
<dl>
<dt>Grid classes vs. unit classes</dt>
<dd>
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>)
</dd>
<dt>The widths of the units are fractions</dt>
<dd>
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%.
</dd>
<dt>All child elements of a grid must be units</dt>
<dd>
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.
</dd>
<dt>Content goes inside grid units</dt>
<dd>
All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
</dd>
</dl>
<p>
Let's start with a simple example. Here's a grid with three columns:
</p>
<CodeBlock wrap={true}>
{stripIndent`
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
`}
</CodeBlock>
<SectionHeader heading="Grids Units Sizes" />
<p>
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>.
</p>
<h3>5ths-Based Units</h3>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-5</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-5"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">2-5</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-2-5"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">3-5</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-3-5"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">4-5</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-4-5"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-1</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">5-5</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-5-5"></div>
</div>
</div>
</div>
<h3>24ths-Based Units</h3>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-12</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-12"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">2-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-2-24"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">3-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-3-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-8</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-8"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">4-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-4-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-6</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-6"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">5-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-5-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-4</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-4"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">6-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-6-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">7-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-7-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-3</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-3"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">8-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-8-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">3-8</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-3-8"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">9-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-9-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">5-12</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-5-12"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">10-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-10-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">11-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-11-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-2</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-2"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">12-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-12-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">13-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-13-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">7-12</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-7-12"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">14-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-14-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">5-8</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-5-8"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">15-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-15-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">2-3</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-2-3"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">16-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-16-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">17-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-17-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">3-4</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-3-4"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">18-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-18-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">19-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-19-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">5-6</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-5-6"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">20-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-20-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">7-8</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-7-8"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">21-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-21-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">11-12</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-11-12"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">22-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-22-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">23-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-23-24"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div className="grids-unit pure-g">
<div className="grids-unit-width pure-u">1-1</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div className="grids-unit grids-unit-not-reduced pure-g">
<div className="grids-unit-width pure-u">24-24</div>
<div className="grids-unit-details pure-u-1">
<div className="pure-g">
<div className="grids-unit-bar pure-u-24-24"></div>
</div>
</div>
</div>
<h3>Custom Unit Sizes</h3>
<p>
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—we use this tool to generate Pure's built-in unit sizes.
</p>
<SectionHeader heading="Pure Responsive Grids" />
<p>
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.
</p>
<h3>Including on Your Page</h3>
<p>
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><link></code> tag to your page.
</p>
<CodeBlock>
{`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/grids-responsive-min.css" />`}
</CodeBlock>
<h3>Pure's Regular Grid vs. Responsive Grid</h3>
<p>
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.
</p>
<CodeBlock wrap={true}>
{stripIndent`
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>
`}
</CodeBlock>
<p>
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.
</p>
<CodeBlock wrap={true}>
{stripIndent`
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
`}
</CodeBlock>
<h3>Default Media Queries</h3>
<p>
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.
</p>
<div className="table-responsive">
<table className="mq-table pure-table-bordered pure-table">
<thead>
<tr>
<th className="highlight">Key</th>
<th className="highlight">CSS Media Query</th>
<th>Applies</th>
<th>Classname</th>
</tr>
</thead>
<tbody>
<tr>
<td className="highlight"><i>None</i></td>
<td className="highlight"><i>None</i></td>
<td><i>Always</i></td>
<td><code>.pure-u-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>sm</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td>
<td>≥ <b>568px</b></td>
<td><code>.pure-u-<b>sm</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>md</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td>
<td>≥ <b>768px</b></td>
<td><code>.pure-u-<b>md</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>lg</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td>
<td>≥ <b>1024px</b></td>
<td><code>.pure-u-<b>lg</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>xl</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td>
<td>≥ <b>1280px</b></td>
<td><code>.pure-u-<b>xl</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>xxl</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 120em)</code></td>
<td>≥ <b>1920px</b></td>
<td><code>.pure-u-<b>xxl</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>xxxl</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 160em)</code></td>
<td>≥ <b>2560px</b></td>
<td><code>.pure-u-<b>xxxl</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>x4k</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 240em)</code></td>
<td>≥ <b>3840px</b></td>
<td><code>.pure-u-<b>x4k</b>-*</code></td>
</tr>
</tbody>
</table>
</div>
{/*
<aside>
<p>
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.
</p>
</aside>
*/}
<h3>Using Relative Units for Widths</h3>
<p>
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.
</p>
<p>
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:
</p>
<CodeBlock wrap={true}>
{'1em == 16px *'}
</CodeBlock>
<p>
<small>
* 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.
</small>
</p>
<h3>An Example of Pure Responsive Grids</h3>
<p>
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.
</p>
<p>
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>
</p>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div className="l-box">
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div className="l-box">
<h3>Dolor Sit Amet</h3>
<p>
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</p>
</div>
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div className="l-box">
<h3>Proident laborum</h3>
<p>
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.
</p>
</div>
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div className="l-box">
<h3>Praesent consectetur</h3>
<p>
Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
</p>
</div>
</div>
<div className="pure-u-1">
<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" />
</div>
<div className="pure-u-2-5">
<div className="l-box">
<h3>Two-Fifth Column</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
</p>
</div>
</div>
<div className="pure-u-3-5">
<div className="l-box">
<h3>Three-Fifth Column</h3>
<p>
Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
</p>
<p>
Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
</p>
</div>
</div>
</div>
</div>
<div className="content">
<SectionHeader heading="Grids on Mobile" />
<p>
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.
</p>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1-3">
<div className="l-box">
<h3>Thirds</h3>
<p>This cell will be 1/3 width all the time.</p>
</div>
</div>
<div className="pure-u-1-3">
<div className="l-box">
<h3>Thirds</h3>
<p>This cell will be 1/3 width all the time.</p>
</div>
</div>
<div className="pure-u-1-3">
<div className="l-box">
<h3>Thirds</h3>
<p>This cell will be 1/3 width all the time.</p>
</div>
</div>
</div>
</div>
<div className="content">
<SectionHeader heading="Responsive Images" />
<p>
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.
</p>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake" />
</div>
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train" />
</div>
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store" />
</div>
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain" />
</div>
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm8.staticflickr.com/7478/16185861115_4ed6353a97.jpg" alt="Miami" />
</div>
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm3.staticflickr.com/4068/4666556755_091acf3253.jpg" alt="BCE Place, Toronto" />
</div>
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm6.staticflickr.com/7313/13136053333_f04b335933.jpg" alt="Banff" />
</div>
<div className="pure-u-1-4 pure-u-lg-1-8">
<img className="pure-img" src="http://farm3.staticflickr.com/7628/16754137141_27dcaabd24.jpg" alt="Boston North Point Park" />
</div>
</div>
</div>
<div className="content">
<SectionHeader heading="Applying Padding and Borders to Grid Units" />
<p>
To add borders and padding to Pure Grids, you have two options. The first option is to nest a <code><div></code> inside each Grid unit and style the child container:
</p>
<CodeBlock wrap={true}>
{stripIndent`
<style>
.l-box {
padding: 1em;
}
</style>
...
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box"> ... </div>
</div>
<div class="pure-u-1-2">
<div class="l-box"> ... </div>
</div>
</div>
`}
</CodeBlock>
<p>
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:
</p>
<CodeBlock wrap={true}>
{stripIndent`
<style>
.pure-g > div {
box-sizing: border-box;
}
.l-box {
padding: 1em;
}
</style>
...
<div class="pure-g">
<div class="pure-u-1-2 l-box"> ... </div>
<div class="pure-u-1-2 l-box"> ... </div>
</div>
`}
</CodeBlock>
<p>
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.
</p>
<SectionHeader heading="Want to just use Grids?" />
<p>
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><link></code> elements in your <code><head></code>.
</p>
<CodeBlock>
{stripIndent`
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/base-min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/grids-min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@${pureVersion}/build/grids-responsive-min.css">
`}
</CodeBlock>
{/*
<aside>
<p>
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!
</p>
</aside>
*/}
</div>
</Layout>
);
}
export default Grids;
================================================
FILE: site/src/pages/grids/styles.css
================================================
.grids-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grids-unit-width {
width: 4em;
margin-left: -4.5em;
padding-right: 0.5em;
line-height: 2em;
text-align: right;
vertical-align: baseline;
}
.grids-unit .grids-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grids-unit-details {
position: relative;
background: #fafafa
}
.grids-unit-classnames {
position: absolute;
left: 0.5em;
}
.grids-unit-classname {
margin-right: 1em;
}
.grids-unit-classname code {
background: none;
padding: 0;
margin: 0;
}
.grids-unit-bar {
height: 2em;
background: #eee;
}
/* hack - start.css is being pulled in, overwrite for now */
.grids .grids-example [class *= "pure-u"] {
padding: 0;
border-width: 1px 0 0;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
}
================================================
FILE: site/src/pages/index.js
================================================
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import React from 'react';
import Layout from '@theme/Layout';
import CodeBlock from '../../components/CodeBlock';
import { filePercent, fileSize } from '../../lib/utils';
import './styles.css';
const renderModuleSize = (filesizes) => {
const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];
return modules.map((module, idx) => (
<div key={idx} className={`size-chart-${module} pure-u`} style={{width: filePercent({ modules, module, filesizes })}}>
<Link className="size-chart-item" to={`/${module}`}>
<span className="size-chart-label">
<span className="size-chart-mod">{module}</span>
<span className="size-chart-size">{fileSize({ module, filesizes })}</span>
</span>
</Link>
</div>
));
};
function Home() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {
customFields: {
moduleSizes,
PURE_DOWNLOAD_SNIPPET,
repoName,
},
organizationName,
} = siteConfig;
const renderSize = renderModuleSize(moduleSizes);
return (
<Layout description={siteConfig.tagline}>
<div className="hero">
<div className="hero-titles">
<img className="logo" src={useBaseUrl('img/logo_pure@2x.png')} alt="Pure" />
<h2 className="hero-tagline">A set of small, responsive CSS modules that you can use in every web project.</h2>
</div>
<div className="hero-cta">
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<p>
<Link className="button-cta pure-button" to="/start/">Get Started</Link>
<a className="button-secondary pure-button" href={`https://github.com/${organizationName}/${repoName}/`}>View on GitHub</a>
</p>
</div>
</div>
<div className="marketing">
<div className="size-chart pure-g">
{renderSize}
</div>
<div className="content">
<h3 className="marketing-header">CSS with a minimal footprint.</h3>
<p>
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.
</p>
<p style={{fontSize: 'smaller'}}>
* We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.
</p>
</div>
</div>
<div className="marketing l-wrap pure-g">
<div className="content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3">
<h3 className="marketing-header">Your CSS foundation.</h3>
<p>
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.
</p>
</div>
<div className="content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3">
<h3 className="marketing-header">Made with mobile in mind.</h3>
<p>
Pure is responsive out of the box, so elements look great on all screen sizes.
</p>
</div>
<div className="content pure-u-1 pure-u-lg-3-4 pure-u-xl-1-3">
<h3 className="marketing-header">Stays out of your way.</h3>
<p>
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.
</p>
</div>
</div>
<div className="marketing l-wrap pure-g">
<div className="marketing-diagram content pure-u-1 pure-u-sm-2-3 pure-u-md-1-2">
<Link to="/layouts">
<img src={useBaseUrl('img/layout-icon.jpg')} className="pure-img-responsive" alt="Diagram of a sample layout." />
</Link>
</div>
<div className="content pure-u-1 pure-u-md-1-2">
<h3 className="marketing-header">Create responsive layouts.</h3>
<p>
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.
</p>
<p>
<Link to="/layouts/" className="pure-button">View Layouts</Link>
</p>
</div>
</div>
<div className="marketing marketing-customize l-wrap pure-g">
<div className="content pure-u-1 pure-u-md-1-2">
<h3 className="marketing-header">Create your own look and feel.</h3>
<p>
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.
</p>
<p>
<Link to="/extend/" className="pure-button">Extend Pure</Link>
</p>
</div>
<div className="sample-buttons content pure-u-1 pure-u-md-1-2">
<div className="pure-g">
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="pure-button">Default</button>
</span>
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="button-a pure-button">Blue</button>
</span>
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="button-b pure-button">Yellow</button>
</span>
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="button-c pure-button">Black</button>
</span>
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="button-d pure-button">Green</button>
</span>
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="button-e pure-button">Red</button>
</span>
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="button-f pure-button">Purple</button>
</span>
<span className="sample-button pure-u-1-2 pure-u-sm-1-3">
<button className="button-g pure-button">Orange</button>
</span>
<span className="sample-button pure-u-1 pure-u-sm-1-3">
<button className="button-h pure-button">Indigo</button>
</span>
</div>
</div>
</div>
</Layout>
);
}
export default Home;
================================================
FILE: site/src/pages/layouts/README.md
================================================
Pure CSS Layout Examples
========================
Layout examples using [Pure CSS][pure] compiled from the [pure-site][] project.
[pure]: http://purecss.io/
[pure-site]: https://github.com/pure-css/pure-site
License
-------
This software is free to use under the zLib license.
See the [zLib][] license for more information.
[zLib]: http://www.zlib.net/zlib_license.html
================================================
FILE: site/src/pages/layouts/index.js
================================================
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import React from 'react';
import Layout from '@theme/Layout';
import Header from '../../../components/Header';
import SectionHeader from '../../../components/SectionHeader';
import './styles.css';
const title = 'Layouts';
const description = 'Quickstart your next web project with these example layouts.';
const layouts = [
{
type: 'blog',
title: 'Blog',
summary: 'A layout example that shows off a blog page with a list of posts.',
modules: ['base', 'grids', 'buttons', 'menus']
},
{
type: 'email',
title: 'Email',
summary: 'A layout example that shows off a responsive email layout.',
modules: ['base', 'grids', 'buttons', 'menus']
},
{
type: 'gallery',
title: 'Photo Gallery',
summary: 'A layout example that shows off a responsive photo gallery.',
modules: ['base', 'grids', 'forms', 'buttons', 'menus']
},
{
type: 'marketing',
title: 'Landing Page',
summary: 'A layout example that shows off a responsive product landing page.',
modules: ['base', 'grids', 'forms', 'buttons', 'menus']
},
{
type: 'pricing',
title: 'Pricing Table',
summary: 'A layout example that shows off a responsive pricing table.',
modules: ['base', 'grids', 'buttons', 'menus']
},
{
type: 'side-menu',
title: 'Responsive Side Menu',
summary: 'A layout example with a side menu that hides on mobile, just like the Pure website.',
modules: ['base', 'grids', 'menus']
},
{
type: 'tucked-menu-vertical',
title: 'Responsive Horizontal-to-Vertical Menu',
summary: 'A set of horizontal menus that switch to vertical and which hide at small window widths.',
modules: ['base', 'grids', 'menus']
},
{
type: 'tucked-menu',
title: 'Responsive Horizontal-to-Scrollable Menu',
summary: 'Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.',
modules: ['base', 'menus']
}
];
const renderLayouts = (layout, idx) => (
<div key={idx} className="layout-item l-wrap pure-g">
<div className="layout-item-screenshot content pure-u-1 u-sm-1-2">
<a href={`/layouts/${layout.type}/`}>
<img src={useBaseUrl(`img/layouts/${layout.type}@2x.jpg`)} className="pure-img-responsive" width="400" height="214"
alt={`Screenshot of ${layout.title} example layout`} />
</a>
</div>
<div className="layout-item-content content pure-u-1 u-sm-1-2">
<h3 className="layout-item-head">{layout.title}</h3>
<p>{layout.summary}</p>
<ul className="layout-item-modules pure-g">
{layout.modules.map((m, idx) => (
<li key={idx} className={`layout-item-module layout-item-module-${m} pure-u`}>
<Link to={`/${m}`}>{m}</Link>
</li>
))}
</ul>
<p>
<a href={`/layouts/${layout.type}/`}
className="pure-button pure-button-primary">View</a>
<a href={`https://github.com/pure-css/pure/tree/main/site/static/layouts/${layout.type}`}
className="pure-button">Source</a>
</p>
</div>
</div>
);
function Layouts() {
const layoutMarkup = layouts.map(renderLayouts);
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Common Layouts" />
<p>
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
certain menu interactions).
</p>
<aside>
<p>
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>.
</p>
</aside>
{layoutMarkup}
</div>
</Layout>
);
}
export default Layouts;
================================================
FILE: site/src/pages/layouts/styles.css
================================================
.layout-item {
margin-top: 2em;
padding-top: 2em;
border-top: 1px solid #eee;
}
.layout-item-screenshot {
text-align: center;
}
.layout-item-head {
margin-top: 0; /* so that the .layout-item-head lines up with the image */
}
.layout-item-modules {
padding: 0;
}
.layout-item-module {
margin-right: 0.5714em;
font-size: 0.875em;
}
.layout-item-module-base a {
border-left: 3px solid rgb(14, 144, 210);
}
.layout-item-module-grids a {
border-left: 3px solid rgb(128, 88, 165);
}
.layout-item-module-forms a {
border-left: 3px solid rgb(94, 185, 94);
}
.layout-item-module-buttons a {
border-left: 3px solid rgb(221, 81, 76);
}
.layout-item-module-tables a {
border-left: 3px solid rgb(243, 123, 29);
}
.layout-item-module-menus a {
border-left: 3px solid rgb(250, 210, 50);
}
.layout-item-module a:link,
.layout-item-module a:visited {
text-transform: capitalize;
color: rgb(75, 75, 75);
padding: 0 0.5714em;
line-height: 1.75;
display: block;
}
.layout-item-content .pure-button {
margin-right: 5px;
}
================================================
FILE: site/src/pages/menus/index.js
================================================
import Link from '@docusaurus/Link';
import React, { useEffect } from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import Example from '../../../components/Example';
import SectionHeader from '../../../components/SectionHeader';
import { handleClick } from '../../../lib/utils';
const title = 'Menus';
const description = 'Simple CSS for menus.';
let menuLoaded = false;
function Menus() {
// load external menu js dynamically
useEffect(() => {
if (!menuLoaded) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/menus.js';
document.head.appendChild(script);
menuLoaded = true;
}
});
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content" onClick={handleClick}>
<SectionHeader heading="Vertical Menu" />
<p>
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.
</p>
<Example>
<style dangerouslySetInnerHTML={{ __html: `
.custom-restricted-width {
/* To limit the menu width to the content of the menu: */
display: inline-block;
/* Or set the width explicitly: */
/* width: 10em; */
}
`}} />
<div className="pure-menu custom-restricted-width">
<span className="pure-menu-heading">Yahoo Sites</span>
<ul className="pure-menu-list">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
<li className="pure-menu-heading">More Sites</li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Games</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">OMG!</a></li>
</ul>
</div>
</Example>
<SectionHeader heading="Horizontal Menu" />
<p>
To create a horizontal menu, add the <code>pure-menu-horizontal</code> class name.
</p>
<Example>
<div className="pure-menu pure-menu-horizontal">
<a href="#" className="pure-menu-heading pure-menu-link">BRAND</a>
<ul className="pure-menu-list">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
</ul>
</div>
</Example>
<SectionHeader heading="Selected and Disabled Items" />
<p>
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.
</p>
<Example>
<div className="pure-menu pure-menu-horizontal">
<ul className="pure-menu-list">
<li className="pure-menu-item pure-menu-selected"><a href="#" className="pure-menu-link">Selected</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Normal</a></li>
<li className="pure-menu-item pure-menu-disabled"><a href="#" className="pure-menu-link">Disabled</a></li>
</ul>
</div>
</Example>
<SectionHeader heading="Dropdowns" />
<p>
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.
</p>
<p>
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.
</p>
<Example>
<div className="pure-menu pure-menu-horizontal">
<ul className="pure-menu-list">
<li className="pure-menu-item pure-menu-selected"><a href="#" className="pure-menu-link">Home</a></li>
<li className="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" className="pure-menu-link">Contact</a>
<ul className="pure-menu-children">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Email</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Twitter</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Tumblr Blog</a></li>
</ul>
</li>
</ul>
</div>
</Example>
<SectionHeader heading="Vertical Menu with Submenus" />
<p>
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.
</p>
<Example>
<div className="pure-menu custom-restricted-width">
<ul className="pure-menu-list">
<li className="pure-menu-item pure-menu-selected"><a href="#" className="pure-menu-link">Flickr</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
<li className="pure-menu-item pure-menu-has-children">
<a href="#" id="menuLink1" className="pure-menu-link">More</a>
<ul className="pure-menu-children">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
<li className="pure-menu-item pure-menu-has-children">
<a href="#" id="menuLink1" className="pure-menu-link">Even More</a>
<ul className="pure-menu-children">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Foo</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Bar</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Baz</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</Example>
<SectionHeader heading="Scrollable Horizontal Menu" />
<p>
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.
</p>
<Example>
<div className="pure-menu pure-menu-horizontal pure-menu-scrollable">
<a href="#" className="pure-menu-link pure-menu-heading">Yahoo</a>
<ul className="pure-menu-list">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Beauty</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Movies</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Small Business</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Cricket</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Tech</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">World</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Support</a></li>
</ul>
</div>
</Example>
<SectionHeader heading="Scrollable Vertical Menu" />
<p>
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.
</p>
<Example>
<style dangerouslySetInnerHTML={{ __html: `
/* Customization to limit height of the menu */
.custom-restricted {
height: 160px;
width: 150px;
border: 1px solid gray;
border-radius: 4px;
}
`}} />
<div className="pure-menu pure-menu-scrollable custom-restricted">
<a href="#" className="pure-menu-link pure-menu-heading">Yahoo</a>
<ul className="pure-menu-list">
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Beauty</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Movies</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Small Business</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Cricket</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Tech</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">World</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Support</a></li>
</ul>
</div>
</Example>
<SectionHeader heading="Responsive Menus That Hide" />
<p>
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:
</p>
<Example>
<ul>
<li><a href="/layouts/side-menu/">Responsive Vertical Menu</a>, which
collapses behind a hamburger,
similar to the menu on this Pure website.
</li>
<li><a href="/layouts/tucked-menu/">Responsive Horizontal-Scrollable Menu</a>,
which tucks out of the way on small screens.
</li>
<li><a href="/layouts/tucked-menu-vertical/">Responsive Horizontal-to-Vertical Menu</a>,
which slides out of view.
</li>
</ul>
</Example>
</div>
</Layout>
);
}
export default Menus;
================================================
FILE: site/src/pages/start/index.js
================================================
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import SectionHeader from '../../../components/SectionHeader';
import CodeBlock from '../../../components/CodeBlock';
import { stripIndent } from 'common-tags';
import './styles.css';
const title = 'Get Started';
const description = 'Start your next web project with Pure.';
function Start() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {
customFields: {
PURE_DOWNLOAD_SNIPPET,
pureVersion
}
} = siteConfig;
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Add Pure to Your Page" />
<p>
You can add Pure to your page via the <b>free jsDelivr CDN</b>. Just add the following <code><link></code> element into your page's <code><head></code>, before your project's stylesheets.
</p>
</div>
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<div className="content">
<aside>
<p>
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>.
</p>
</aside>
<SectionHeader heading="Add the Viewport Meta Element" />
<p>
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><head></code>.
</p>
</div>
<CodeBlock full={true} wrap={true}>
{'<meta name="viewport" content="width=device-width, initial-scale=1">'}
</CodeBlock>
<div className="content">
<SectionHeader heading="Understand Pure Grids" />
<p>
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.
</p>
<p>
Here's a grid with three columns:
</p>
<CodeBlock wrap={true}>
{stripIndent`
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
`}
</CodeBlock>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
<div className="pu
gitextract_j5euxoq_/
├── .csslintrc
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ ├── stale.yml
│ └── workflows/
│ ├── deploy.yml
│ └── test.yml
├── .gitignore
├── .npmrc
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── CREDITS.md
├── Gruntfile.js
├── HISTORY.md
├── LICENSE
├── README.md
├── RELEASE.md
├── composer.json
├── eslint.config.mjs
├── index.js
├── package.json
├── site/
│ ├── .gitignore
│ ├── README.md
│ ├── components/
│ │ ├── CodeBlock.js
│ │ ├── Example.js
│ │ ├── Footer.js
│ │ ├── Header.js
│ │ ├── Menu.js
│ │ └── SectionHeader.js
│ ├── docusaurus.config.js
│ ├── lib/
│ │ ├── pure.js
│ │ └── utils.js
│ ├── package.json
│ ├── src/
│ │ ├── index.js
│ │ ├── pages/
│ │ │ ├── base/
│ │ │ │ └── index.js
│ │ │ ├── buttons/
│ │ │ │ └── index.js
│ │ │ ├── customize/
│ │ │ │ └── index.js
│ │ │ ├── extend/
│ │ │ │ └── index.js
│ │ │ ├── forms/
│ │ │ │ └── index.js
│ │ │ ├── grids/
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── index.js
│ │ │ ├── layouts/
│ │ │ │ ├── README.md
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── menus/
│ │ │ │ └── index.js
│ │ │ ├── start/
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── styles.css
│ │ │ ├── tables/
│ │ │ │ └── index.js
│ │ │ └── tools/
│ │ │ └── index.js
│ │ └── theme/
│ │ └── Layout.js
│ └── static/
│ ├── .nojekyll
│ ├── css/
│ │ └── main.css
│ ├── js/
│ │ ├── grids.js
│ │ ├── menus.js
│ │ ├── track-downloads.js
│ │ └── ui.js
│ └── layouts/
│ ├── blog/
│ │ ├── index.html
│ │ └── styles.css
│ ├── email/
│ │ ├── index.html
│ │ └── styles.css
│ ├── gallery/
│ │ ├── index.html
│ │ └── styles.css
│ ├── marketing/
│ │ ├── index.html
│ │ └── styles.css
│ ├── pricing/
│ │ ├── index.html
│ │ └── styles.css
│ ├── side-menu/
│ │ ├── index.html
│ │ └── styles.css
│ ├── tucked-menu/
│ │ └── index.html
│ └── tucked-menu-vertical/
│ └── index.html
├── src/
│ ├── base/
│ │ └── css/
│ │ └── base.css
│ ├── buttons/
│ │ ├── css/
│ │ │ ├── buttons-core.css
│ │ │ └── buttons.css
│ │ └── tests/
│ │ └── manual/
│ │ └── button.html
│ ├── forms/
│ │ ├── css/
│ │ │ ├── forms-r.css
│ │ │ └── forms.css
│ │ └── tests/
│ │ └── manual/
│ │ └── forms.html
│ ├── grids/
│ │ ├── README.md
│ │ ├── css/
│ │ │ └── grids-core.css
│ │ └── tests/
│ │ └── manual/
│ │ └── responsive.html
│ ├── menus/
│ │ ├── css/
│ │ │ ├── menus-core.css
│ │ │ ├── menus-dropdown.css
│ │ │ ├── menus-horizontal.css
│ │ │ ├── menus-scrollable.css
│ │ │ └── menus-skin.css
│ │ └── tests/
│ │ └── manual/
│ │ └── menus.html
│ └── tables/
│ ├── css/
│ │ └── tables.css
│ └── tests/
│ └── manual/
│ └── tables.html
├── tasks/
│ ├── license.js
│ └── suppress.js
└── test/
└── index.js
SYMBOL INDEX (31 symbols across 24 files)
FILE: site/components/CodeBlock.js
function CodeBlock (line 6) | function CodeBlock({ children, language = 'html', full = false, wrap = f...
FILE: site/components/Example.js
function Example (line 6) | function Example({ children }) {
FILE: site/components/Footer.js
function Footer (line 3) | function Footer({ siteConfig }) {
FILE: site/components/Header.js
function Header (line 3) | function Header({ description, title }) {
FILE: site/components/Menu.js
function Menu (line 4) | function Menu() {
FILE: site/components/SectionHeader.js
function SectionHeader (line 3) | function SectionHeader({ heading, TagName = 'h2' }) {
FILE: site/lib/utils.js
function fileSize (line 4) | function fileSize({ module, decimals = 1, filesizes }) {
function filePercent (line 12) | function filePercent({ modules, module, filesizes }) {
function handleClick (line 22) | function handleClick(e) {
FILE: site/src/index.js
method getThemePath (line 6) | getThemePath() {
method getClientModules (line 10) | getClientModules() {
FILE: site/src/pages/base/index.js
function Base (line 12) | function Base() {
FILE: site/src/pages/buttons/index.js
function Buttons (line 11) | function Buttons() {
FILE: site/src/pages/customize/index.js
function Customize (line 13) | function Customize() {
FILE: site/src/pages/extend/index.js
function Extend (line 12) | function Extend() {
FILE: site/src/pages/forms/index.js
function Forms (line 11) | function Forms() {
FILE: site/src/pages/grids/index.js
function Grids (line 14) | function Grids() {
FILE: site/src/pages/index.js
function Home (line 24) | function Home() {
FILE: site/src/pages/layouts/index.js
function Layouts (line 94) | function Layouts() {
FILE: site/src/pages/menus/index.js
function Menus (line 13) | function Menus() {
FILE: site/src/pages/start/index.js
function Start (line 13) | function Start() {
FILE: site/src/pages/tables/index.js
function Tables (line 10) | function Tables() {
FILE: site/src/pages/tools/index.js
function Tools (line 11) | function Tools() {
FILE: site/src/theme/Layout.js
function Layout (line 17) | function Layout(props) {
FILE: site/static/js/menus.js
function PureDropdown (line 9) | function PureDropdown(dropdownParent) {
function initDropdowns (line 163) | function initDropdowns() {
FILE: site/static/js/track-downloads.js
function trackDownload (line 8) | function trackDownload(category, name) {
FILE: site/static/js/ui.js
function getElements (line 5) | function getElements() {
function toggleClass (line 13) | function toggleClass(element, className) {
function toggleAll (line 32) | function toggleAll() {
function handleEvent (line 41) | function handleEvent(e) {
Condensed preview — 94 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (445K chars).
[
{
"path": ".csslintrc",
"chars": 283,
"preview": "{\n \"adjoining-classes\" : false,\n \"box-sizing\" : false,\n \"display-property-grouping\": false"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 864,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the b"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 595,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your fea"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 524,
"preview": "Please consider the following before submitting a pull request:\n\nGuidelines for contributing: https://github.com/pure-cs"
},
{
"path": ".github/dependabot.yml",
"chars": 455,
"preview": "version: 2\nupdates:\n # repository root\n - package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: dail"
},
{
"path": ".github/stale.yml",
"chars": 2115,
"preview": "# Configuration for probot-stale - https://github.com/probot/stale\n\n# Number of days of inactivity before an Issue or Pu"
},
{
"path": ".github/workflows/deploy.yml",
"chars": 799,
"preview": "name: Deploy\n\non:\n push:\n branches: [main]\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n\n steps:\n - uses: act"
},
{
"path": ".github/workflows/test.yml",
"chars": 346,
"preview": "name: Testing\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n test:\n runs-on: ubuntu-"
},
{
"path": ".gitignore",
"chars": 74,
"preview": ".DS_Store\n.nyc_output/\nartifacts/\nbuild/\ncoverage/\nnode_modules/\nrelease/\n"
},
{
"path": ".npmrc",
"chars": 0,
"preview": ""
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5202,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participa"
},
{
"path": "CONTRIBUTING.md",
"chars": 4103,
"preview": "# How to Contribute to Pure\n\nFeel free to [open issues][] and send pull requests on GitHub! When sending a\npull request,"
},
{
"path": "CREDITS.md",
"chars": 1119,
"preview": "Normalize.css License\n=====================\n\nCopyright (c) Nicolas Gallagher and Jonathan Neal\n\nPermission is hereby gra"
},
{
"path": "Gruntfile.js",
"chars": 8589,
"preview": "module.exports = function (grunt) {\n\n // -- Config ------------------------------------------------------------------"
},
{
"path": "HISTORY.md",
"chars": 18970,
"preview": "# 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 th"
},
{
"path": "LICENSE",
"chars": 1548,
"preview": "Software License Agreement (BSD License)\n========================================\n\nCopyright 2013 Yahoo! Inc.\n\nRedistrib"
},
{
"path": "README.md",
"chars": 3763,
"preview": "# Pure\n\n[][pu"
},
{
"path": "RELEASE.md",
"chars": 3022,
"preview": "# Pure Deployment Checklist\n\nThese are the steps formally used to publish a new version of Pure.\n\nFor all of these steps"
},
{
"path": "composer.json",
"chars": 747,
"preview": "{\n \"name\": \"pure-css/purecss\",\n \"description\": \"Pure is a ridiculously tiny CSS library you can use to start any web p"
},
{
"path": "eslint.config.mjs",
"chars": 1488,
"preview": "import js from '@eslint/js';\nimport globals from 'globals';\nimport reactPlugin from 'eslint-plugin-react';\n\nexport defau"
},
{
"path": "index.js",
"chars": 488,
"preview": "var fs = require('fs');\nvar path = require('path');\nvar cache = {};\n\nmodule.exports = {\n getFile: function(name) {\n "
},
{
"path": "package.json",
"chars": 1690,
"preview": "{\n \"name\": \"purecss\",\n \"version\": \"3.0.0\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git://github.com/pure-css/"
},
{
"path": "site/.gitignore",
"chars": 308,
"preview": "# Dependencies\n/node_modules\n\n# Production\n/build\n\n# Ignore manually copied pure files to static/css folder\n/static/css/"
},
{
"path": "site/README.md",
"chars": 1200,
"preview": "# Pure Documentation\n\nThis website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website gen"
},
{
"path": "site/components/CodeBlock.js",
"chars": 681,
"preview": "import React from 'react';\nimport classnames from 'classnames';\nimport SyntaxHighlighter from 'react-syntax-highlighter'"
},
{
"path": "site/components/Example.js",
"chars": 498,
"preview": "import React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport CodeBlock from './CodeBlock';\nimport { "
},
{
"path": "site/components/Footer.js",
"chars": 1264,
"preview": "import React from 'react';\n\nfunction Footer({ siteConfig }) {\n const { customFields, organizationName } = siteConfig;"
},
{
"path": "site/components/Header.js",
"chars": 228,
"preview": "import React from 'react';\n\nfunction Header({ description, title }) {\n return (\n <div className=\"header\">\n "
},
{
"path": "site/components/Menu.js",
"chars": 2953,
"preview": "import Link from '@docusaurus/Link';\nimport React from 'react';\n\nfunction Menu() {\n return (\n <>\n <"
},
{
"path": "site/components/SectionHeader.js",
"chars": 552,
"preview": "import React from 'react';\n\nfunction SectionHeader({ heading, TagName = 'h2' }) {\n // Remove HTML entities, and all c"
},
{
"path": "site/docusaurus.config.js",
"chars": 1099,
"preview": "const { moduleSizes, PURE_DOWNLOAD_SNIPPET } = require('./lib/pure');\nconst { version } = require('../package.json');\n\nm"
},
{
"path": "site/lib/pure.js",
"chars": 1512,
"preview": "const crypto = require('crypto');\nconst fs = require('fs');\nconst gzip = require('gzip-size');\nconst path = require('pat"
},
{
"path": "site/lib/utils.js",
"chars": 677,
"preview": "/**\n * Calculates filesize for a given module\n */\nexport function fileSize({ module, decimals = 1, filesizes }) {\n co"
},
{
"path": "site/package.json",
"chars": 1065,
"preview": "{\n \"name\": \"pure\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"build\": \"docusaurus build\",\n \"deploy"
},
{
"path": "site/src/index.js",
"chars": 268,
"preview": "const path = require('path');\nmodule.exports = function() {\n return {\n name: 'pure-theme',\n\n getThemePa"
},
{
"path": "site/src/pages/base/index.js",
"chars": 4110,
"preview": "import Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React f"
},
{
"path": "site/src/pages/buttons/index.js",
"chars": 8129,
"preview": "import React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimp"
},
{
"path": "site/src/pages/customize/index.js",
"chars": 9353,
"preview": "import Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React f"
},
{
"path": "site/src/pages/extend/index.js",
"chars": 9681,
"preview": "import Link from '@docusaurus/Link';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header f"
},
{
"path": "site/src/pages/forms/index.js",
"chars": 16451,
"preview": "import Link from '@docusaurus/Link';\nimport React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header f"
},
{
"path": "site/src/pages/grids/index.js",
"chars": 42980,
"preview": "import useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React from 'react';\nimport Layout from '../."
},
{
"path": "site/src/pages/grids/styles.css",
"chars": 879,
"preview": ".grids-unit {\n margin: 0.25em 0;\n padding-left: 4.5em;\n}\n.grids-unit-width {\n width: 4em;\n margin-left: -4.5"
},
{
"path": "site/src/pages/index.js",
"chars": 8290,
"preview": "import Link from '@docusaurus/Link';\nimport useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport useBase"
},
{
"path": "site/src/pages/layouts/README.md",
"chars": 376,
"preview": "Pure CSS Layout Examples\n========================\n\nLayout examples using [Pure CSS][pure] compiled from the [pure-site]["
},
{
"path": "site/src/pages/layouts/index.js",
"chars": 4592,
"preview": "import Link from '@docusaurus/Link';\nimport useBaseUrl from '@docusaurus/useBaseUrl';\nimport React from 'react';\nimport "
},
{
"path": "site/src/pages/layouts/styles.css",
"chars": 1081,
"preview": ".layout-item {\n margin-top: 2em;\n padding-top: 2em;\n border-top: 1px solid #eee;\n}\n.layout-item-screenshot {\n "
},
{
"path": "site/src/pages/menus/index.js",
"chars": 15434,
"preview": "import Link from '@docusaurus/Link';\nimport React, { useEffect } from 'react';\nimport Layout from '../../theme/Layout';\n"
},
{
"path": "site/src/pages/start/index.js",
"chars": 9632,
"preview": "import useDocusaurusContext from '@docusaurus/useDocusaurusContext';\nimport React from 'react';\nimport Layout from '../."
},
{
"path": "site/src/pages/start/styles.css",
"chars": 3232,
"preview": ".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"
},
{
"path": "site/src/pages/styles.css",
"chars": 4274,
"preview": "/* stylelint-disable docusaurus/copyright-header */\n\n/* overwrite docusaurus styles */\nh3,\np {\n margin: 1em 0;\n}\ntable "
},
{
"path": "site/src/pages/tables/index.js",
"chars": 8578,
"preview": "import React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimp"
},
{
"path": "site/src/pages/tools/index.js",
"chars": 10110,
"preview": "import React from 'react';\nimport Layout from '../../theme/Layout';\nimport Header from '../../../components/Header';\nimp"
},
{
"path": "site/src/theme/Layout.js",
"chars": 3425,
"preview": "import React, { useEffect } from 'react';\nimport Head from '@docusaurus/Head';\nimport isInternalUrl from '@docusaurus/is"
},
{
"path": "site/static/.nojekyll",
"chars": 0,
"preview": ""
},
{
"path": "site/static/css/main.css",
"chars": 12385,
"preview": "* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n*:bef"
},
{
"path": "site/static/js/grids.js",
"chars": 497,
"preview": "(function (window, document) {\n\n var unitsToggle = document.querySelector('.grids-show-all'),\n notReducedU"
},
{
"path": "site/static/js/menus.js",
"chars": 6337,
"preview": "/* eslint no-unused-vars:0 no-prototype-builtins:0 */\n(function (window, document) {\n 'use strict';\n\n // Enable dr"
},
{
"path": "site/static/js/track-downloads.js",
"chars": 924,
"preview": "(function (window, document) {\n\n // Expose as `Pure.trackDownload()`\n (window.Pure || (window.Pure = {})).trackDow"
},
{
"path": "site/static/js/ui.js",
"chars": 1514,
"preview": "(function (window, document) {\n\n // we fetch the elements each time because docusaurus removes the previous\n // el"
},
{
"path": "site/static/layouts/blog/index.html",
"chars": 6232,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "site/static/layouts/blog/styles.css",
"chars": 2727,
"preview": "* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\na {\n text-dec"
},
{
"path": "site/static/layouts/email/index.html",
"chars": 8663,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "site/static/layouts/email/styles.css",
"chars": 5529,
"preview": "/*\n * -- BASE STYLES --\n * Most of these are inherited from Base, but I want to change a few.\n */\nbody {\n color: #333"
},
{
"path": "site/static/layouts/gallery/index.html",
"chars": 8811,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "site/static/layouts/gallery/styles.css",
"chars": 2253,
"preview": "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 "
},
{
"path": "site/static/layouts/marketing/index.html",
"chars": 5869,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "site/static/layouts/marketing/styles.css",
"chars": 5297,
"preview": "* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n/*\n * -- BASE ST"
},
{
"path": "site/static/layouts/pricing/index.html",
"chars": 6019,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "site/static/layouts/pricing/styles.css",
"chars": 4074,
"preview": "/*\n * -- BASE STYLES --\n * Most of these are inherited from Base, but I want to change a few.\n */\nbody {\n color: #52606"
},
{
"path": "site/static/layouts/side-menu/index.html",
"chars": 4019,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "site/static/layouts/side-menu/styles.css",
"chars": 5019,
"preview": "body {\n color: #777;\n}\n\n.pure-img-responsive {\n max-width: 100%;\n height: auto;\n}\n\n/*\nAdd transition to contain"
},
{
"path": "site/static/layouts/tucked-menu/index.html",
"chars": 13444,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "site/static/layouts/tucked-menu-vertical/index.html",
"chars": 10913,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "src/base/css/base.css",
"chars": 633,
"preview": "/*csslint important:false*/\n\n/* ==========================================================================\n Pure Base "
},
{
"path": "src/buttons/css/buttons-core.css",
"chars": 823,
"preview": ".pure-button {\n /* Structure */\n display: inline-block;\n line-height: normal;\n white-space: nowrap;\n vert"
},
{
"path": "src/buttons/css/buttons.css",
"chars": 1496,
"preview": "/*csslint outline-none:false*/\n\n.pure-button {\n font-family: inherit;\n font-size: 100%;\n padding: 0.5em 1em;\n "
},
{
"path": "src/buttons/tests/manual/button.html",
"chars": 7350,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title>Buttons Tests</title>\n\n <link rel=\"stylesheet\" hr"
},
{
"path": "src/forms/css/forms-r.css",
"chars": 1815,
"preview": "@media only screen and (max-width : 480px) {\n .pure-form button[type=\"submit\"] {\n margin: 0.7em 0 0;\n }\n\n "
},
{
"path": "src/forms/css/forms.css",
"chars": 7917,
"preview": "/*csslint box-model:false*/\n/*\nBox-model set to false because we're setting a height on select elements, which\nalso have"
},
{
"path": "src/forms/tests/manual/forms.html",
"chars": 13274,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <ti"
},
{
"path": "src/grids/README.md",
"chars": 434,
"preview": "Pure Grids\n==========\n\nPure Grids ship with build-in 5ths- and 24ths-based units styles. The unit style\nrules are genera"
},
{
"path": "src/grids/css/grids-core.css",
"chars": 291,
"preview": "/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/\n\n.pure-g {\n display: flex;\n "
},
{
"path": "src/grids/tests/manual/responsive.html",
"chars": 13258,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-"
},
{
"path": "src/menus/css/menus-core.css",
"chars": 500,
"preview": "/*csslint adjoining-classes: false, box-model:false*/\n.pure-menu {\n box-sizing: border-box;\n}\n\n.pure-menu-fixed {\n "
},
{
"path": "src/menus/css/menus-dropdown.css",
"chars": 797,
"preview": "/* Submenus should still be display: block; */\n.pure-menu-item .pure-menu-item {\n display: block;\n}\n\n.pure-menu-child"
},
{
"path": "src/menus/css/menus-horizontal.css",
"chars": 415,
"preview": "/* HORIZONTAL MENU */\n.pure-menu-horizontal {\n width: 100%;\n white-space: nowrap;\n}\n\n.pure-menu-horizontal .pure-m"
},
{
"path": "src/menus/css/menus-scrollable.css",
"chars": 463,
"preview": "/* scrollable menus */\n.pure-menu-scrollable {\n overflow-y: scroll;\n overflow-x: hidden;\n}\n\n.pure-menu-scrollable "
},
{
"path": "src/menus/css/menus-skin.css",
"chars": 1048,
"preview": "/* misc default styling */\n\n.pure-menu-separator,\n.pure-menu-horizontal .pure-menu-children .pure-menu-separator {\n b"
},
{
"path": "src/menus/tests/manual/menus.html",
"chars": 16067,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset='utf-8'>\n <meta name=\"viewport\" content=\"width = device-width\">\n <"
},
{
"path": "src/tables/css/tables.css",
"chars": 1439,
"preview": ".pure-table {\n /* Remove spacing between table cells (from Normalize.css) */\n border-collapse: collapse;\n borde"
},
{
"path": "src/tables/tests/manual/tables.html",
"chars": 11460,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title>Tables Tests</title>\n\n <link rel=\"stylesheet\" hre"
},
{
"path": "tasks/license.js",
"chars": 601,
"preview": "'use strict';\n\nmodule.exports = function (grunt) {\n grunt.registerMultiTask('license', 'Stamps license banners on fil"
},
{
"path": "tasks/suppress.js",
"chars": 534,
"preview": "'use strict';\n\nmodule.exports = function (grunt) {\n grunt.registerTask('suppress', 'Suppresses noisy logs', function "
},
{
"path": "test/index.js",
"chars": 366,
"preview": "var tap = require('tap');\nvar pure = require('../index.js');\n\n// api\ntap.ok(pure.getFile);\ntap.ok(pure.getFilePath);\n\n//"
}
]
About this extraction
This page contains the full source code of the pure-css/pure GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 94 files (411.3 KB), approximately 103.9k tokens, and a symbol index with 31 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.