PureCSS – A set of small, responsive CSS modules that you can use in every web project.
In my recent project, I came across a new CSS framework PureCSS. Previously, I worked with Bootstrap, so I was comfortable with grid classes and all. Bootstrap comes with whole lot of other styles which I might not use at all. So in a way it increases CSS file length and size. But it is not the case with PureCSS.
PureCSS is very small and very less in size. The entire set of modules weight only at ~4.0KB minified and gzipped.
- Base (1.1 KB)
- Grids (0.8 KB)
- Forms (1.5 KB)
- Buttons (0.8 KB)
- Tables (0.5 KB)
- Menus (0.8 KB)
Main file comes with all the modules included in it, but you can select all or customise as per your need and download those selected modules.
SMACSS – Scalable and Modular Architecture for CSS.
Pure is based on SMACSS. It has adopted naming convention from SMACSS.
The special module, I like in PureCSS is – grid system. Grids are very easy to understand and work with, and very powerful. It consist of two/three types of classes, for row (Grid) you can use pure-g and for columns (Units) you can use pure-u or pure-u-*. Units have various class names that represent their widths. Unlike in other framework in Pure you can use mixer of grids 5th based grid and 24th based grid. You can also divide your page width in 4 column or 2 column of different width as well with combination of classes from the 24th based grid.
For example, pure-u-1-2 has a width of 50%, whereas pure-u-1-5 would have a width of 20%.
<div class="pure-g"> <div class="pure-u-1-2"><p>Half Width</p></div> <div class="pure-u-1-2"><p>Half Width</p></div> </div>
PureCSS has media queries support based as below so you can control your site behavior on different devices.
|Key||CSS Media Query||Applies||Classname|
|sm||@media screen and (min-width: 35.5em)||≥ 568px||.pure-u-sm-*|
|md||@media screen and (min-width: 48em)||≥ 768px||.pure-u-md-*|
|lg||@media screen and (min-width: 64em)||≥ 1024px||.pure-u-lg-*|
|xl||@media screen and (min-width: 80em)||≥ 1280px||.pure-u-xl-*|
PureCSS offers em based support for media queries so on different devices it response appropriately such as when people zoom-in the page. You can obviously use px if you want.