css

Cuando ya llevas en tu espalda varios sitios, y tienes libertad de elegir tus herramientas, acabas probando todo lo que hay en el mercado. Los Frameworks CSS son fáciles de aprender, y todos tienen algo que ofrecerte. Los acabas utilizando por diferentes razones: te llama la atención, parece que te va a ahorra trabajo, lo recomienda un compañero… y porque resulta muy divertido probar nuevos sabores.

He seleccionado los que he podido probar por mi mismo y he realizado al menos un sitio completo. Con todo lo bueno y malo que conlleva mantener diferentes sitios con diferentes Frameworks. Después de analizarlo respondo a la pregunta que muchos os haréis: ¿Cual es el mejor Framework CSS? O lo que en realidad te quieres preguntar: ¿Qué es lo próximo que voy a aprender?

Bootstrap

Bootstrap logo

V4.1.2

Hablamos del segundo proyecto más exitoso de GitHub (126.000 estrellas), con una popularidad sin precedentes en el desarrollo Web. Nació como una simple herramienta interna de Twitter. Mark Otto y Jacob Thornton se encargaron de realizar un conjunto de estilos y patrones para dar homogeneidad a todas las Webs que se estaban creando dentro de empresa. Lo bautizada como Blueprint. En 2011 terminaron el desarrollo y lo hicieron público bajo el nombre de Bootstrap. Su gran uso a ayudado a que tenga una evolución, adaptándose a nuevos estándares, hasta llegar a nuestro días con Flex.

Ventajas:

  • Componentes suficientes y configurables para cualquier proyecto.
  • Enorme apoyo de la comunidad, con muchas extensiones y preguntas resueltas en foros.
  • Documentación clara y rápida de consultar.
  • Proyecto maduro con una larga trayectoria (7 años).
  • Su Reset CSS (llamado Reboot), te permite usarlo de forma independiente al propio Bootstrap.
  • El núcleo principal lo desarrolla un equipo experimentado de Twitter.

Inconvenientes:

  • Multitud de dependencias, necesitas enlazar 4 archivos diferentes (3 de ellos Javascript).
  • Complejo a la hora de modificar sus estilos.
  • Te obliga a maquetar con un HTML poco flexible.
  • La última versión (v4) da un giro duro. Pierde compatibilidad con versiones anteriores y navegadores que no usen Flex (Safari 10, iOS6, IE8, IE9…).

Enlace: https://getbootstrap.com/

Tailwind CSS

Tailwind CSS logo

Version 0.6.4

Tailwind no es un Framework, o UI kit, como Bootstrap, Bulma o Foundation… No tiene temas, ni componentes prefabricados, ni Javascript, ni te impone un diseño que te pelearas para modificar. Son simples estilos, en concreto un montón clases. Una gran biblioteca que te acelerará como un cohete la creación de cualquier diseño que se te pase por la cabeza. Cuando lo domines se dará el caso de hacer una página sin haber escrito ni una línea de CSS.

Ventajas:

  • Solo clases de CSS, el HTML a tu gusto.
  • Transparente. Puedes incorporarlo a un sitio que ya tenga otro Framework CSS sin alterar ni un pixel del diseño original.
  • Puedes filtrar por los estilos que necesite tu web.
  • Sin un tema molesto que de un aspecto al sitio, no hay necesidad de sobrescribir nada. Al estar todo en variables CSS, puedes usar nativamente @apply para mejorar los tuyos.

Inconvenientes:

  • Duro para iniciados.
  • Si no controlas el peso, con PurgeCSS o desactivando módulos, llegará a ser pesado (298,8kb).
  • La documentación tiene zonas sin terminar.
  • Esta construido en Javascript, lo que conlleva que sea más complejo para la comunidad realizar aportaciones al repositorio.

Enlace: https://tailwindcss.com

Bulma

Bulma logo

Version 0.7.1

Cuando se presentó al público web, su popularidad alcanzó rápidamente los primeros puestos de Hacker News (el foro más popular entre desarrolladores). Y no solo en una ocasión, sino en dos. Adelantó al titánico Bootstrap jugando en su propio terreno utilizando Flex en su núcleo. Modernizó el sistema de maquetación para usar el potencial de los nuevos estándares. Por otro lado nos regaló un diseño precioso y cuidado en cada pixel.

Ventajas

  • Diseño exquisito.
  • Detrás hay un gran diseñador Web como Jeremy Thomas.
  • Fácil de personalizar.
  • Sin Javascript, aunque varios ejemplos por si quieres complementar.
  • Guía para migrar desde Bootstrap.
  • El código esta en un SASS preciosamente bien ordenado.

Contras

  • La Documentación no es cómoda. Necesita un buscador urgentemente.
  • El contenedor no siempre se comporta como esperas.
  • No dispone herramientas para dar espacios como paddings o margins.
  • Comparado con Bootstrap o Semantic UI, podría tener muchos más componentes y opciones.
  • No resetea correctamente algunos estilos.

Enlace: https://bulma.io/

Semantic UI

Semantic UI logo

V2.3

Una estupenda alternativa nacida en el 2003. Aunque en apariencia parece estar más enfocado a smartphone, con su estilo plano e integración con los grandes Frameworks de Javascript, es perfecto para cualquier sitio. Sea una web pequeña o grande. Al igual que Bootstrap, hace gran uso de JQuery para activar y manipular sus componentes. No obstante, no quiero que ello te asuste, su documentación da ejemplos lo suficientemente buenos para no pelearte.

