960 Grid System

¿Que es 960 Grid System?

960 Grid System es un framework CSS, es 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 contenidos de una forma fácil y ordenada.Se basa en un diseño de 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestra “cajas” de una forma simple y rápida.

Descripción del Grid 960

Como ya hemos comentado, tiene dos variantes, de 12 o de 16 columnas. Cada una de las columnas tiene un margen izquierdo y derecho de 10px, por ello tendremos en total una separación de 20px entre cada columna. Teniendo esto en cuenta, si decidimos 12 columnas el ancho será de 60px, y si decidimos 16 columnas el ancho será de 40px

Ver demo: http://960.gs/demo.html

http://960.gs/demo.html


12 columnas: 12 x 60 + 12 x 20 (de los márgenes) = 720 + 240 = 960 px


16 columnas: 16 x 40 + 16 x 20 (de los márgenes) = 640 + 320 = 960 px

Conociendo las clases del Grid 960

Esta clase sirve para definir un contenedor, donde estará contenido todo nuestro diseño, es decir aquí decimos si trabajaremos con 12 o con 16 columnas. Las clases serán container_12 y container_16.

Class container_xx


La clase grid_xx define un elemento del diseño que será colocado en un contenedor. El valor “xx”, de grid_xx, expresa el tamaño de la rejilla que se está definiendo. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas, desde grid_1 hasta grid_12. En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.

Class grid_xx


Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los márgenes de los distintos elementos anidados. Como sabemos, todas las columnas tienen un margen de 10px a la izquierda y 10 pixel a la derecha.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.

Class alpha y class omega


Class alpha y class omega

Ejemplo de código utilizando las clases alpha y omega.


Esta clase nos sirve para dejar espacios vacíos a la izquierda de las columnas. Por ejemplo, si quiero comenzar el diseño con grid_5 totalmente a la derecha, tendré que dejar un espacio vacío equivalente a un grid_7 (para este caso estamos trabajando con una configuración a 12 grid).

Class prefix_xx


Ejemplo de código del caso anterior.

Class prefix_xx


Class prefix_xx


De igual forma que prefix_xx, la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. Aquí un ejemplo:

Class suffix_xx

Class suffix_xx



Por ultimo tenemos esta clase, que tiene por función limpiar los saltos de línea para poder separar un contenido de otro.

Class clearfix_xx

¿Cómo empezar a utilizar el framework?

En primer lugar descargar de la web, http://960.gs/. Verás varias carpetas, la que nos interesa es la carpeta llamada code donde están los ficheros que nos interesan. Copia los archivos reset.css, text.css y 960.css. Después solamente tienes que enlazar las hojas de estilo a la pagina web dentro de <head>… </head> de la siguiente manera:

http://960.gs/

http://960.gs/

¿Cómo empezar a utilizar el framework?

Veamos que es cada fichero: reset.css: para resetar todos los estilos. Fichero opcional

pero recomendable. text.css: para dar formato a los textos que utilices en tu

web. Fichero opcional. 960.css: donde tenemos nuestras columnas

(Obligatorio).

Ahora estamos listos!!Para empezar a maquetar!!

Ejemplo:

Pasos para el desarrollo de la web

Primero crearemos un documento html el cual nombraremos index.html que estará guardada dentro de la carpeta www.

Dentro de la carpeta www, crearemos las carpetas css y img para las respectivas hojas de estilos y las imágenes.


Dentro de la carpeta css copiaremos las hojas de estilos correspondientes para poder ser uso del framework (reset.css, text.css y 960.css).


Ahora desarrollaremos cada parte de la web paso a paso, pero antes de empezar dentro de la carpeta css crearemos una hoja de estilo llamado Estilos.css, en el cual pondremos nuestros estilos para darle forma a la pagina web.


No olvidar de vincular las hojas de estilo (css) en la cabecera del documento html, para que podamos ser uso del framework como de los estilos creados en el documento Estilos.css.


La pagina la desarrollaremos con la configuración a 12 columnas (container_12).

Ahora Estructuremos cada una de las partes de la web, la cual estará formada por una cabecera (header), menú (nav), cuerpo y el pie de página (footer).


Cabecera (header)


Cabecera (header): Código html


Cabecera (header): Estilos.css

Para originar bordes redondeados


Menú (nav)


Menú (nav): Código html


Menú (nav): Estilos.css


Cuerpo : Sección 01, uso de las clases alpha y omega


Cuerpo : Estilo.css


Cuerpo : Sección 02, uso de prefix


Cuerpo : Sección 02, uso de suffix


Pie de pagina (fotter)


Pie de pagina (footer): código html


Pie de pagina (footer): Estilos.css

Ejercicio 1:

Utilizando el ejemplo anterior ahora debe usted utilizar las nuevas etiquetas que nos ofrece HTML5 semantic y estructurar la nueva página utilizando el Framework estudiado (Grid Sytem 960).

960 Grid System

Documents

Transcript of 960 Grid System