Frameworks CSS3

La intención de un framework es principalmente ahorrar tiempo y minimizar el riesgo de errores en el desarrollo de aplicaciones. Los frameworks nos evitan, sobretodo en los momentos iniciales del desarrollo de una aplicación, repetir código para construir la base y nos permiten conseguir ciertas funcionalidades o módulos genéricos de forma más rápida y sencilla.

Así como hay frameworks para PHP (CakePHP, CodeIgniter, The Zend Framework…) o para Javascript (como no… JQuery), también existen varios frameworks para CSS. Veamos en qué consisten.

¿Qué es un framework CSS3?

Igual que sus parientes orientados a lenguajes de servidor o cliente, el objetivo de un framework CSS será ahorrarnos realizar las tareas básicas al trabajar con hojas de estilo. Normalmente los frameworks CSS se componen de uno o varios archivos con declaraciones predefinidas que incluyen:

  • CSS Reset: Resetear los estilos nos permitirá homogeneizar, a priori, las posibles diferencias de visualización entre navegadores, unificando las propiedades básicas de los elementos: márgenes, paddings, tamaños, formatos, etc.
  • Layout:  Una parte de los frameworks va dirigida a una de las tareas más árduas a la hora de maquetar cualquier diseño: conseguir un determinado layout, más o menos complejo, que sea, además de óptimo, compatible con todos los navegadores. Suelen disponer de múltiples opciones combinables para conseguir layouts complejos: múltiples columnas, anchos fijos, elásticos, líquidos…
  • Tipografías: Una gestión genérica de las tipografías que se usarán en la página. De nuevo, no sólo se trata de aplicar un uso inteligente de fuentes y tamaños, si no de unos altos de línea, márgenes, paddings… consistentes, que ayuden a  mantener un correcto ritmo vertical en la página.

Ventajas de usar un framework CSS

  • Permite agilizar el desarrollo, sobre todo en sus momentos iniciales.
  • Te ahorra las habituales batallitas entre navegadores para conseguir que tus diseños sean compatibles con todos los navegadores.
  • Partes de una base normalizada / homogeneizada sobre la que desarrollar un trabajo adicional.

Inconvenientes

  • Curva de aprendizaje. Algunos frameworks son realmente complejos, y es necesaria bastante dedicación  y pruebas para llegar a controlarlos bien, conocer y usar todo su potencial.
  • Puede afectar negativamente a la semántica de tu marcado HTML. La mayoría de los frameworks contienen definiciones demasiado genéricas que además han sido pensadas y nombradas pensando únicamente en la apariencia que tendrán.
  • Gran parte del código nunca será utilizado. Los frameworks intentan prever todas las situaciones y contienen muchas definiciones genéricas que posiblemente nunca lleguemos a utilizar. Afortunadamente existen Frameworks en los que podemos personalizar lo que vamos a utilizar, como Bootstrap.
  • Por último, y posiblemente la más importante al menos para mí, es que al usar un framework CSS no terminas de entender cómo funcionan determinadas funciones de las hojas de estilo. Muchas de las cosas que sé ahora las aprendí echando horas delante de la pantalla intentando revolver porqué una página en Google Chrome se visualizaba bien y en Internet Explorer no.

Algunos frameworks CSS3

Pese a estos inconvenientes yo me inclino por usarlos, ya que facilita mucho la creación de sitios responsive. A continuación os dejo algunos frameworks CSS.


Bootstrap

Bootstrap

Bootstrap es un framework front-end muy popular y moderno. Está repleto de funciones que necesitas para sitios responsive y aplicaciones.

Bootstrap tiene un grid de 12 columnas responsive, 13 plugins jQuery personalizados para interfaces de usuario comunes como carruseles y ventanas modales, personalizador de Bootstrap, y más…

Bootstrap está muy bien documentado, tiene mucha cobertura en blogs así como tutoriales.


Foundation

Foundation Framework

Fountation es otro framework front-end muy popular. Con este moderno framework HTML5 puedes enfocarte en «mobile-first» o de grandes pantallas hasta tamaños móviles.


Skeleton

Skeleton

Skeleton es un sencillo y limpio framework CSS responsive para sitios web HTML5 y aplicaciones. Tiene sólo lo que necesitas, nada más. Está basado en un Grid de 16 columnas. Incluye un PSD con el Grid.

Si quieres empezar con el diseño responsivo de manera rápida, este es tu framework.


HTML5 Boilerplate

HTML5 Boilerplate

HTML5 Boilerplate nos ofrece simplificar el proceso de construcción de sitios web en HTML5 y para ello nos permite descargar una especie de template o plantilla que puede ayudar no solo a los desarrolladores web novatos, sino también a los más experimentados.


HTML KickStart

HTML Kickstart

HTML KickStart es un framework con un Grid de 12 columnas que destaca por su sencillez, flexibilidad, facilidad de uso y elegancia.


Estos son algunos de los frameworks que existen actualmente, pero hay más. Con ellos se puede crear una web responsive de una manera más fácil y dinámica. Si utilizas algún otro framework puedes dejar un comentario y contar tu experiencia. En lo personal he usado Skeleton y Bootstrap, que he adoptado como «framework de cabecera».

Puedes compartir si te ha gustado este post.

Gracias y un saludo.

Deja un comentario