960 grid system

43

Upload: jesus-miguel-moreno-plasencia

Post on 29-Nov-2015

62 views

Category:

Documents


0 download

TRANSCRIPT

¿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

Descripción del Grid 960

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

Descripción del Grid 960

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

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

Ejemplo de código del caso anterior.

Class prefix_xx

Conociendo las clases del Grid 960

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

Class suffix_xx

Conociendo las clases del Grid 960

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).

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.

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).

Pasos para el desarrollo de la web

Cabecera (header)

Pasos para el desarrollo de la web

Cabecera (header): Código html

Pasos para el desarrollo de la web

Cabecera (header): Estilos.css

Para originar bordes redondeados

Pasos para el desarrollo de la web

Menú (nav)

Pasos para el desarrollo de la web

Menú (nav): Código html

Pasos para el desarrollo de la web

Menú (nav): Estilos.css

Pasos para el desarrollo de la web

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

Pasos para el desarrollo de la web

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

Pasos para el desarrollo de la web

Cuerpo : Estilo.css

Pasos para el desarrollo de la web

Cuerpo : Sección 02, uso de prefix

Pasos para el desarrollo de la web

Cuerpo : Sección 02, uso de prefix

Pasos para el desarrollo de la web

Cuerpo : Sección 02, uso de suffix

Pasos para el desarrollo de la web

Cuerpo : Sección 02, uso de suffix

Pasos para el desarrollo de la web

Pie de pagina (fotter)

Pasos para el desarrollo de la web

Pie de pagina (footer): código html

Pasos para el desarrollo 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  página  utilizando  el  Framework estudiado (Grid Sytem 960).