You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

177 lines
4.7 KiB

9 years ago
  1. Pure
  2. ====
  3. [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/yahoo/pure?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
  4. [![Pure](https://cloud.githubusercontent.com/assets/449779/5291099/1b554cca-7b03-11e4-9157-53a12d91b34a.png)][Pure]
  5. A set of small, responsive CSS modules that you can use in every web project.
  6. [http://purecss.io/][Pure]
  7. [![Build Status](http://img.shields.io/travis/yahoo/pure.svg?style=flat)][Build Status]
  8. **Use From the CDN:**
  9. ```html
  10. <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
  11. ```
  12. Note: You can [customize which Pure modules you need][customize].
  13. **Install with Bower:**
  14. ```shell
  15. $ bower install --save pure
  16. ```
  17. [Pure]: http://purecss.io/
  18. [Bower]: http://bower.io/
  19. [Build Status]: https://travis-ci.org/yahoo/pure
  20. [customize]: http://purecss.io/customize/
  21. Features
  22. --------
  23. Pure is meant to be a starting point for every website or web app. We take care
  24. of all the CSS work that every site needs, without making it look cookie-cutter:
  25. * A responsive grid that can be customized to your needs.
  26. * A solid base built on [Normalize.css][] to fix cross-browser compatibility
  27. issues.
  28. * Consistently styled buttons that work with `<a>` and `<button>` elements.
  29. * Styles for vertical and horizontal menus, including support for dropdown
  30. menus.
  31. * Useful form alignments that look great on all screen sizes.
  32. * Various common table styles.
  33. * An extremely minimalist look that is super-easy to customize.
  34. * Responsive by default, with a non-responsive option.
  35. * Easy one-click customization with the [Skin Builder][].
  36. * Extremely small file size: **4.5KB minified + gzip**.
  37. [Normalize.css]: http://necolas.github.io/normalize.css/
  38. [Skin Builder]: http://yui.github.io/skinbuilder/?mode=pure
  39. Get Started
  40. -----------
  41. To get started using Pure, go to the [Pure CSS website][Pure]. The website has
  42. extensive documentation and examples necessary to get you started using Pure.
  43. You can include the Pure CSS file in your project by fetching it from Yahoo's
  44. CDN:
  45. ```html
  46. <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  47. ```
  48. You can also install Pure using [Bower][], using the following command:
  49. ```shell
  50. $ bower install --save pure
  51. ```
  52. Build From Source
  53. -----------------
  54. Optionally, you can build Pure from its source on Github. To do this, you'll
  55. need to have Node.js and npm installed. We use [Grunt][] to build Pure.
  56. ```shell
  57. $ git clone git@github.com:yahoo/pure.git
  58. $ cd pure
  59. $ npm install
  60. $ grunt
  61. ```
  62. ### Build Files
  63. Now, all Pure CSS files should be built into the `pure/build/` directory. All
  64. files that are in this build directory are also available on the CDN. The naming
  65. conventions of the files in the `build/` directory follow these rules:
  66. * `[module]-core.css`: The minimal set of styles, ususally structural, that
  67. provide the base on which the rest of the module's styles build.
  68. * `[module]-nr.css`: Rollup of `[module]-core.css` + `[module].css` +
  69. `[module]-[feature].css` from the `src/[module]/` dir. This is the
  70. non-responsive version of a module.
  71. * `[module].css`: Rollup of `[module]-nr.css` + `[module]-r.css` from the
  72. `build/` dir. This is the responsive version of a module.
  73. * `*-min.css`: A minified file version of the files of the same name.
  74. * `pure.css`: A rollup of all `[module].css` files in the `build/` dir. This is
  75. a responsive roll-up of everything, non-minified.
  76. * `pure-min.css`: Minified version of `pure.css` that should be used in
  77. production.
  78. * `pure-nr.css`: A Rollup of all modules without @media queries. This is a
  79. non-responsive roll-up of everything, non-minified.
  80. * `pure-nr-min.css`: Minified version of `pure-nr.css` that should be used in
  81. production.
  82. * `grids-responsive.css`: Unminified version of Pure's grid stylesheet which
  83. includes @media queries.
  84. * `grids-responsive-min.css`: Minified version of `grids-responsive.css` that
  85. should be used in production.
  86. [Grunt]: http://gruntjs.com/
  87. Browser Support and Testing
  88. ---------------------------
  89. Pure is tested and works in:
  90. * IE 8+
  91. * Latest Stable: Firefox, Chrome, Safari
  92. * iOS 6-8
  93. * Android 4.x
  94. Docs and Website
  95. ----------------
  96. [Pure's website][Pure] is also open source, so please open any issues or pull
  97. requests for the docs and website over at the [`pure-site`][pure-site]
  98. repository.
  99. [pure-site]: https://github.com/yahoo/pure-site
  100. Contributing
  101. ------------
  102. See the [CONTRIBUTING file][] for information on how to contribute to Pure.
  103. [CONTRIBUTING file]: https://github.com/yahoo/pure/blob/master/CONTRIBUTING.md
  104. License
  105. -------
  106. This software is free to use under the Yahoo! Inc. BSD license.
  107. See the [LICENSE file][] for license text and copyright information.
  108. [LICENSE file]: https://github.com/yahoo/pure/blob/master/LICENSE.md