pure/README.md

174 lines
5.3 KiB
Markdown
Raw Normal View History

2013-05-16 17:01:32 +00:00
Pure
====
2013-05-20 17:23:59 +00:00
2014-12-03 23:47:36 +00:00
[![Pure](https://cloud.githubusercontent.com/assets/449779/5291099/1b554cca-7b03-11e4-9157-53a12d91b34a.png)][Pure]
2013-05-20 17:23:59 +00:00
A set of small, responsive CSS modules that you can use in every web project.
2013-05-22 12:06:01 +00:00
[http://purecss.io/][Pure]
2013-05-20 17:23:59 +00:00
[![Build Status](http://img.shields.io/travis/pure-css/pure.svg?style=flat)][Build Status]
[![Dependency Status](https://david-dm.org/pure-css/pure/dev-status.svg)](https://david-dm.org/pure-css/pure?type=dev)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/pure-css/pure?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
2019-07-10 16:25:48 +00:00
**This project is looking for maintainers to support and enhance Pure.css. If you are interested please [leave a comment](https://github.com/pure-css/pure/issues/692) in the Github issue.**
2019-02-18 18:43:23 +00:00
2013-05-22 12:06:01 +00:00
**Use From the CDN:**
2013-05-20 17:25:26 +00:00
```html
2020-05-09 15:58:26 +00:00
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.1/build/pure-min.css" integrity="sha384-QkSsJi6SGgWv5LAx1TdvIDRf8TW5Ui4NVKqDDlK1wY2eKioo7wvYIJvGWFQSFE4U" crossorigin="anonymous">
2013-05-20 17:25:26 +00:00
```
2013-05-20 17:23:59 +00:00
Note: You can [customize which Pure modules you need][customize].
**Install with NPM:**
```shell
$ npm install purecss
```
2013-05-20 17:23:59 +00:00
2013-05-22 12:06:01 +00:00
[Pure]: http://purecss.io/
[Build Status]: https://travis-ci.org/pure-css/pure
[customize]: http://purecss.io/customize/
2013-05-22 12:06:01 +00:00
Features
--------
2013-05-20 17:23:59 +00:00
2013-05-22 12:06:01 +00:00
Pure is meant to be 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:
2013-05-20 17:23:59 +00:00
* A responsive grid that can be customized to your needs.
2013-05-22 12:06:01 +00:00
* A solid base built on [Normalize.css][] to fix cross-browser compatibility
issues.
* Consistently styled buttons that work with `<a>` and `<button>` elements.
2013-05-22 12:06:01 +00:00
* 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: **4.5KB minified + gzip**.
2013-05-22 12:06:01 +00:00
2013-05-20 17:23:59 +00:00
2013-05-22 12:06:01 +00:00
[Normalize.css]: http://necolas.github.io/normalize.css/
2013-05-20 17:23:59 +00:00
2013-05-22 12:06:01 +00:00
Get Started
-----------
2013-05-20 17:23:59 +00:00
2013-05-22 12:06:01 +00:00
To get started using Pure, go to the [Pure CSS website][Pure]. The website has
extensive documentation and examples to help you start using Pure.
2013-05-20 17:23:59 +00:00
You can include the Pure CSS file in your project by fetching it from unpkg:
2013-05-20 17:23:59 +00:00
2013-05-20 17:25:26 +00:00
```html
2019-07-10 16:25:48 +00:00
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
2013-05-20 17:25:26 +00:00
```
2013-05-20 17:23:59 +00:00
You can also install Pure using NPM:
```shell
$ npm install purecss
```
2013-05-20 17:23:59 +00:00
2013-05-22 12:06:01 +00:00
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.
2013-05-20 17:23:59 +00:00
```shell
$ git clone git@github.com:pure-css/pure.git
$ cd pure
$ npm install
$ grunt
2013-05-20 17:23:59 +00:00
```
### Build Files
2013-05-22 12:06:01 +00:00
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:
2015-06-01 07:12:07 +00:00
* `[module]-core.css`: The minimal set of styles, usually structural, that
provide the base on which the rest of the module's styles build.
2013-05-22 12:06:01 +00:00
* `[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.
2013-05-22 12:06:01 +00:00
* `[module].css`: Rollup of `[module]-nr.css` + `[module]-r.css` from the
`build/` dir. This is the responsive version of a module.
2013-05-22 12:06:01 +00:00
* `*-min.css`: A minified file version of the files of the same name.
2013-05-20 17:23:59 +00:00
* `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.
2013-05-20 17:23:59 +00:00
2016-12-12 22:27:42 +00:00
* `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.
2013-05-20 17:23:59 +00:00
[Grunt]: http://gruntjs.com/
Browser Support and Testing
---------------------------
Pure is tested and works in:
2015-02-02 23:44:04 +00:00
* IE 8+
* Latest Stable: Firefox, Chrome, Safari
2015-02-04 01:38:13 +00:00
* iOS 6-8
* Android 4.4+, as the way views work changed between older versions of Android and newer versions of Android around this time.
Docs and Website
----------------
2013-05-20 17:23:59 +00:00
2020-04-30 16:59:22 +00:00
[Pure's website][Pure] is located in the [`site`][pure-site] directory. Please feel free
to open issues or questions in the Issue tab.
2013-05-20 17:23:59 +00:00
2013-05-22 12:06:01 +00:00
2020-04-30 16:59:22 +00:00
[Pure]: http://purecss.io/
[pure-site]: https://github.com/pure-css/pure/tree/master/site
Contributing
------------
See the [CONTRIBUTING file][] for information on how to contribute to Pure.
[CONTRIBUTING file]: https://github.com/pure-css/pure/blob/master/CONTRIBUTING.md
2013-05-22 12:06:01 +00:00
License
-------
This software is free to use under the Yahoo! Inc. BSD license.
2013-05-22 12:06:01 +00:00
See the [LICENSE file][] for license text and copyright information.
2018-08-15 13:31:08 +00:00
[LICENSE file]: https://github.com/pure-css/pure/blob/master/LICENSE