27 de julio de 2012 | Nateevo | Desarrollo web, Diseño

960-cabecera

960 Grid System es un Framework CSS que nos permite estructurar contenidos de una forma fácil, sencilla y potente garantizando una correcta visualización en resoluciones 1024 x 768 ó superiores. Este sistema no es más que un conjunto de propiedades CSS que determinan el posicionamiento de las cajas contenedoras de nuestra maqueta en base a unas columnas predefinidas. El ancho total se establece en 960 px porque es un número divisible entre gran cantidad de números lo que nos permite una mayor versatilidad y además no supera el ancho de 1024 (resolución más utilizada actualmente).

Este framework dispone de dos variantes, 12 ó 16 columnas, la variante de 12 columnas ofrece menos posibilidades con los anchos de caja pero es más que suficiente en la mayoría de diseños, por otro lado tenemos la variante de 16 columnas que nos ofrece mayores posibilidades en anchos de caja para diseños con un mayor nivel de detalle.

La variante de 12 columnas cuenta con un ancho por columna de 60 px y ofrece las siguientes posibilidades:
12

La variante de 16 columnas cuenta con un ancho por columna de 40 px y ofrece las siguientes posibilidades:
16

La capa contenedora debe tener asociada la clase container12 o container16 según la rejilla que queramos utilizar y luego simplemente incluir las capas que necesitemos con la clase correspondiente a su ancho, por ejemplo si queremos utilizar una caja con un ancho de 220px le aplicaríamos la clase grid_3 ya que corresponde con el tercer valor de la escala en la rejilla de 12 columnas, si quisiéramos utilizar una caja con un ancho de 380 px aplicaríamos la clase grid_5 y así sucesivamente.

Uno de los pocos inconvenientes que tiene este framework es que actualmente no está preparado para estructuras líquidas, pero aún así merece la pena probarlo.

Si estás interesado en implementar este framework puedes descargarlo desde su página de inicio donde encontrarás información más detallada sobre su uso con páginas de ejemplo: 960 Grid Tutorial

compartir

Más entradas