Hola a tod@s, hoy os quiero presentar un Framework muy interesante para la maquetación de páginas web. El Framework se llama 960 Grid System y nos permite dividir nuestro sitio web en las zonas que queramos de una forma muy sencilla.

El primer paso que tenemos que hacer es descargar el Framework de la página http://960.gs/ pinchando en el enlace “Download” que aparece en la parte superior de la página. Al pinchar en dicho enlace se nos descarga un fichero .zip que, al descomprimirlo, vemos que en su interior tiene varias carpetas. Lo que nos interesa a nosotros es la carpeta “css” que se encuentra dentro de la carpeta “code”. Dentro de esta carpeta se encuentra una colección de ficheros css. Esto es así ya que el Framework no es más que una declaración de estilos que dispone de las clases necesarias para implementar columnas de diversos tamaños en una página web.

El Framework nos crea un diseño de página de 960 píxeles de ancho el cuál lo podemos dividir en 12 columnas o en 16 columnas. Pinchando aquí se puede ver un ejemplo de esto.

Comencemos ya con el código:

Es importante que el Doctype de la página sea adecuado para que todos los navegadores lo entiendan, por ejemplo podría ser como este (si usamos XHTML transicional):

o como este (si usamos XHTML estricto):

Lo siguiente es enlazar nuestra página con las hojas de estilos del Framework:

Una vez enlazadas las hojas de estilo podemos empezar a maquetar la página escribiendo el código necesario en el cuerpo (body) de la misma.

El Framework se compone básicamente de las siguientes clases css:

Todo el contenido de la página tiene que estar en una capa cuyo atributo class sea igual a “container_12” si queremos un diseño de 12 columnas o igual a “container_16” si queremos un diseño de 16 columnas.

Por ejemplo para el diseño de 12 columnas sería de la siguiente manera:

Bien, suponiendo que hemos elegido el diseño de 12 columnas, lo que tenemos que hacer ahora es ir definiendo por filas los distintos anchos que queremos que tengan las columnas. Por ejemplo, supongamos que tenemos una cabecera de la página con una imagen a la izquierda y un texto a la derecha y supongamos que la imagen ocupa 7 columnas y el texto 3 columnas. Además queremos que entre la imagen y el texto haya una columna de espacio y que después del texto haya otra columna de espacio hasta el borde derecho de la página. En total si contamos las columnas que ocupan la imagen, el texto y las dos columnas de espacios tenemos 12 columnas, ¡Perfecto!.

El modo de definir esta situación sería como sigue:

Como se puede observar las columnas se definen mediante la clase “grid_X”

siendo X el número de columnas que queremos que ocupe cierto item. También se observa en la clase que aparece la palabra “suffix_1”. El sufijo se utiliza para definir columnas en blanco después de las columnas que estarán ocupadas y si cambiamos el número 1 por otro número podemos definir columnas en blanco de mayor tamaño, teniendo en cuenta que las columnas totales de una fila no puede ser mayor de 12.  Del mismo modo si quisiéramos que hubiese alguna columna en blanco antes de la imagen podríamos haber usado el atributo de clase “prefix_X” donde X es el número de columnas de prefijo que queremos tener en blanco. Por ejemplo, si queremos dejar una columna en blanco delante de la imagen:

Después de cada fila es importante colocar una capa con la clase “clear”.  Esto es debido a que la clase “grid_X”  tiene un flota left y con esta clase se consigue romper el estilo y por tanto la siguiente fila comienza a la izquierda del todo.

Aunque antes no se ha mencionado es posible anidar unos grid dentro de otros. Cada vez que se anida un grid dentro de otro se crea un espacio de 10 píxeles a la derecha y a la izquierda del grid interno. Es posible eliminar estos espacios si queremos mediante las clases “alpha” y “omega”. La clase alpha elimina el espacio de 10 píxeles de la izquierda y la clase omega elimina el espacio de 10 píxeles de la derecha. Por lo tanto si anidamos varios grids dentro de otro grid, el primer grid anidado debería contener la clase alpha y el último grid anidado debería contener la clase omega.

Bueno, y esto es todo por hoy, espero que haya quedado más o menos claro y que os sea útil. Para cualquier duda dejar comentarios.   http://960.gs/