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
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.
Another positive aspect of PureCSS is that you can combine it with other project such us Twitter Bootstrap, jQueryUI, uiKit, …. because it’s only a CSS file, no Javascript added, and with a few classes, you can have a “cool” aspect of your website
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:
<!DOCTYPE html> <html> <head> <!-- version 1.0.2 para la PureCSS - www.ManejandoDatos.es --> <title>Manejando datos - Probando PureCSS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- pureCSS --> <link rel="stylesheet" href="css/manejandodatos_purecss.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css"> </head> <body> <header> <h1>Probando PureCSS desde Manejando datos</h1> </header> <section> <!-- Escriba aquí su código -->Escriba su codigo </section> <footer> <h6> Creado desde <a target="_blank" href="http://www.manejandodatos.es">Manejando datos</a> </h6> </footer> <!-- JavaScript plugins (requires jQuery) --> <script src="js/jquery.js"></script> <script src="js/html5shiv.js"></script> <!-- Optionally enable responsive features in IE8 --> <script src="js/respond.min.js"></script> </body> </html>
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:
plantilla pureCSS
The files are located here, although you can have the full project on GitHub.
To end with
For those who need exclusively a CSS framework PureCSS is a really food choice, with no extra Javascript.
I hope you can wait until the next entrance to continue with a few examples of forms, buttons, …
Have a nice day!