Maquetacion usando CSS con el sistema 960 Grid

Introducción a la maquetación de páginas web usando CSS con el sistema 960 Grid.Por Miguel Angel AlvarezAtención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Vamos a realizar una serie de artículos sobre la maquetación de páginas web con 960 Grid System, que nos permitirá implementar nuestros diseños de webs más fácilmente. 960 Grid System es un framework CSS, que no es más que una declaración de estilos que dispone las clases necesarias para implementar columnas en una página web, de diversos tamaños, con las que maquetar nuestros contenidos fácil y ordenadamente.

Nosotros mismos podríamos hacer un sistema propio para maquetar una página con diversas columnas, como hemos visto en diversos artículos del Taller de CSS, pero utilizando un framework como 960 Grid ya tendremos la mayor parte del trabajo realizado, pues simplemente tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema, para que tenga la anchura y posición deseadas.

Utilizar un framework CSS no aporta nada de creatividad para realizar un diseño bonito, pero nos permite anclar contenidos en la página de una manera sencilla. Nosotros, por tanto, seremos los que nos encargaremos de diseñar una página web que tenga un aspecto agradable, pero podremos partir de una estructura en columnas, donde ceñir los espacios para que quede todo bien colocado. Con la práctica notaréis que, saber de antemano los espacios disponibles para las columnas del diseño de nuestra web, resulta bastante útil a la hora de diseñar con algún programa como Photoshop, tal como podréis ver en el siguiente vídeo del diseño de una web con Photoshop.

960 Grid System lleva este nombre porque es un sistema de rejilla para hacer páginas con 960 píxeles de ancho. Las columnas que podremos colocar en la rejilla tendrán distintas anchuras, pero siempre el ancho total de la página será de 960 píxeles. Se ha elegido este valor porque 960 es divisible por una buena cantidad de números, lo que lo hace más versátil para poder alcanzar páginas resultantes de la más variada gama.

En la propia página de inicio de 960 Grid System se puede acceder a la descarga del Framework y a algunas explicaciones sobre su uso, así como a ejemplos de páginas que lo utilizan para la maquetación CSS y a un demo interesante para poder ver el tipo de columnas que se pueden conseguir, sus anchuras, etc.

http://960.gs

Variantes de 960 Grid

El propio framework dispone de dos variantes distintas, para hacer páginas utilizando 12 ó 16 columnas. No es que necesitemos utilizar todas las columnas disponibles para realizar la maquetación, sino que la rejilla tendrá esas divisiones verticales donde podemos situar los elementos. La variante de 12 columnas da menos posibilidades para repartir los espacios, pero en muchos de los casos será más que suficiente para crear cualquier estructura de

página. En cuanto a la variante de 16 columnas, da una gama mayor de posibles anchos para las columnas, que puede ser necesaria en diseños con un nivel de detalle más alto.

En ambas variantes las columnas que se consiguen tienen un margen a cada lado de 10 píxeles, por lo que si colocamos dos columnas, una al lado de otra, entre los márgenes de las dos a la vez, obtendremos una separación de 20 píxeles entre ellas.

Anchuras posibles con la variante de 12 columnas

Con la primera de las variantes de 960 Grid podemos hacer divisiones en hasta 12 columnas distintas. Teniendo en cuenta los márgenes a la izquierda y la derecha de las columnas, las anchuras de las que disponemos serán las siguientes:

1: 60px 2: 140px 3: 220px 4: 300px 5: 380px 6: 460px 7: 540px 8: 620px 9: 700px 10: 780px 11: 860px 12: 940px

Cualquier columna tendrá que tener uno de estos tamaños disponibles. En una sección podemos poner varias columnas de diversos tamaños, siempre teniendo en cuenta que la anchura máxima disponible será de 96 píxeles, menos los márgenes.

Por ejemplo, para un diseño a 3 columnas, una combinación de anchuras podría ser de 140px, 460px y 300px.

Anchuras posibles con la variante de 16 columnas

Utilizando la variante de 16 columnas tenemos 16 posibles anchuras de elementos de la página, lo que puede aumentar las posibilidades de elección. Las distintas anchuras sobre las que podríamos trabajar son las siguientes:

