960 Grid System

Que es 960 Grid System?
960 Grid Systemes unframework 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.

Grid 960
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.

Grid 960
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.

Grid 960
Class alpha y class omega
Ejemplo de cdigo utilizando las clases alpha y

omega.

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

Grid 960
Class prefix_xx
Ejemplo de cdigo del caso anterior.

Grid 960
Class prefix_xx

Grid 960
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:

Grid 960
Class suffix_xx

Grid 960
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).
Ahora estamos
listos!!
Para empezar a
maquetar!!
Ejempl
o:
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.

de la web
Dentro de la carpeta css copiaremos las

hojas de estilos correspondientes para poder
ser uso del framework (reset.css, text.css y
960.css).

de la web
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.

de la 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.

de la web
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).

de
la
web
Cabecera (header)

de
la
web
Cabecera (header): Cdigo html

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

de
la
web
Men (nav)

de
la
web
Men (nav): Cdigo html

de
la
web
Men (nav): Estilos.css

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

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

de
la
web
Cuerpo : Estilo.css

de
la
web
Cuerpo : Seccin 02, uso de prefix

de
la
web
Cuerpo : Seccin 02, uso de prefix

de
la
web
Cuerpo : Seccin 02, uso de suffix

de
la
web
Cuerpo : Seccin 02, uso de suffix

de
la
web
Pie de pagina (fotter)

de
la
web
Pie de pagina (footer): cdigo html

de
la
web
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

Cargado por

Copyright:

Formatos disponibles

960 Grid System

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

960 Grid System

Cargado por

Copyright:

Formatos disponibles

Que es 960 Grid System?

960 Grid Systemes unframework CSS, es

Descripcin del Grid 960

Descripcin del Grid 960

Descripcin del Grid 960

Conociendo las clases del

Esta clase sirve para definir un contenedor,

Conociendo las clases del

La clase grid_xx define un elemento del diseo

Conociendo las clases del

Class alpha y class omega

Estas dos clases sirven cuando estamos

Conociendo las clases del

Class alpha y class omega

Ejemplo de cdigo utilizando las clases alpha y

Conociendo las clases del

Conociendo las clases del

Ejemplo de cdigo del caso anterior.

Conociendo las clases del

Conociendo las clases del

De igual forma que prefix_xx, la clase sufix_xx

Conociendo las clases del

Conociendo las clases del

Por ultimo tenemos esta clase, que tiene por

Cmo empezar a utilizar el

En primer lugar descargar de la web,

Cmo empezar a utilizar el

Veamos que es cada fichero:

Pasos para el desarrollo

Primero crearemos un documento html el

Pasos para el desarrollo

Dentro de la carpeta css copiaremos las

Pasos para el desarrollo

Ahora desarrollaremos cada parte de la web

Pasos para el desarrollo

No olvidar de vincular las hojas de estilo

Pasos para el desarrollo

La pagina la desarrollaremos con la

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

Pasos para el desarrollo

También podría gustarte