pure Documentation

1. Project Overview & Quickstart (pure-css/pure) Copy Chapter

File: README.md Copy Chapter

Pure

A set of small, responsive CSS modules that you can use in every web project.
https://purecss.io/

Features Copy Chapter

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 `` 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 Copy Chapter

Check out the Get Started page for more information.

Build From Source Copy Chapter

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.

git clone [email protected]:pure-css/pure.git
cd pure
npm install
grunt

Build Files Copy Section

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 Copy Chapter

Pure is tested and works in:

• Latest Stable: Firefox, Chrome, Safari

Docs and Website Copy Chapter

Pure's website is located in the site directory. Please feel free
to open issues or questions in the Issue tab.

Contributing Copy Chapter

See the CONTRIBUTING file for information on how to contribute to Pure.

License Copy Chapter

This software is free to use under the Yahoo! Inc. BSD-3-Clause license.
See the LICENSE file for license text and copyright information.

File: site/src/pages/layouts/README.md Copy Chapter

Pure CSS Layout Examples

Layout examples using Pure CSS compiled from the pure-site project.

License Copy Chapter

This software is free to use under the zLib license.
See the zLib license for more information.

File: site/README.md Copy Chapter

Pure Documentation

This website is built using Docusaurus 2, a modern static website generator.

Installation Copy Section

$ npm install

Local Development Copy Section

$ 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 Copy Section

$ npm run build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment Copy Section

$ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy

The site is hosted on Vercel and will automatically deploy when commits are merged to main.

Including Pure Copy Section

We want to use the locally built version of Pure so that the layout examples 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: src/grids/README.md Copy Chapter

Pure Grids

Pure Grids ship with build-in 5ths- and 24ths-based units styles. The unit style
rules are generated via Pure's rework-pure-grids
Rework plugin.

The tooling used by Pure to generate its built-in Grids can also be used to
create custom Grids that use any nth-unit base.

2. Official Technical Reference & Guides (pure-css/pure-site) Copy Chapter

File: README.md Copy Chapter

Pure CSS Website

The website which showcases Pure CSS.

Running Locally Copy Chapter

This is a node.js site which uses Express.js, which means it's very easy to get
running locally.

$ npm install
$ npm start

To run the health checks:

$ grunt health.check

By default, it will run the tests using the local instance (running on port 5000)
But you can also specify a remote host:

$ grunt health.check --host=foo

Auto-Building of Browser Assets Copy Section

This site uses an integrated Broccoli build process. When the site is
running in development mode, Broccoli will be watching everything in the
public/ directory and rebuild when something changes.

This makes it much easier to work on browser-side features without needed to
manually kick off the build process or restart the server.

Running with Pure Served Locally Copy Section

Since this website dogfoods pure it's a great testbed to try out local
changes you're making to Pure. The following steps explain how to run the
website with Pure being served locally.

Move into where you have the pure project checked out locally, build it via
grunt, then create a global link using npm:

$ cd pure/
$ grunt
$ npm link

Now you'll need to move into where you have this project checked out locally,
install the website's npm dependencies (if you haven't done so already),
link pure in pure-site using npm, then start up the server with the
--pure-local argument:

$ cd ../pure-site/
$ npm link purecss
$ node server.js --pure-local

Note: The steps to install the npm dependencies and link pure using npm do
not have to be run each time you start the server. Also, you can leave the
server running and rebuild pure via grunt and you'll see the changes in your
browser after refreshing!

Running in Production Copy Chapter

To run the site in production mode you must first run the build via Grunt, and
set the NODE_ENV environment variable to production:

$ grunt
$ NODE_ENV=production node server

License Copy Chapter

This software is free to use under the Yahoo! Inc. BSD license.
See the LICENSE file for license text and copyright information.

File: views/pages/layouts/examples/README.md Copy Chapter

Pure CSS Layout Examples

Layout examples using Pure CSS compiled from the pure-site project.

License Copy Chapter

This software is free to use under the zLib license.
See the zLib license for more information.