Wednesday, May 29, 2013

Using PURE - CSS plugin from Yahoo!

This is an amazing stylesheet module, very easy to use. Licensed under BSD License. All you gotta do to use this is put the CSS library in the head section of your site/blog (or host the css module yourself). This is the latest version :
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"/>
Then just pull everything out for your web design.

A glimpse about Pure
It's built on top of Normalize.css

Normalize.css is an open source CSS project developed by THE front end design maestro, Nicolas Gallagher, and co-authored by Jonathan Neal. Normalize.css is a very useful CSS module for maintaining the cross-browser styling consistency.

So, the advantage of using Pure by Yahoo! is that you won't have to worry so much about the cross-browser problem thingy. Especially about the positioning, which sometimes can be rendered differently on various browsers.

PLUS, this is what I dig the most from Pure, is that the module has predefined styling for :
  • Grids - for creating columns
  • Forms - search bar, login form, etc
  • Buttons - self explanatory
  • Tables - self explanatory
  • Menus - self explanatory

Example for Pure buttons :


Example for Pure search bar :
A working search bar here on Monkey Raptor


Not only predefined classes like above, Pure also provides the CSS skin builder, and of course, it provides the link to YUI (Yahoo! UI) CSS/JS library. Very complete free package indeed. You can use everything from there to build your very own responsive website layout.

PureCSS.io

You can try it out.
Have fun designing, and hopefully your website will be shining like never before!

No comments:

Post a Comment

Tell me what you think...