Pure
![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
- Styles for vertical and horizontal menus, including support for dropdown
- 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 26+ and npm 12+ installed (see .nvmrc).
git clone [email protected]:pure-css/pure.git
cd pure
npm install
npm run buildBuild 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
[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.cssfrom 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].cssfiles in thebuild/dir. This is
pure-min.css: Minified version ofpure.cssthat should be used in
pure-nr.css: A Rollup of all modules without @media queries. This is a
pure-nr-min.css: Minified version ofpure-nr.cssthat should be used in
grids-responsive.css: Unminified version of Pure's grid stylesheet which
grids-responsive-min.css: Minified version ofgrids-responsive.cssthat
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.
[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/