1: 40px 2: 100px 3: 160px 4: 220px 5: 280px 6: 340px

7: 400px 8: 460px 9: 520px 10: 580px 11: 640px 12: 700px 13: 760px 14: 820px 15: 880px 16: 940px

Así pues, con este sistema podríamos maquetar hasta 16 columnas de 40 píxeles cada una, o cualquier combinación que deseemos, siempre que la anchura más los márgenes de los elementos sea de 960 píxeles.

En los archivos para descarga del framework encontraremos un demo que nos puede dar una idea exacta de los tamaños de las cajas y las posibilidades de maquetación. También podemos ver el demo en la URL: http://960.gs/demo.html

En definitiva, con 960 Grid tenemos bastante versatilidad para hacer nuestras maquetaciones. Todavía tenemos que explicar cómo utilizar el framework, lo que dejaremos para siguientes artículos, pero al menos podemos hacernos una idea de las posibilidades.

La maquetación con CSS se facilita mucho con 960 Grid System, como veremos en este artículo, en el que no vamos a mostrar todas las posibilidades del framework, sino más bien una pequeña introducción a su uso para maquetar contenidos con muy poco esfuerzo. Ya hablamos de este sistema en el artículo de desarrolloWeb.com Presentación de 960 Grid System

Simplemente vamos a hacer un esquema de contenedores que colocaremos con distintas anchuras y en columnas diferentes, para ver cómo se posicionan y cómo se define la anchura de los elementos por medio de este framework CSS. En cada contenedor, por ahora, colocaremos simplemente un párrafo con un contenido de texto.

Para realizar este ejemplo y por reducir la complejidad del mismo, vamos a utilizar la rejilla de 12 columnas (en vez de la de 16 columnas), que nos da la suficiente versatilidad.

Contenedor principal de 12 columnas

Todo lo que se desee colocar en la página debe ir en un contenedor principal. Este contenedor tiene el nombre de class CSS "container_xx", donde xx es el número de columnas que vamos a utilizar. Para nuestro caso a 12 columnas, tendríamos el siguiente contenedor:

<div class="container_12">...</div>

Dentro del container colocaremos los elementos de la página ya con la estructura de rejilla.

Elementos de la rejilla

Cada elemento a colocar en el contenedor tiene una clase como "grid_x", siendo x el número de la clase que tiene la anchura deseada. En el artículo anterior ya vimos el listado de anchuras de columna permitidas por 960 Grid, para la variante de 12 columnas. A cada columna le pusimos un número para identificarla. Ese número es lo que tenemos que colocar dentro del nombre de la class CSS que utilicemos. Para abreviar la referencia, coloco aquí también ese listado de rejillas con sus anchuras:

1: 60px 2: 140px 3: 220px 4: 300px 5: 380px 6: 460px 7: 540px 8: 620px 9: 700px 10: 780px 11: 860px 12: 940px

