Importante: Este listado no se encuentra ya actualizado. Son herramientas que eran populares en el año 2009 y que a día de hoy ya no se encuentran actualizadas o no tienen con un mantenimiento frecuente del código. Actualmente tenemos una nueva generación de frameworks que han aportado mucha más sofisticación al panorama del diseño web.

En este artículo vamos a enumerar y comentar algunas cosas sobre frameworks CSS, si es que se les puede llamar frameworks, puesto que ese concepto se usa muchas veces para sistemas que facilitan la programación de aplicaciones y en el caso de los CSS, no es programación, sino que se utilizan para obtener ayudas en la maquetación de webs.

Como sabemos, en el momento actual las páginas se maquetan con CSS. Con HTML especificamos los contenidos y con CSS la forma o disposición con la que deben presentarse al usuario en los navegadores. CSS por tanto es un lenguaje que sirve para especificar el estilo de las páginas, pero muchas veces hacemos cosas repetitivas, como divisiones de página en columnas, cajas de determinados tipos, etc. Pues los Frameworks CSS nos ayudan a realizar esas tareas de maquetación básicas, que muchas veces tenemos que implementar repetidas veces en diversos sitios, para generar las estructuras de elementos de la página.

Los frameworks CSS disponen una serie de clases (de hojas de estilo) ya creadas con las que ayudar a posicionar elementos en la página y crear estructuras de maquetación, más o menos versátiles. Así, en el desarrollo de páginas nuevas, o en el rediseño de páginas antiguas, podemos ayudarnos de frameworks CSS para disponer de una rejilla donde posicionar los distintos componentes de nuestro diseño. Con ello nos ahorraremos el tiempo de tener que crear de nuevo decenas de clases que estamos aburridos de implementar para crear maquetaciones a 2, 3 ó 4 columnas, con divisiones de cabecera, cuerpo y pie, etc.

En DesarrolloWeb.com hemos analizado un framework CSS y realizado un manual para explicar sus características y funcionamiento, que recomendamos leer para obtener más explicaciones. Se titula Maquetación CSS con 960 Grid System , en el que encontraréis además diversos vídeos muy ilustradores para conocer de primera mano el proceso de diseño de una web utilizando uno de estos frameworks CSS.

En este artículo pretendo simplemente enumerar este y otros frameworks CSS, en un listado que pretende dar una idea de las posibilidades que nos ofrece en este momento el mercado.

960 Grid System

Es, tal vez, el más utilizado de los frameworks CSS, cuyas páginas se construyen en anchuras de 960 píxeles (de ahí su nombre). Ofrece dos posibilidades de maquetación de páginas, con una rejilla de 12 ó 16 columnas. Nosotros escogimos este framework CSS para explicarlo a los lectores de DesarrolloWeb.com, justamente por ser tan popular. En nuestro trabajo con este sistema hemos podido comprobar que es muy versátil y sobre todo, sencillo de utilizar.

Página web de 960 Grid System
Manual de 960 Grid System

Simple

Este framework CSS lo presenta un desarrollador chileno, con lo que todos los ejemplos y documentación que puedas encontrar está en español. El creador lo ha realizado para poder simplificar las cosas, no sólo en el desarrollo de las páginas, sino también en el aprendizaje. Lo destacamos en segundo lugar por ser un producto en castellano, que siempre se agradece tener herramientas para trabajar en nuestro propio idioma.

Página web de Simple ya no disponible.

Blueprint

Es un framework CSS que pretende reducir el tiempo de desarrollo de las páginas web. Ofrece una estructura sólida en la que fundar tu trabajo de diseño, por medio de la típica rejilla. Pero no se limita simplemente a eso, sino que ofrece otra serie de clases muy útiles para estilizar componentes típicos, como formularios, botones, pestañas, tipografías o para que tus páginas web se puedan imprimir de manera óptima en papel.

Página web de Blueprint

YUI Grids CSS

El framework CSS de Yahoo! Es un código CSS que permite maquetar páginas con distintas anchuras (750px, 950px, y 974px) y hacer todas las cosas típicas que se pueden desear en una página. Tiene 6 plantillas predefinidas y la posibilidad de crear más de 1.000 combinaciones de maquetación, en regiones de 2, 3 y 4 columnas. Forma parte de la Yahoo! User Interface Library, lo que da una garantía adicional, por venir de tan renombrado buscador.

Ha desaparecido y ya no se encuentra disponible su página web.

Tripoli

Tripoli no es un framework CSS y según remarcan los creadores, ello significa que no te obliga a desarrollar tu página de una manera determinada. En contra, lo que ofrece es un código CSS que resetea los estilos predefinidos de los navegadores y los redefine, consiguiendo una base estable sobre la que realizar un sitio y que se vea igual en cualquier cliente web. Puede ser interesante porque intenta no caer en los problemas que tienen los frameworks CSS.

Página web de Tripoli no disponible

Boilerplate

Este no podemos decir que sea un framework sino un punto de inicio para el desarrollo de sitios. Es interesante porque incluye código HTML y permite iniciar proyectos rápidamente bajo una base de código bastante sólida.

Este framework está pensado para simplificar las cosas y ser ligero, aportando todo lo básico para poder maquetar una web, pero sin las complejidades de otros.

Pagina web de Boilerplate

BlueTrip

Según sus creadores, BlueTrip es una combinación de lo mejor de distintos frameworks CSS de los que hemos hablado ya. Su nombre viene de la unión de BLUEprint - TRIpoli, haciendo referencia a esa unión de ideas de los mejores framewoks, entre los que también se han inspirado en nuestro framework preferido en estos momentos, 960 grid, por su sencillez.

Página web de BlueTrip ya no disponible

Otros Framework CSS

Pongo otros frameworks CSS que he encontrado y que no he investigado tanto las posibilidades que ofrecen, aunque también pueden ser interesantes, sobre todo puede que den enfoques diferentes que puedan ser útiles en ciertas ocasiones.

Actualizado: teníamos otra lista de alternativas, pero hemos retirado los enlaces porque no están en mantenimiento, o no se actualizan hace más de 10 años o bien las páginas han dejado de existir. Para referencias más actuales recuerda acceder a la colección de frameworks CSS modernos.

Como referencias sobre frameworks CSS seguramente tendremos más que suficiente. Pero llegado a este punto y antes de decidirte por qué framework usar o si te interesa o no utilizar uno de ellos, te recomendamos leer el artículo sobre las ventajas e inconvenientes del uso de frameworks CSS.