"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Pure.css

Pure.css es un framework CSS desarrollado por Yahoo que ya lleva años entre nosotros. Se trata de una opción muy interesante por varios aspectos de los que voy a hablaros.

 

 

En primer lugar Pure.css es un framework fiable y completamente probado, uno de los medidores de la calidad y la estabilidad de un proyecto al menos para mí es abrir su repositorio de github si lo tuviera.

Puedes navegar hasta el repositorio pulsando aquí, allí en primer lugar llama la atención que es un proyecto con unas 19.000 estrellas, aunque esto refleja su popularidad, también podemos concluir que incide en la calidad que tiene, pues lo lógico es que cada una de esas estrellas implica que un desarrollador lo ha probado y le ha gustado.

Luego también es interesante dirigirse al apartado de cuestiones, leyendo un poco podemos observar que está en constante desarrollo y las resuelven bien, es un equipo que da confianza.

Por último os dejo el link a su página oficial, que esta muy bien en cuanto a documentación. Después de este vistazo al proyecto posiblemente estemos mas tranquilos a la hora de comenzar a usarlo, veamos ahora cual es su principal ventaja con respecto a otros frameworks.

Pure.css es extraordinariamente ligero

Su principal baza es que tenemos un framework muy completo para construir una página minimalista en tan solo unos kilobytes. Obviamente no tenemos la cantidad de componentes que ofrecen otros frameworks ni tampoco un gran número de modificadores sobre ellos, pero no vas a encontrar un framework que ofrezca tanto y pese tan poco.

Aquí es donde le puede competir al resto de competidores, y es que para hacernos una idea minificado y gzipeado pesa tan solo 3.8kb, cuando tenemos una web en produccion lo lógico es que usemos que las hojas de estilos vayan minificadas y que la información viaje comprimida (gzip).

Ojo, si usas Bootstrap por ejemplo y ves el minificado no pienses que es el equivalente, por ejemplo Bootstrap v4.1.3 pesa 146 KB (aquí lo tienes), pero eso esta sin gzipear y es precisamente durante la compresión donde el tamaño se reduce drásticamente.

Como me gusta dar toda la información os dejo una tabla comparativa con los pesos de algunos frameworks CSS famosos…

 

Name Version Uncompressed Minified Gzipped URL
Bootstrap v3.3.7 143 KB 117 KB 20 KB http://getbootstrap.com/css/
Bootstrap v4.0.0 187 KB 147 KB 20 KB https://v4-alpha.getbootstrap.com/
Materialize v3.0 114 KB 90 KB 18 KB http://materializecss.com/
Material Design Lite v1.3.0 350 KB 137 KB 21 KB https://getmdl.io/
mini.css v2.1 47 KB 36 KB 7 KB https://chalarangelo.github.io/mini.css/
Semantic UI v2.2.6 730 KB 550 KB 95 KB https://semantic-ui.com/
Foundation v3.0 90 KB 64 KB 12 KB http://foundation.zurb.com/
Pure CSS v0.6.2 80 KB 17 KB 3.8 KB https://purecss.io/
Picnic CSS v6.3.2 55 KB 38 KB 7 KB https://picnicss.com
Milligram v1.3.0 10 KB 8 KB 2 KB https://milligram.github.io/

 

Como se puede observar Pure.css es el segundo más ligero junto con Milligram que también es otra opción interesante si buscamos una dar estilos a una web muy sencilla.

Respecto al tamaño que ya de por si es muy muy pequeño, podemos mencionar que además ha sido programado de forma modular, de manera que aun podríamos reducir más su tamaño si prescindimos de algunos módulos.

 

 

Por ejemplo si nuestra página no contiene formularios quitamos el módulo de formularios y nos ahorramos 1.4kb de manera que Pure.css se nos queda en 2.4kb aproximadamente.

 

Pure.css es legible y escalable

Uno de los puntos importante a la hora de decantarnos por un framework CSS es lo legible y mantenible que sea, y por supuesto que nos permita escalarlo, más si cabe en un framework tan liviano como este que esta enfocado a darnos unos mínimos a partir de los cuales crecer.

Para conseguir esto es imprescindible que el que escribe el código siga unas pautas que podamos usar como base para que todo este bien estructurado. Esto lo conseguimos usando una metodología, y en el caso de Pure.css han escogido SMACSS.

Hace poco tiempo escribí sobre la metodología BEM, aquí os dejo el link. SMACSS no deja de ser otra metodología que sigue unas pautas y una filosofía distintas, pero que igualmente es válida y muy necesaria cuando hablamos de estructurar bien nuestro código para que podamos leerlo bien y escalarlo.

Si quieres escribir tu código CSS usando SMACSS para que sea coherente con Pure.css puedes echarle un vistazo a la documentación oficial.

 

Pure.css es mobile first

Si no habías escuchado antes el término mobile first, quiere decir que está enfocado a la visualización en dispositivos móviles en primer lugar, y una vez que tienes claro el diseño para estas pantallas empiezas a hacerlo crecer a resoluciones mayores.

Que nuestra web sea responsiva y que además sea mobile first nos garantiza que tenemos una buena experiencia de usuario en todos los tamaños de pantalla y que cuidamos los dispositivos móviles que son aquellos que a veces se descuidan. Además mejoramos el SEO (que si no es una página de uso interno es bastante importante).

Como cualquier otro framework CSS con Pure.css conseguimos esto mediante media queries que definen los distintos puntos de ruptura de nuestra página para que podamos modificar su diseño, son estas:

Clave CSS Media Query Aplica Clases
No tiene No tiene Siempre .pure-u-*
sm @media screen and (min-width: 35.5em) 568px .pure-u-sm-*
md @media screen and (min-width: 48em) 768px .pure-u-md-*
lg @media screen and (min-width: 64em) 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) 1280px .pure-u-xl-*

 

Pure.css normaliza estilos nativos

Si construyeramos una página web solo con html y la fueramos abriendo en distintos navegadores nos daríamos cuenta que ciertos elementos se ven de forma distinta. Esto se debe a que de forma nativa cada navegador asigna estilos a ciertos elementos.

El normalizarlos implica que nosotros definimos reglas CSS sobre esos elementos, para que todos los navegadores estén forzados a aplicarlas en vez de aplicar las que ellos tienen por defecto.

Para ello usa la conocida librería normalize.css, que precisamente es la que le da esas reglas para resetear los estilos nativos, en su página hacen referencia a ello y de hecho si inspeccionamos el proyecto podemos ver que su fichero de bower para gestionar dependencias se usa para descargar solamente esa librería…

 

Conclusiones

Pure.css es un framework modular sencillo y muy ligero que tiene todo lo necesario para comenzar a crear tu página web y hacerlo crecer, además su código nos da la pauta para que nosotros continuemos pues esta perfectamente estructurado usando la metodología SMACSS.

Nos permite construir webs responsivas orientando el diseño inicial a dispositivos móviles para que a partir de ahí lo adaptemos a pantallas mayores, y por último normaliza los estilos nativos de los navegadores para asegurar que nuestro diseño es consistente independientemente de con que se visualice.

Es posible que aun siendo de los frameworks más populares no este al nivel de otros como Bootstrap, Foundation, Semantic, Materialize…

Pero también es seguro que es ideal para webs sencillas y minimalistas y que es mucho más ligero que todos estos, de manera que es una alternativa a tener muy en cuenta.
 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)