960 Grid System

Que es 960 Grid System?
960 Grid System es un framework CSS, es una declaracin de estilos que dispone las clases necesarias para implementar columnas en una pgina web, de diversos tamaos, con las que maquetar contenidos de una forma fcil y ordenada. Se basa en un diseo 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 rpida.
Descripcin 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 separacin 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

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

16 columnas: 16 x 40 + 16 x 20 (de los mrgenes) = 640 + 320 = 960 px
Conociendo las clases del Grid 960

Class container_xx
Esta clase sirve para definir un contenedor, donde estar contenido todo nuestro diseo, es decir aqu decimos si trabajaremos con 12 o con 16 columnas. Las clases sern container_12 y container_16.

Class grid_xx
La clase grid_xx define un elemento del diseo que ser colocado en un contenedor. El valor xx, de grid_xx, expresa el tamao de la rejilla que se est definiendo. En los diseos con el container_12 se tienen doce columnas y con grid_xx conseguiremos tambin doce distintos anchos de columnas, desde grid_1 hasta grid_12. En el caso del container_16 tendramos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.

Class alpha y class omega
Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los mrgenes 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 pxeles a la izquierda y la clase omega para eliminar el margen de 10 pxel de la derecha.

Class alpha y class omega
Ejemplo de cdigo utilizando las clases alpha y omega.

Class prefix_xx
Esta clase nos sirve para dejar espacios vacos a la izquierda de las columnas. Por ejemplo, si quiero comenzar el diseo con grid_5 totalmente a la derecha, tendr que dejar un espacio vaco equivalente a un grid_7 (para este caso estamos trabajando con una configuracin a 12 grid).

Class prefix_xx
Ejemplo de cdigo del caso anterior.

Class prefix_xx

Class suffix_xx
De igual forma que prefix_xx, la clase sufix_xx sirve para colocar un espacio vaco a la derecha de la capa. Aqu un ejemplo:

Class suffix_xx

Class clearfix_xx
Por ultimo tenemos esta clase, que tiene por funcin limpiar los saltos de lnea para poder separar un contenido de otro.
Cmo empezar a utilizar el framework?

En primer lugar descargar de la web, http://960.gs/. Vers varias carpetas, la que nos interesa es la carpeta llamada code donde estn los ficheros que nos interesan. Copia los archivos reset.css, text.css y 960.css. Despus solamente tienes que enlazar las hojas de estilo a la pagina web dentro de <head> </head> de la siguiente manera:
Cmo 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).
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 imgenes.

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 configuracin 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 pgina (footer).

Cabecera (header)

Cabecera (header): Cdigo html

Cabecera (header): Estilos.css
Para originar bordes redondeados

Men (nav)

Men (nav): Cdigo html

Men (nav): Estilos.css

Cuerpo : Seccin 01, uso de las clases alpha y omega

Cuerpo : Seccin 01, uso de las clases alpha y omega

Cuerpo : Estilo.css

Cuerpo : Seccin 02, uso de prefix

Cuerpo : Seccin 02, uso de prefix

Cuerpo : Seccin 02, uso de suffix

Cuerpo : Seccin 02, uso de suffix

Pie de pagina (fotter)

Pie de pagina (footer): cdigo 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 pgina utilizando el Framework estudiado (Grid Sytem 960).

960 Grid System

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

960 Grid System

Hochgeladen von

Copyright:

Verfügbare Formate

Que es 960 Grid System?

Descripcin del Grid 960

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

Descripcin del Grid 960

Descripcin del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Conociendo las clases del Grid 960

Cmo empezar a utilizar el framework?

Cmo empezar a utilizar el framework?

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Pasos para el desarrollo de la web

Das könnte Ihnen auch gefallen