Los frameworks para programación web están muy de moda. Si bien ya hemos hablado de Twitter Bootstrap, hoy toca de una alternativa a propuesta de yahoo!, que parece renacer de sus cenizas y ahora también publican algunas herramientas.
PureCSS
Se trata de purecss.io, que es un framework CSS para facilitar el front-end de los desarrolladores web que no quieran complicarse mucho la vida, o sea, mi caso. La base de este framework está en Normalize.css, un proyecto donde se pretende que todos los navegadores muestren exactamente lo mismo (bueno, o casi exactamente).
Entre sus características:
- Tiene una cuadrícula (grid) que se adapta a todas las resoluciones
- Botones con estilo, tanto con <a> como com <button>
- Permite construir menus horizontales, verticales, de varios nievles, …
- Facilidad para crear formularios, con estilos comunes
- Varios formatos comunes de tablas
- Look minimalista, y fácil de modificar
- Permite modificar con Skin Builder
- Ocupa poco tamaño
De todas las características, quisiera destacar Skin Builder, que permite personalizar sobre todo el aspecto de colores muy rápidamente.
Hay que destacar que PureCSS no modifica la tipografía, y las modificaciones en las cabeceras <H> afectan en principio solo al tamaño, que puede ser configurable a las necesidades del programador.
Otro detalle importante sobre PureCSS es su compatibilidad con otros proyectos, como Twitter Bootstrap, jQueryUI, uiKit, …. puesto que es un fichero CSS, y no agrega ninguna función en Javascript, de ahí que con la aplicación de unas cuantas clases de estilos, cambie el aspecto muchísimo!
Plantilla para usar PureCSS
Para incluir pureCSS en nuestros trabajos, sólo tenemos que incluir el vínculo al archivo CSS:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
Al igual que con TB, me he contruido una pequeña plantilla para probarlo:
<!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>
Adicionalmente, he incluido un CSS llamado manejandodatos_purecss.css con varios estilos para facilitar la ubicación y la personalización. Concretamente, se han incorporado estilos para mejorar los botones, poner bonito la cabecera header y el pie de página footer, y alguna cosilla más, entre las que destaca .cajon, cuya misión es poner un fondo verde claro y una sombra al elemento al que aplica.
El aspecto de la plantilla es el siguiente:
plantilla pureCSS
Los archivos completos los podeis ver aquí, aunque también tengo el proyecto subido a GitHub.
En resumen
Para los que necesitan un framework exclusivamente CSS para mejorar el aspecto de sus aplicaciones sin ningún tipo de complicación con Javascript, PureCSS es una magnífica alternativa.
Seguro que pueden esperar a la siguiente entrada a ver algunos ejemplos con formularios, botones, ….. Un saludo, y buen día!