Web design: Grid based layout

960_grid_12_col

El diseño de rejilla es una técnica muy utilizada en sitios web de noticias hace tiempo, consiste en dividir la pantalla en un cuadrículas para situar los contenidos en ellas. Gracias a este sistema todos los elementos quedan alineados y guardan armonía entre si.

Usar algún framework reduce el tiempo de desarrollo ya que ya tenemos la configuración básica de la pantalla en un CSS y sólo debemos colocar los elementos dentro los huecos de la rejilla,  permite un prototipado rápido en la fase inicial, pero esto sólo es el principio, debemos estilar normalmente los elementos dentro de la rejilla.

Framework: 960 Grid System

Ver demo nº 1

Ver demo nº 2

Untitled

La rejilla del ejemplo la hemos definido de 12 columna, cada una es es de 60 pixels de ancho cada una. Cada columna tiene 10 px de margen a izquierda y derecha, creando 20px de separación entre columnas (Sí utilizo 16 columnas, el ancho de cada una será de 40px).

Lo primero que debemos hacer es referenciar desde nuestro HTML a los CSS del framework:

		<link href="css/reset.css" rel="stylesheet" media="all" type="text/css" />
		<link href="css/text.css" rel="stylesheet" media="all" type="text/css" />
		<link href="css/960.css" rel="stylesheet" media="all" type="text/css" />

Para comenzar a maquetar una página mediante este sistema primero tendremos que crear un contenedor y  indicarle el número de columnas que vamos a usar.

<div class="container_12">

Y a cada elemento habrá que indicarle el ancho de columnas que usa:

<div class="grid_2">

indica que ocupa 2 columnas de las 12.

Cuando hemos ocupado una linea:

<div class="clear">

Esto se debe a que cada columna está con un float:left

Además disponemos de otro tipo de clases como son el prefix o sufix que nos permitirán tener  espacios en blanco o los típicos espacios, con prefix daremos márgenes o espacios a la izquierda de  los elementos y con el sufix daremos espacios a la izquierda de los elementos.

Si una cuadricula a su vez contiene otra rejilla, la primera cuadricula hija debe tener la clase alpha y la ultima cuadricula debe llevar la clase omega.

<div id="container" class="container_12">
    <div id="header" class="grid_12">
        <div id="logo" class="grid_2 alpha">Logo</div>
        <div id="subHeader" class="grid_12 omega">
            <div id="tagline" class="grid_4 alpha"><h1>Cerberus: Strength for Humanity</h1></div>
            <div class="grid_8 omega">Navigation</div>
        </div>
    </div>
    ....
</div>
Anuncios

Un pensamiento en “Web design: Grid based layout

  1. Pingback: Pure de Yahoo: Módulos CSS adaptativos para usar en nuestros proyectos | Internet y GNU/Linux

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s