Listado de distintos frameworks CSS

  • Por
Un listado de los frameworks CSS que hay en el mercado para ayudar en la maquetación de páginas web con CSS.

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
Artículo en DesarrolloWeb.com sobre Simple

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.

Página web de YUI Grid CSS

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

Boilerplate

Este framework me ha parecido interesante porque está creado por uno de los desarrolladores iniciales de Blueprint, que ha fundado el nuevo proyecto para poner en marcha sus ideas particulares. Como él dice, 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 que tiene Blueprint y con convenciones de nombres que dan más sentido y significado a lo que estamos codificando.

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

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.

Elements
ESWAT
Content with style
My CSS Framework
Hartija
Malo (Framework CSS ultra pequeño)
emastic

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Norman

02/7/2009
Artículo CSS
Gracias por esta gran colaboración, CSS es hoy en día sin lugar a dudas una gran utilidad para la maquetación de Web, y aún mas ahora que tenemos información sobre diferentes Frameworks para esta valiosa utilidad.

estoyenello

23/7/2009
ver blue trip
Hola
revisando los enlaces he visto que blue trip se ve muy distinto en IE6 y FF3.
Si su pagina de presentación tiene ese problema, creo que su framework no es muy adecuado.

fer

31/5/2012
Bueno
Está muy bueno el material de la página, no tengo mucho más que opinar, ya que recien estoy metiendome en esto del disño con frameworks..
solo me basta agradecer