This is the last entrance about PureCSS, the CSS framework from Yahoo! , easy to use for those who hate the front-end task. Today, tables!
For our example, let’s use the same table as we did when talking about Twitter Bootstrap. The results is:
Let’s start by applying a table style to the table, just by adding the pure-table class, and you’ll get this new look to the table:
tabla con PureCSS
You can use a few more classes. One of them let you enphatize the information on rows adding the pure-table-horizontal class (the previous image shows column). Another option is to show all lines of the tible using the class pure-table-bordered.
purecss en Tablas
When you have a big table to show, it’s better to use a “zebra” style, just including the pure-table-striped class.
Tabla zebra con PureCSS
And … that’s it! Tables get a better looking just by adding a few classes. You can see here the examples.
Grids
This is the part of the framework I have use less, and it’s related to grids. In the documentation, you can read that you can use grid classes or unit classes (the number are fractions).
A very usefull detail:
All child elements of a grid must use unit classes, and you can do it with 2 metrics: 5 y 25. So, you have: 1/5, 2/5, 3/5, 4/5 y 5/5 for the 5, y 1/24, 1/12/ 3/24, … and so on. Too many classes for a flexible desing!
To make responsive design, you need to include -r in the classes: pure-g-r, for example. Also, thre framework includes classes to adapt it to mobiles, phone or desktop:pure-hidden-phone, pure-hidden-tablet y pure-hidden-desktop.
To end with, if you don’t create with responsive design is because you don’t want to, not because you don’t have tools!!
After this for entrances, I hope to show you how to use this nice framework, with a very proffesional looking provided by Yahoo, and only CSS.
I hope it can be useful to you, and have a nice day!