## 1. Project Overview & Quickstart (pure-css/pure) ## 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 `` 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 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: 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/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= 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: src/grids/README.md 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-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. [rework-pure-grids]: https://github.com/ericf/rework-pure-grids [Rework]: https://github.com/visionmedia/rework ## 2. Official Technical Reference & Guides (pure-css/pure-site) ## File: README.md Pure CSS Website ================ [](https://travis-ci.org/pure-css/pure-site) [](https://david-dm.org/pure-css/pure-site) The website which showcases [Pure CSS][Pure]. [Pure]: https://github.com/pure-css/pure Running Locally --------------- This is a node.js site which uses Express.js, which means it's very easy to get running locally. ```shell $ 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 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 Since this website dogfoods [`pure`][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: ```shell $ 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: ```shell $ 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! [Broccoli]: https://github.com/broccolijs/broccoli Running in Production --------------------- To run the site in production mode you must first run the build via Grunt, and set the `NODE_ENV` environment variable to `production`: ```shell $ grunt $ NODE_ENV=production node server ``` License ------- This software is free to use under the Yahoo! Inc. BSD license. See the [LICENSE file][] for license text and copyright information. [LICENSE file]: https://github.com/pure-css/pure-site/blob/master/LICENSE.md --- ## File: views/pages/layouts/examples/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