Yahoo! has recently and quietly released Pure CSS, an ultra light-weight and responsive set of CSS modules that you can employ in your web projects very quickly. Maybe not as grand as redesigning Flickr or purchasing Tumblr, but certainly just as impressive.
In this article, I will take a closer look at what Pure CSS has to offer.
Pure CSS Modules: Light-weight Responsive CSS Modules
Here is how Yahoo! describes Pure CSS:
” Pure is ridiculously tiny. The entire set of modules clocks in at 4.2 KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.”
Yes, you read that right. Here is the overall break-down (not gzipped):
- Base: 1.2 KB
- Grids: 0.7 KB
- Forms: 1.8 KB
- Buttons: 0.9 KB
- Tables: 0.6 KB
- Menus: 1.1 KB
The roles of each of the above are rather self-explanatory: Grids create columns, Forms deal with search bar, login forms, etc. and so on.
Apart from being super small, Pure CSS modules are based on Normalize.css which is a module well known for enabling consistancy across multiple web browsers. Naturally, Pure CSS also inherits the same cross-browser compatibility and consistency.
Pure CSS modules come with several major USPs of their own, such as:
- Pure CSS offers styling for native HTML elements and most commonly-used UI components. Of course, as already mentioned, it is cross-browser compatible.
- Pure CSS modules are responsive out of the box and have their own Skin Builder to help you get the most out of them. The inclusion of Grids and Menus means you can easily create responsive layouts that work perfectly well across all screen sizes.
- It is extremely minimal. You can create your own application styling on top of it, or override the default styles with ease. Pure CSS is meant to stand out of your way when it comes to customization; its minimal and flat design ensures that you can add new rules and tweak the default Pure CSS rules without any hassle.
- Pure CSS comes with a BSD License. Details here.
Mode of Operation
Getting started with Pure CSS is simple. Either host the modules yourself, or call the CSS library from the head of your website:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
Beyond that, all the basic inclusions and features are supplemented with detailed documentation, so you will not have much trouble finding your way with things in Pure CSS. For instance, in order to make use of buttons in Pure, simply add the pure-button class name to any
<button> element. Here is a basic example:
<a class="pure-button" href="#">A Pure Button</a><button class="pure-button">A Pure Button</button>
Similarly, to create a primary action button, add the pure-button-primary classname alongside pure-button. Once again, another basic example:
<a class="pure-button pure-button-primary" href="#">A Primary Button</a><button class="pure-button pure-button-primary">A Primary Button</button>
Which will result in this:
You can find further info about other modules such as Tables, Forms, etc. in the Pure CSS documentation itself. Furthermore, you can also choose to pull individual modules. The URLs for the same are as follows:
Also, the Y! CDN can handle combo requests. Thus, you can combine your requests and get a single CSS file in return. Here is the request sample for a combo of Base, Grids and Forms:
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.2.0/base-min.css&pure/0.2.0/grids-min.css&pure/0.2.0/forms-min.css">
A photo gallery (uses Grids, Menus and Forms):
Responsive email (uses Grids and Menus):
You can view more examples here.
Plus, Pure CSS plays well with other libraries, such as Twitter Bootstrap and jQuery. Therefore you can employ Pure CSS as a CSS-based framework or foundation, and then include specific Bootstrap modules on the basis of your needs. The advantages of doing so are plenty: not only will your project’s CSS be much smaller, you can also make use of the minimal nature of Pure CSS and combine it with the goodness of Bootstrap.
To learn more about Pure CSS modules, you can fork it on Github. Have fun experimenting, and if you do decide to make use of it in your next web project, do share your experiences with us!