2013-05-16 17:01:32 +00:00
|
|
|
Pure
|
|
|
|
====
|
2013-05-20 17:23:59 +00:00
|
|
|
|
2013-05-22 18:17:43 +00:00
|
|
|
[![Pure](http://f.cl.ly/items/2y0M0E2Q3a2H0z1N1Y19/pure-banner.png)][Pure]
|
2013-05-21 19:53:12 +00:00
|
|
|
|
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
|
|
|
|
2013-06-05 20:55:43 +00:00
|
|
|
[![Build Status](https://travis-ci.org/yui/pure.png?branch=master)][Build Status]
|
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
**Use From the CDN:**
|
2013-05-20 17:25:26 +00:00
|
|
|
|
|
|
|
```html
|
2013-05-24 18:54:42 +00:00
|
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
|
2013-05-20 17:25:26 +00:00
|
|
|
```
|
2013-05-20 17:23:59 +00:00
|
|
|
|
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
[Pure]: http://purecss.io/
|
2013-06-05 20:55:43 +00:00
|
|
|
[Build Status]: https://travis-ci.org/yui/pure
|
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
|
|
|
|
2013-05-21 19:53:12 +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.
|
2013-05-21 19:53:12 +00:00
|
|
|
|
|
|
|
* 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.
|
2013-05-21 19:53:12 +00:00
|
|
|
|
|
|
|
* 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.
|
|
|
|
|
2013-05-24 18:27:48 +00:00
|
|
|
* Easy one-click customization with the [Skin Builder][].
|
2013-05-22 12:06:01 +00:00
|
|
|
|
2013-05-24 18:27:48 +00:00
|
|
|
* Extremely small file size: **4.8KB 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/
|
|
|
|
[Skin Builder]: http://yui.github.io/skinbuilder/?mode=pure
|
2013-05-21 19:53:12 +00:00
|
|
|
|
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 necessary to get you started using Pure.
|
2013-05-20 17:23:59 +00:00
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
You can include the Pure CSS file in your project by fetching it from Yahoo's
|
|
|
|
CDN:
|
2013-05-20 17:23:59 +00:00
|
|
|
|
2013-05-20 17:25:26 +00:00
|
|
|
```html
|
2013-05-24 18:54:42 +00:00
|
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
|
2013-05-20 17:25:26 +00:00
|
|
|
```
|
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
|
2013-06-05 21:02:15 +00:00
|
|
|
need to have NodeJS and npm installed. We use [Grunt][] to build Pure.
|
2013-05-20 17:23:59 +00:00
|
|
|
|
|
|
|
```shell
|
2013-05-21 19:53:12 +00:00
|
|
|
$ git clone git@github.com:yui/pure.git
|
|
|
|
$ cd pure
|
|
|
|
$ npm install
|
|
|
|
$ grunt
|
2013-05-20 17:23:59 +00:00
|
|
|
```
|
|
|
|
|
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:
|
2013-05-21 19:53:12 +00:00
|
|
|
|
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-21 19:53:12 +00:00
|
|
|
|
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-21 19:53:12 +00:00
|
|
|
|
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
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
* `pure-min.css`: A rollup of all `[module]-min.css` files in the `build/` dir.
|
|
|
|
This is a responsive roll-up of everything.
|
2013-05-21 19:53:12 +00:00
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
* `pure-nr-min.css`: A Rollup of all modules without @media queries. This is a
|
|
|
|
non-responsive roll-up of everything.
|
2013-05-20 17:23:59 +00:00
|
|
|
|
2013-06-05 23:15:28 +00:00
|
|
|
**Note:** To save your fingers from The Developer Konami Code: ⌘⇥ ⌃C ↑ ⏎ use
|
|
|
|
the `grunt watch` task:
|
|
|
|
|
|
|
|
```shell
|
|
|
|
$ grunt watch
|
|
|
|
```
|
|
|
|
|
2013-05-20 17:23:59 +00:00
|
|
|
|
2013-06-05 21:02:15 +00:00
|
|
|
[Grunt]: http://gruntjs.com/
|
|
|
|
|
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
Contributions and Code Standards
|
|
|
|
--------------------------------
|
|
|
|
|
|
|
|
Feel free to file bugs and submit pull requests on Github! When submitting a
|
|
|
|
pull request, please checkout a new feature branch, and submit your pull request
|
|
|
|
from it. Please do not submit pull requests from your `master` branch.
|
2013-05-20 17:23:59 +00:00
|
|
|
|
2013-06-05 21:02:15 +00:00
|
|
|
### Testing
|
|
|
|
|
|
|
|
We use [CSSLint][] for basic testing to make sure we're shipping valid CSS which
|
|
|
|
compiles with standard best practices and rules. To run Pure's test use
|
|
|
|
[Grunt][]:
|
|
|
|
|
|
|
|
```shell
|
|
|
|
$ grunt test
|
|
|
|
```
|
|
|
|
|
2013-06-03 23:41:21 +00:00
|
|
|
### Docs and Website
|
2013-06-01 05:57:00 +00:00
|
|
|
|
2013-06-03 23:41:21 +00:00
|
|
|
Pure's website is also open source, so please file any issues or pull requests
|
|
|
|
for the docs or website over at the [`pure-site`][pure-site] repo.
|
2013-06-01 05:57:00 +00:00
|
|
|
|
2013-06-03 23:41:21 +00:00
|
|
|
### CLA
|
|
|
|
|
|
|
|
Please [sign the CLA][] before submitting pull requests. We can't merge your
|
|
|
|
pull requests unless you have a signed CLA. It's super easy and can be done
|
|
|
|
online. For more information regarding the CLA, please visit the
|
|
|
|
[Contribute][] page.
|
2013-06-01 05:57:00 +00:00
|
|
|
|
2013-05-20 17:23:59 +00:00
|
|
|
### Versioning
|
|
|
|
|
|
|
|
Pure adheres to [Semantic Versioning 2.0](http://semver.org/).
|
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
|
2013-06-05 21:02:15 +00:00
|
|
|
[CSSLint]: https://github.com/stubbornella/csslint
|
2013-06-03 23:41:21 +00:00
|
|
|
[pure-site]: https://github.com/yui/pure-site
|
|
|
|
[sign the CLA]: https://secure.echosign.com/public/hostedForm?formid=A9PFU5T58653A
|
|
|
|
[Contribute]: http://yuilibrary.com/contribute/cla/
|
|
|
|
|
|
|
|
|
2013-06-01 05:57:00 +00:00
|
|
|
Browser Support and Testing
|
|
|
|
---------------------------
|
|
|
|
|
|
|
|
Pure is tested and works in:
|
|
|
|
|
2013-06-03 23:41:21 +00:00
|
|
|
* IE 7+
|
2013-06-01 05:57:00 +00:00
|
|
|
* Latest Stable Firefox/Chrome/Safari
|
2013-06-03 23:41:21 +00:00
|
|
|
* iOS 6.x
|
|
|
|
* Android 4.x
|
2013-06-01 05:57:00 +00:00
|
|
|
|
2013-06-03 23:41:21 +00:00
|
|
|
Before submitting 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.
|
2013-06-01 05:57:00 +00:00
|
|
|
|
|
|
|
|
2013-05-22 12:06:01 +00:00
|
|
|
License
|
|
|
|
-------
|
2013-06-03 23:41:21 +00:00
|
|
|
|
2013-05-21 19:53:12 +00:00
|
|
|
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.
|
|
|
|
|
|
|
|
[LICENSE file]: https://github.com/yui/pure/blob/master/LICENSE.md
|