Es una realidad que el diseño web se ha vuelto más complejo con el paso de los años. Las nuevas versiones de HTML y CSS añadían nuevos elementos y propiedades que nos permiten jugar con formas, degradados y animaciones, cada vez más necesarias pero cada vez más complejas. Al mismo tiempo ya no tenía sentido diseñar para una resolución y navegador concreto, la multitud de dispositivos que daban acceso a la web requerían de una nueva forma de trabajar, más flexible, más adaptable, nacía así el responsive design.
Toda esta revolución web incidía en todos los agentes necesarios para el funcionamiento de la misma, pero si había una sección que se veía claramente engrosada por estas nuevas posibilidades esta era sin duda el CSS. Las hojas de estilos de la web se duplicaban y triplicaban en tamaño con cada nuevo proyecto. Nuevas especificaciones, la inclusión de mediaqueries, los prefijos para asegurar compatibilidad con navegadores…todo esto hacía muy costoso en tiempo y esfuerzo elaborar una hoja de estilos desde cero para cada proyecto. Era necesario reutilizar código propio y usar librerías externas que ya estuvieran testadas para determinadas partes de la web.
Y para resolver esta necesidad nacen los frameworks CSS, hojas de estilos ya testadas por equipos y diseñadores, listas para ser usadas como base en una maquetación web, sin necesidad de escribir todo desde cero. Estas librerías consiguen en definitiva ahorrar tiempo y esfuerzo al diseñador web, ya que parte desde una base solida y testada, y puede centrar sus esfuerzos más en detalles que en la estructura lógica de la web y de los elementos básicos (botones, inputs, estilos de texto…).
Ventajas de usar un Framework CSS
Si estas pensando que quizás escribir todo el CSS desde cero para cada proyecto no sea lo más productivo para ti, es el momento de explorar el uso de un framework CSS. Estas son las ventajas que aportan al diseño de una web:
- Ahorrar tiempo: Escribir una y otra vez el mismo código es repetitivo y no te lleva a ninguna parte. Es uno de los principios que comentábamos en nuestro listado de buenas prácticas para escribir CSS. Con un framework tendrás ya una base sobre la que empezar a maquetar el diseño.
- Testado en navegadores: la mayoría de los frameworks son usados por muchos usuarios y los mismos usuarios reportan los fallos o errores que encuentran en los distintos navegadores, para que puedan ser arreglados. Esto hace que a medida que pase el tiempo, el frameworks vaya mejorando su compatibilidad y no tengas que preocuparte de si tu diseño se ve bien en Safari, Chrome, Firefox…
- Mobile first: La mayoría de los frameworks son responsive design, y además están construidos basándose en la metodología Mobile First, por lo que nos aseguramos una óptima visualización en los dispositivos de menor resolución sin sobrecargar con estilos y propiedades innecesarias dichas resoluciones.
- Escalabilidad: Usar un Framework CSS permite a tu diseño tener la posibilidad de crecer en el futuro. Si añadimos una nueva sección, una nueva página o un nuevo elemento no necesitaremos escribir nuevas lineas de CSS, podemos reutilizar los estilos ya predefinidos, centrándonos en el HTML y en los detalles que hagas a esa página singular respecto al resto.
Sin embargo, también es necesario conocer que el uso de un framework CSS conlleva una serie de desventajas:
- Puede limitar la creatividad de tu diseño. Partir de una estructura de rejilla o de unos márgenes y formas preestablecidos puede hacer que tu diseño se vea condicionado por el mismo y el nivel de creatividad de tu proyecto no sea el mismo que si partes de una hoja en blanco.
- Líneas de código innecesarias. Seguramente no harás uso del 50% de las especificaciones y clases escritas en el CSS. Es lo normal, sin embargo los usuarios se descargan los archivos completos, por lo que el peso de la web será más alto, y por lo tanto la carga más lenta.
- Tiempo de aprendizaje: Aunque la curva de aprendizaje suele ser rápida, es cierto que familiarizarnos con el framework nos llevará tiempo y hasta pasados un par de proyectos no conoceremos la mayor parte del código.
Los mejores Frameworks CSS responsive
Después de esta introducción vamos con un listado de los mejores frameworks CSS para diseño responsive que consideramos merecen una mención, ya sea por que son los más usados por los diseñadores o por que aportan una característica que los hace especial para un determinado tipo de proyecto. El orden de las librerías no responde a ninguna prioridad:
Bootstrap, el rey del CSS
Si hay un framework CSS famoso, ese es Bootstrap. Es quizás el más usado y más demandado en las ofertas de empleo para diseñadores y maquetadores web. Entre sus ventajas incluyen una base muy sólida de usuarios y profesionales usándolo actualmente, al mismo tiempo que incorpora reglas para prácticamente todos los estilos que pueden ser diseñados en una web.
Como inconveniente, si no lo sabes usar con cabeza y no filtras bien qué módulos cargar, vas a obligar al usuario a descargarse muchos datos innecesarios. Por eso, antes de ponerlo en producción, es recomendable conocer bien a fondo como funciona este framework y que elementos vamos a usar.
Actualmente está casi lista la versión 4, que además de seguir conservando el famoso sistema de columnas y rejillas, añade la posibilidad de incorporar al grid Flexbox, un conjunto de especificaciones CSS relativamente recientes que nos van a dar mucha más flexibilidad y libertad a la hora de maquetar. Muy recomendable!
Foundation, avanzado y veterano.
Un framework que lleva desde 2011 en la web, y que ha ido mejorando y añadiendo nuevos elementos versión a versión. De hecho, en la versión actual, al igual que sucede con Bootstrap, ya es posible usar Flexbox en su grid. Es una apuesta segura.
Además de webs, Foundation tienen otras dos distribuciones para su framework, por un lado para trabajar con emails y otro para trabajar con Apps, con lo que aprovechas por tres el aprendizaje de un framework CSS, abriendo otras vías de diseño.
Pure CSS, ligero y rápido
Para los que buscan algo ligero en peso que permita que la web se cargue rápido, Pure CSS es su opción. Es el framework perfecto para montar un proyecto rápido, sin complicaciones y con cierto grado de fiabilidad. Comprimido ocupa menos de 4kb, una maravilla.
Buen es cierto que los elementos pueden no ser los más bonitos, personalmente no me convences mucho los estilos de los botones y los forms, pero para gustos colores. Si quieres algo rápido y sin mucha complicación, es una buena opción.
Milligram, minimista hasta en el tamaño
Personalmente es el framework más ingenioso. Solo 2kb cuando se sirve comprimido y unos estilos muy básicos pero con diseño cuidado, muy flat design. Además de esto, resuelve uno de los problemas que más se critica a los grandes Frameworks, la posibilidad de cambiar entre grid de 12 columnas a 10 columnas, e incluso combinar ambas. Además todas las medidas están en rem!
Como punto en contra, su compatibilidad solo asegura la última versión de los navegadores más usados, así que es posible encontrar comportamientos inesperados en navegadores antiguos. Pero para mantener ese tamaño está más que justificada esa ausencia de compatibilidad. Fantástico.
Materialize, framework CSS para material design.
Si tu proyecto se basa en un estilo muy concreto como lo es material design, entonces deberías usar este framework, que viene con todo lo necesario para maquetar tu web o app usando las tipografías, cards y estilos recomendados por Google.
Un framework muy completo pero con un claro componente de diseño. Muy útil si va a ser Material. Nada útil si no va a ser así.
Skeleton, por lo viejos tiempos!
Aún recuerdo el primer proyecto donde decidimos que era el momento de usar un framework, y el elegido fue skeleton. En ese momento competía codo con codo con los grandes (Bootstrap, Fundation, 960grid…). Tenía un grid muy flexible de 16 columnas y unos estilos base que te permitían una configuración a medida rápida y sin complicaciones. Pero no supo adaptarse al mundo móvil y al responsive: no cambió su filosofía y no incorporó el Mobile first hasta años más tarde. Sus competidores si lo hicieron y muchos abandonamos el barco buscando una alternativa que mejorara el comportamiento en los dispositivos móviles. Además, su rejilla quedó fijada en 960px, cuando Bootstrap ofrecía ya 1200px.
Años más tarde este framework sigue vivo, se ha reinventado y cambiado parte de su contenido original. El grid sigue siendo de 960px, pero ya ha incorporado Mobile first y pulido muchos de sus elementos, tales como tipografías, tablas, forms…Una alternativa que nunca está de más tener en mente.
Conclusión: para gustos, framework CSS
Lo importante a la hora de decidir que framework usar no debe ser la cantidad de elementos, ni tampoco el diseño base de los elementos. Todo lo contrario. Debemos sentirnos cómodos con la libraría, entender como funciona y sentir que es de utilidad, que nos ahorra tiempo. Es lo más importante, encontrar el vínculo que nos hace avanzar y mejorar en nuestro trabajo. Y no todos los frameworks lo consiguen, hay una framework para cada tipo de desarrollador Front-End.
Así que no queda otra que probar y probar hasta dar con el guante que se ajusta a nuestra mano. No hay que tener miedo a experimentar con recursos CSS y desechar aquello que no nos sirva. Y en el futuro, con nuestros propios añadidos, llegará el momento de construirnos nuestro propio framework, cómo si de un traje a medida se tratara. Pero mientras tanto, nos quedamos con la lista anterior.
Espero que sea de ayuda la info!
Bastante bueno el post.
sigue así amigo ☺
jaja que loco xD