Última entrada que realizamos sobre PureCSS, el framework de CSS de Yahoo! que facilita la vida a los que les cuesta mucho el front-end. Hoy, toca hablar de Tablas.
Para nuestro ejemplo hemos realizado el ejercicio con la misma tabla que para Twitter Bootstrap. En bruto, el resultado es este:
Para aplicar estilos de PureCSS a una tabla está la clase pure-table, que automáticamente cambia al siguiente aspecto:
tabla con PureCSS
Todavía hay más clases que se pueden utilizar. En concreto, para remarcar las líneas en horizontal (en la imagen anterior están en vertical), hay que añador la clase pure-table-horizontal. Otra posibilidad es mostrar todas las líneas, usando la clase pure-table-bordered.
purecss en Tablas
Cuando las tablas son grandes, resulta más cómo ver la tabla tipo zebra, para lo que se usa la clase pure-table-striped.
Tabla zebra con PureCSS
Y … con estas pocas clases, hemos mejorado el aspecto de las tablas, que podeis ver aquí.
Grids
Quizás es la parte que menos he tocado de este framework, y es la relativa a grids. En su documentación queda patente que se puede trabajar con grid classes o con unit classes (los números son fracciones, es decir, se trabaja sobre porcentajes).
Un detalle muy importante es que:
Todos los elementos hijos de un grid deben utilizar unit classes, para lo que hay dos métricas: 5 y 25. Es decir: 1/5, 2/5, 3/5, 4/5 y 5/5 para el 5, y 1/24, 1/12/ 3/24, … y así sucesivamente. Muchas clases para hacer flexible el diseño!
Para hacer diseños adaptables, hay que incluir -r en las clases: pure-g-r, por ejemplo. Pero incluso han creado varias clases para adaptarlas a móviles, tabletas o , y que son: pure-hidden-phone, pure-hidden-tablet y pure-hidden-desktop.
En definitiva, que si no haces un diseño adaptativo es porque no quieres, no porque no dispongas de clases preparadas para ello, y además, para cualquier dispositivo.
En definitiva, tras estas 4 entradas disponeis de un monton de clases muy sencillas de usar para dar un aspecto muy profesional a los diseños Web, con poca inversión en crear código CSS.
Espero que sea de utilidad.