Web frameworks are very common use in today’s web development. Although here I have written about Twitter Bootstrap, today I am going to introduce you to a yahoo! open source tool, very useful that I like it a lot!
Purecss.io is a CSS framework, ideal for applying styles for those developers that want to do it easy, and that’s my case! The base of this framework is Normalize.css, a cool project trying to “homogenize” the way all browsers show HTML pages (or at least, that’s the intention).
The characteristics of PureCSS are:
- The grid widget can be adapted to diferent resolutions
- Styles Buttons with <a> and <button>
- You can create horizontal, vertical and several leves menus, …
- Easy to create forms, with several different styles
- Tables with different styles
- Minimalistic look minimalista, and easy to customize
- You can modify it with Skin Builder
- Lightweight component
In my opinion, the main characteristic is Skin Builder, a very useful utility that allow the user to customize everything, specially colors according to your website, and very easily.
Another aspect that PureCSS doesn’t modify is tipography, and related to headers <h>, the modifications only affect to size, allowing the user to configure in deep dependeing on their needs.
CSS template for PureCSS
Using PureCSS only requires to include the link to the CSS file:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
As I did with TB, let’s create a HTML template to work with pureCSS:
I have included a custom CSS file called manejandodatos_purecss.css with a few extra properties to locate elements and custom colors for a few elements. In concrete, I have added styles to improve buttons, for the header and footer, and a few more. I have included a property called .cajon with a green background and a shadow.
The template looks like this:
To end with
I hope you can wait until the next entrance to continue with a few examples of forms, buttons, …
Have a nice day!