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.
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, 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 se lo logre explicar con 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:
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.
Otra aplicación de los conceptos
Una vez más, contruiremos la estructura por partes, comenzando por la cabecera. Se insiste 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.
Se le colocan 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>
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.
<style type="text/css">
p{
border: 1px solid #999;
padding: 5px;
margin: 0px;
}
#cabecera{
background-color: #ffcccc;
}
#buscador{
background-color: #ccffcc;
}
#izq{
background-color: #e0e0ff;
}
#izq1{
background-color: #ccccff;
}
#izq2{
background-color: #9999ff;
}
#izq3{
background-color: #6666ff;
}
#der{
background-color: #dedede;
}
#pie{
background-color: #ff8800;
}
</style>
Con esto ya hemos visto un primer ejemplo completo de maquetación CSS a través del framework 960 Grid System.
