960 Grid System
-
Upload
jesus-miguel-moreno-plasencia -
Category
Documents
-
view
62 -
download
0
Transcript of 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
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
Conociendo las clases del Grid 960
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
Conociendo las clases del Grid 960
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
Conociendo las clases del Grid 960
Class alpha y class omega
Ejemplo de código utilizando las clases alpha y omega.
Conociendo las clases del Grid 960
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
Conociendo las clases del Grid 960
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
Conociendo las clases del Grid 960
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:
¿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).
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.
Pasos para el desarrollo 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).
Pasos para el desarrollo 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.
Pasos para el desarrollo 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.
Pasos para el desarrollo de la web
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).