Ventajas:

  • Animaciones integradas.
  • Interfaz moderna.
  • Una cantidad inmesa de componentes: rating, varios tipos de menús (como desplegables en lateral), varios modales, dimmers…
  • Integración oficial con los Frameworks de Javascript más populares: React, Meteor, Ember, Angular…
  • Integración con herramientas como Gulp o Node.

Inconvenientes:

  • Necesitas enlazar 3 archivos diferentes.
  • Gran dependencia de Javascript.
  • Todo tiene un aire orientado a Smartphone.

Enlace: https://semantic-ui.com

Foundation

Foundation logo

V6.4.2

El ancestral enemigo de Bootstrap. Se ha visto siempre como la alternativa seria para empresas. Cabe destacar que nación en el 2011 con la intención de mejorar lo que había en el mercado. Y para ello usaron SASS como base, exprimiendo todo su potencial (con mixins) y siendo pioneros en la incorporación. A pesar de estar mantenido por una empresa (Zurb), su código posee licencia Opensource. Por otro lado es un proyecto con 3 ramas. No solo puedes hacer sitios Web, sino también Emails y Apps (con Angular). Siendo en su conjunto una navaja suiza del Diseño Web.

Ventajas:

  • 3 en 1: Webs, Emails y Apps.
  • Herramienta para personalizar los componentes y así controlar el peso final de CSS.
  • Una documentación maravillosa: su buscador es inteligente, muchos ejemplos incluyen un vídeo tutorial a parte de su demo, viene con una gran cantidad de ejemplos en forma de código, enlace para modificar cualquier demo en codepen, boton para ayudar en los textos o pedir ayuda por Slack…
  • Varias plantillas para maquetar con una base estructurada.
  • Sección en su web con snippets (trocitos de código de ejemplo) realizado por la comunidad.

Inconvenientes:

  • 7 archivos diferentes para vincular.
  • Gran dependencia de Javascript.
  • Puede resultar complejo para un Diseñador Web con poca experiencia.
  • Para Apps hay otras herramientas más completas.

Enlace: https://foundation.zurb.com/

Minicss

Mini CSS logo

V3.0.0

Se podría considerar un microframework o un punto de partida. Se centra en dar las herramientas mínimas de maquinación y nivelar las pequeñas imperfecciones del HTML. Para algunos será simple, pero si valoramos su ridículo peso con todo lo que nos proporciona podrás comprobar que es una inversión muy buena. Por encima de su esqueleto te deja colocar lo que necesites. Será tan potente como buen Diseñador Web seas.

Ventajas:

  • Peso insignificante (46kb).
  • Documentación clara y búsqueda sencilla.
  • Sistema de grid (columnas) clónico de Bootstrap. No es necesario aprender nada si ya lo conoces.
  • Se aplica la gran mayoría de los estilos a las etiquetas. Olvídate de añadir nuevas clases.
  • 3 temas incluidos (Original, Dark y Nord).
  • No necesitas Javascript para nada.

Inconvenientes:

  • Es tan minimalista que se quedará corto cuando el proyecto crezca. Todo lo básico viene incluido, pero el resto tendrás que fabricarlo.
  • Las listas podrían estar más elaboradas.
  • No cumple el formato típico para los menús de headers (nav>ul>li>a).

Enlace: https://minicss.org

Tu framework CSS

Lapiz

v0.0.0

No he podido evitar una opción que nadie recomienda pero creo que es esencial para cualquier Diseñador Web. Estamos acostumbrados a que nos den el trabajo ya empaquetado en forma de estilos y una documentación perfectamente redactada. No es una perdida de tiempo desarrollar nuestras propias herramientas. Lo más seguro es que exista decenas de librerías iguales, con menos problemas y mucho más eficientes. Todos los Frameworks que he nombrado nacieron por dos razones: necesidad o ganas de aprender. Y todos los desarrolladores lucharon contra los mismos sentimientos que te vas a enfrentar: inseguridad, apatía, frustración, pereza… Forma parte del aprendizaje, de ser curioso. En el peor de los casos te servirá para entender la estructura de los grandes, y en el mejor serás independiente. Y, ¿quién sabe?, puede serle de ayuda a otras personas.

Ventajas:

  • Aumentará tu vocabulario CSS.
  • Mejorarás tus habilidades al maquetar con Flex y Grid.
  • Entenderás como funcionan otros Frameworks CSS.
  • Podrás ir incluyendo componentes por demanda.
  • Aprenderás a tener una estructura clara.

Inconvenientes:

  • No estará tan testeado como te gustaría.
  • Vas a reinventar la rueda.
  • Tendrás que hacer un esfuerzo extra a la hora de documentar. Sería recomendable una web con ejemplos para que otros te comprendan.

Enlace: Depende de ti.

Interés a lo largo del tiempo

Conclusiones

¿Cual debo utilizar? Depende. Mis sugerencias.

  • Si es un sitio pequeño: Bulma o MiniCSS.
  • Si es un sitio mediano o grande: Bootstrap, Semantic UI o Foundation.
  • Si hay que trabajar rápido: Tailwind.
  • Si vas a trabajar solo: Bulma o tu framework.
  • Si vas a trabajar con otras personas: Bootstrap o Foundation.
  • Si debe tener un aspecto sencillo: MiniCSS.
  • Si debe tener un aspecto muy personalizado: Tailwind o tu framework
  • Si debe tener un aspecto de App: Semantic UI.