Por ejemplo, si queremos un elemento que utilice una columna con toda la anchura disponible (sería la grid de anchura 940px (número 12), utilizaríamos este código:

<div class="container_12"> <div class="grid_12"> <p>940 px</p> </div> <div class="clear"></div></div>

Como se puede ver, se ha utilizado el nombre de clase grid_12 y la anchura del contenedor 12 es de 940 píxeles.

Dentro del container, después de cada fila de elementos, hay que colocar un div con class="clear", que elimina posibles problemas de float que pudiéramos tener en el diseño con columnas.

Por poner otro ejemplo, ahora pensemos en una estructura de dos columnas, donde ambas midan 460 píxeles de anchura:

<div class="container_12"> <div class="grid_6"> <p>460 px</p> </div> <div class="grid_6"> <p>460 px</p> </div> <div class="clear"></div></div>

Ahora, por complicarlo un poco más, vamos a tener varias filas de contenedores, donde cada uno colocaremos diferentes números de columnas y anchuras:

<div class="container_12"> <div class="grid_12"> <p>940 px</p> </div> <div class="clear"></div> <div class="grid_2"> <p>140 px</p> </div> <div class="grid_7"> <p>540 px</p> </div> <div class="grid_3"> <p>220 px</p> </div> <div class="clear"></div> <div class="grid_6"> <p>460 px</p> </div> <div class="grid_6"> <p>460 px</p> </div> <div class="clear"></div>

</div>

Podemos ver que se utilizan constantemente las class de CSS con nombres grid_x, para especificar contenedores de distintas anchuras. Después de cada fila de elementos se coloca el mencionado DIV con class="clear". En este caso que tenemos varias filas es todavía más importante utilizarlo.

Como se puede ver en esta primera demo de uso de 960 Grid System, maquetar con varias columnas y distintas áreas de contenidos es bien simple. Ahora faltaría meter contenidos en cada uno de los contenedores de la rejilla. No obstante, estas no son las únicas cosas que tenemos que saber para maquetar con 960 Grid System, por lo que en futuros artículos de Desarrollo Web .com seguiremos viendo otros aspectos más avanzados del framework CSS.

Las clases CSS que define este framework CSS son bastante sencillas de entender y de utilizar en nuestros diseños. Además, dado que son realmente pocas, no tendremos problemas en dominarlas todas y utilizarlas con soltura. En este artículo queremos ofrecer unas explicaciones detalladas sobre las distintas clases que incorpora 960 Grid System, para que podamos utilizar el framework sin problemas y podamos entender también los próximos artículos, en los que veremos un ejemplo de diseño.

En los anteriores capítulos publicados en DesarrolloWeb.com en el Manual de 960 Grid System, ya explicamos qué es un framework CSS y ofrecimos unas primeras notas sobre éste, que incluían la descripción de las clases más importantes como container_xx y grid_xx. Convendría sin duda leer desde el principio este manual, pero de cualquier forma vamos a explicar todas las clases disponibles para que ofrecer una documentación completa.

Class container_xx: Esta clase sirve para definir un contenedor, donde colocaremos luego todos los contenidos de nuestro diseño. Existen dos tipos de contenedores, de 12 y 16 columnas, que se forman con las clases container_12 y container_16.

Class grid_xx: La clase grid_xx define un elemento del diseño que será colocado en un contenedor y ajustado a la rejilla que forma 960 Grid System. El valor "xx", de grid_xx, expresa el tamaño de la rejilla que se está definiendo. A un número mayor, más anchura se dedicará a este elemento. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas. Por ejemplo, con grid_1 se obtendrá un elemento con una anchura igual a un doceavo del espacio total de la página, con grid_8, obtendríamos un elemento de anchura igual a 8 doceavos del espacio y así.. En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.

Estas son las clases principales, que ya explicamos con mayor detalle en el artículo Lo básico sobre el uso de 960 grid

Ahora veamos otras clases que sin lugar a dudas también nos vendrán bien y tendremos que saber utilizar para implementar diseños medianamente avanzados con el framework CSS.

Class alpha y class omega: Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los márgenes de los distintos elementos anidados. Como deberíamos saber ya, porque se dijo en el primer artículo de este manual, las clases grid_xx tienen un margen de 10 píxeles a la

izquierda y la derecha. Por ejemplo grid_12 que utiliza todo el ancho de la página, en realidad tiene 940 píxeles, que es el resultado de a 960 restarle 10 píxeles de margen a la izquierda y otros 10 a la derecha. Si metemos unos grid_xx dentro de otros, los márgenes de los grid_xx anidados van incrementándose y esto nos haría que los espacios disponibles no fueran suficientes para contener todos los elementos. Con las clases alpha y omega lo podremos solucionar. Quizás logre explicarlo mejor a la vista de una imagen.

En la imagen anterior vemos 4 capas, a las que les hemos puesto un color de fondo para saber dónde están. La primera, arriba del todo con fondo rosa es la cabecera, que no nos interesa mucho para la explicación, pero nos viene bien verla para hacernos una idea de los espacios. Luego tenemos la Capa1, con color azul, que contiene a la Capa2, con color verde, que a su vez contiene a la Capa3, con color de fondo gris. Quizás en mi maquetación desearía que la Capa3 estuviera alineada en la vertical con la capa de cabecera, pero realmente debido a los márgenes de las capas 2 y 3, se deja ver un espacio vacío que tiene los fondos de las capas que se están por debajo de la Capa 3.

Estos espacios vacíos seguramente no nos molesten sólo estéticamente, sino que podría ocurrir que las distintas grid que hemos colocado en el diseño no tengan el espacio suficiente para posicionarse correctamente. Al perder 10 + 10 píxeles por esos márgenes, puede que no quepan todas las cajas colocadas en el diseño con las clases grid_xx.

En fin, que para solucionar este problema, se deben colocar las clases alpha y omega. La clase alpha sirve para eliminar el margen de 10 píxeles a la izquierda y la clase omega para eliminar el margen de 10 píxel de la derecha. Estas dos clases debemos utilizarlas siempre que tengamos un grid_xx que tenga a su vez otros grid_xx anidados. El primer grid_xx hijo debería tener también la clase alpha y el que coloquemos como último debe tener también la clase omega.

Class prefix_xx: Esta clase sirve para anclar una grid_xx dejando un espacio vacío a la izquierda. Por ejemplo, prefix_1 haría que la grid tuviera el espacio libre de la anchura de 1 columna a la izquierda. Esto nos sirve en el momento que queramos dejar un espacio antes de meter una capa con grid_xx que no queremos que empiece a la izquierda del todo. Veamos esta imagen:

Observamos el espacio vacío a la izquierda de la capa que aparece abajo con fondo blanco y borde gris. Ese espacio vacío lo hemos conseguido metiendo la clase prefix_5 a la capa. Ahora bien, este espacio vacío también se cuenta como espacio de la capa, lo que veremos mejor si colocamos un color de fondo a la capa sobre la que hemos aplicado el prefix_5, como aparece en esta imagen:

Esta capa que hemos visto en la imagen tiene definidas las clases grid_7, porque el área donde meteremos los contenidos ocupa sólo el espacio de 7 columnas, y prefix_5, para que deje 5 columnas de espacio vacío a la izquierda, antes de poner los contenidos. (En mi diseño con container_12, llego a las 12 columnas entre la anchura del elemento grid_7 y el espacio vacío que he colocado con prefix_5)

Class suffix_xx: De una manera similar a prefix_xx, la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. La capa tendrá una anchura definida con la clase grid_xx y luego con suffix_xx podremos hacer que tenga espacio adicional vacío a la derecha. Lo veremos mejor con una imagen.

En la imagen anterior podemos ver como el contenido de la capa de fondo rosa se coloca dejando un espacio vacío a la derecha. Al definir la capa hemos colocado una clase grid_8, para una anchura de 8 columnas y luego una clase suffix_1, para un espacio en blanco a la

derecha de 1 columna. En la práctica, el espacio total que estoy ocupando es 9 columnas (8 por definir grid_8 mas 1 por definir suffix_1), luego la siguiente capa, donde he puesto la palabra "buscador" tal como se ve en la imagen, tendrá una anchura de 3 columnas. Esto para mi diseño de container_12, que estará ocupando la anchura completa, sumando el grid_8 + suffix 1 de la primera capa, mas el grid_3 de la segunda.

Ahora ya conoces todas las class CSS del framework 960 Grid

Con esto ya hemos visto todas las distintas clases CSS que tiene 960 Grid System. Esperamos que hayáis podido entenderlas bien y que ahora no resulte difícil aplicarlas para la consecución de vuestros objetivos de diseño. No obstante, en el siguiente artículo veremos un ejemplo de maquetación CSS en el que utilizaremos todos los tipos de class CSS disponibles. Aun será un ejemplo simplificado, pero suficiente para que podamos ver las aplicaciones prácticas de lo aprendido hasta ahora. Con el objetivo de mejorar la comprensión de las distintas clases del framework CSS 960 Grid System, que ya explicamos en el artículo anterior del manual de 960 Grid System, vamos a mostrar en este artículo de DesarrolloWeb.com un sencillo ejemplo de maquetación web utilizando hojas de estilo en cascada.

El presente ejemplo no tiene otro objetivo que entender las clases disponibles en el framework CSS y practicar con ellas. Para ello no nos hemos preocupado en el diseño, sino simplemente en la maquetación en filas y columnas. Así pues fijémonos en el verdadero valor de esta práctica y no en su aspecto estético, que hay que aceptar que es bastante feo. En el futuro vamos a realizar un diseño paso a paso, con bastante más creatividad y componente gráfico, para que se vea cómo maquetar un caso más complejo y con más elementos.

Vendría bien echar un vistazo a la página con el ejemplo que vamos a explicar en este artículo.

Doctype de XHTML

Para comenzar, es importante decir que este diseño lo tenemos que hacer en XHTML y utilizar un doctype adecuado para que todos los navegadores lo entiendan igual. Podríamos poner diversos doctype, pero por ejemplo nos valdría este: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Eso si estamos utilizando XHTML transicional, pero podríamos utilizar XHTML estricto, con este otro doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nota: la declaración doctype debe colocarse como primera línea del código de nuestro archivo HTML.

Enlazamos las hojas de estilos del framework CSS

Como segundo paso, debemos enlazar las hojas de estilos (archivos CSS) que vienen con 960 Grid System. Estos archivos los obtenemos desde la página del propio framework, donde los tienen para descarga libre. Veremos que nos proporcionan varios CSS, uno con las clases definidas en 960 Grid System y otro par de archivos CSS que se pueden utilizar opcionalmente, que sirven para resetear los estilos del navegador y para aplicar ciertos estilos fijos a las etiquetas de texto. <link rel="STYLESHEET" type="text/css" href="code/css/960.css"><link rel="STYLESHEET" type="text/css" href="code/css/reset.css"><link rel="STYLESHEET" type="text/css" href="code/css/text.css">

Estructura de etiquetas del diseño en XHTML

Ahora podemos pasar a codificar el XHTML que tenemos que hacer para crear la estructura de filas y columnas de este ejemplo. En este paso, para maquetar los contenidos como deseamos, tendremos que utilizar las clases que nos proporciona 960 Grid System, explicadas en el artículo anterior.

Vamos creando esta estructura por partes, comenzando por la cabecera. Pero antes quiero insistir en que este ejemplo simplemente nos sirve para aprender el manejo de las clases del framework, incorporando ejemplos de uso de todos los tipos de clases disponibles, aunque a veces no tenga mucho sentido haber hecho las cosas tal cual aparecen.

He colocado en todas las capas del diseño un identificador (atributo id), para luego poder aplicarle estilos con CSS.

Para que se vea la estructura de contenidos que vamos a tener, muestro una imagen donde está la maquetación de la página, donde cada capa la hemos colocado con un color distinto y donde en el texto de la capa hemos colocado el identificador (atributo id) de esa capa.

Como se debe hacer con el framework 960 Grid System, todo el contenido del sitio se tiene que colocar dentro de una capa con clase container_xx. En nuestro diseño utilizaremos el formato de 12 columnas, por lo que utilizaremos la class CSS container_12.

<div class="container_12">...</div>

Colocamos ahora los contenidos en el contenedor, empezando por la cabecera de la página, que tiene dos capas, una con un texto a la izquierda y otra con otro texto a la derecha. La capa de la izquierda (id=cabecera) tiene una anchura de 8 columnas y un espacio vacío a la derecha de 1 columna. Para definir la anchura colocamos la class CSS grid_8 y para definir el espacio en blanco a la derecha, de una columna de anchura, se coloca la clase suffix_1.

<div id="cabecera" class="grid_8 suffix_1"> ... </div><div id="buscador" class="grid_3"> ...</div>

A continuación de la cabecera, como hemos visto en el código anterior hemos colocado el DIV con id "buscador", que tiene una anchura de tres columnas.

En total, en esta fila donde aparece la cabecera y el buscador, hemos utilizado 8 espacios en la cabecera por grid_8 y 1 de espacio en vacío a la derecha de la cabecera con suffix_1. Luego hemos colocado el buscador, ocupando un espacio de 3 columnas. En total 8 + 1 + 3 = 12, que es el total de espacio que tenemos disponible en un container_12.

Para continuar vamos a colocar un DIV con la class "clear". Esto se tiene que hacer justo después de cada una de las filas del diseño y la razón de ello es que las clases grid_xx tienen un float left y con este clear se consigue romper este estilo, de modo que la siguiente fila comience desde la izquierda.

<div class="clear"></div>

La siguiente parte del diseño tenemos dos columnas principales. En la primera columna tenemos a su vez otras tres columnas anidadas. Esto lo hacemos así a propósito para poner en marcha las clases alpha y omega explicadas en el artículo anterior.

Como habíamos explicado, para gestionar los márgenes de las distintas capas grid_xx, cuando están anidadas como en este caso, tenemos que poner la clase alpha en la primera capa anidada y la clase omega en la última capa anidada.

Así pues, tendremos una capa con id "izq", con espacio de 9 columnas y dentro de ésta, otras tres capas anidadas con espacios de 4, 3 y 2 columnas, donde tendremos que utilizar las clases omega y alpha comentadas antes. Tendremos que colocar después de estas tres columnas anidadas un DIV con class="clear", para que podamos seguir metiendo contenidos en la dentro de la capa id "izq", que aparezcan después de las tres columnas anidadas.

<div class="grid_9" id="izq">

<div class="grid_4 alpha" id="izq1"> ... </div> <div class="grid_3" id="izq2"> ... </div> <div class="grid_2 omega" id="izq3"> ... </div> <div class="clear"></div> ... </div>

<div class="grid_3" id="der"> ...</div>

<div class="clear"></div>

Después de la capa de 9 columnas de anchura con id "izq", hemos colocado para completar el espacio una capa lateral de anchura de 3 columnas. Entre todas las capas de esta fila tenemos pues, una de 9 columnas a la izquierda y otra de 3 columnas a la derecha, que hace un total de 12 columnas de anchura.

Como se ha visto en el anterior código, después de esta fila hemos colocado otro DIV con class="clear", para poder comenzar la siguiente columna desde el principio.

Para acabar tenemos el pie de página. El pie lo hemos hecho con una única capa de 7 columnas de anchura, con la particularidad que hemos dejado un espacio vacío a la izquierda de 5 columnas, que se consigue con la clase prefix_5. En total tenemos 7 columnas de espacio + 5 columnas vacías = 12 columnas del container_12.

Esto se consigue con el siguiente código:

<div class="prefix_5 grid_7" id="pie">pie</div>

Acabamos con un nuevo DIV class="clear", para colocar antes del cierre del cuerpo de la página.

Para que se vea más fácilmente el esquema creado para hacer la estructura de filas y columnas de este ejemplo, pongo a continuación el código completo del cuerpo de esta página:

<div class="container_12"> <div id="cabecera" class="grid_8 suffix_1"> <p>Cabecera</p> </div> <div id="buscador" class="grid_3"> <p>Buscador</p> </div> <div class="clear"></div> <div class="grid_9" id="izq"> <div class="grid_4 alpha" id="izq1"> <p>izq1</p> </div> <div class="grid_3" id="izq2"> <p>izq2</p> </div> <div class="grid_2 omega" id="izq3"> <p>izq3</p> </div> <div class="clear"></div> <p> Contenido de la capa izq, que aparecerá debajo de las 3 columnas anidadas. </p> </div> <div class="grid_3" id="der"> <p>der</p> </div> <div class="clear"></div> <div class="prefix_5 grid_7" id="pie"> <p>pie</p> </div>

<div class="clear"></div></div>

Podríamos ver en una página aparte el resultado obtenido, una vez colocado algo de texto dentro de las capas.

Para conseguir los colores de fondo y los bordes en las capas lo hemos hecho aplicando estilos CSS a través de los identificadores (atributo id) configurados en las distintas capas y aplicando estilos a la etiqueta P, como se puede ver a continuación.

Maquetacion usando CSS con el sistema 960 Grid

Documents

Transcript of Maquetacion usando CSS con el sistema 960 Grid