960 grid system, un framework para css – parte 3

25Feb10

Continuando con nuestro trabajo con las grillas, dijimos que una vez descargado el archivo “nathansmith….zip”, tenemos que descomprimirlo en la carpeta raiz de nuestro sitio. Una vez hecho esto, vamos a tener una carpeta de nombre “nathansmith….”. Dentro de esta carpeta, tenemos otra de nombre “code”. Y a su vez dentro de esta última, tenemos otra de nombre “css”. Esta es la carpeta que nos interesa. Podemos íncluso borrar todos los demás  archivos y carpetas y sólo dejar esta única carpeta. Para el caso de este tutorial, vamos a trabajar sólo con la carpeta “css”.

Bueno, vamos a suponer ahora un archivo “index.html” con el siguiente código:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>gaparac4</title>

<link href=”css/reset.css” rel=”stylesheet” type=”text/css” />

<link href=”css/text.css” rel=”stylesheet” type=”text/css” />

<link href=”css/960.css” rel=”stylesheet” type=”text/css” />

<link href=”css/estilos.css” rel=”stylesheet” type=”text/css” />

</head>

<body>

<div class=”container_12″ id=”container”>

<div class=”grid_7 prefix_1″>

<div class=”grid_2 alpha” id=”bloque”>

<p>grilla1</p>

</div>

<div class=”grid_3″ id=”bloque”>

<p>grilla2</p>

</div>

<div class=”grid_2 omega” id=”bloque”>

<p>grilla3</p>

</div>

</div>

<div class=”grid_3 suffix_1″ id=”bloque”>

<p>grilla4</p>

</div>

<div class=”clear”></div><!–después de cada renglón se agrega un “clear” para limpiar los float. –>

<div class=”grid_7″ id=”bloque”>

hola mundo

</div>

<div class=”grid_5″ id=”bloque”>

<p>grilla5</p>

</div>

<div class=”clear”></div><!–después de cada renglón se agrega un “clear” para limpiar los float. –>

</div>

</body>

</html>

Como podemos ver, en <head>, declaramos los enlaces a los archivos css:

<link href=”css/reset.css” rel=”stylesheet” type=”text/css” />
<link href=”css/text.css” rel=”stylesheet” type=”text/css” />
<link href=”css/960.css” rel=”stylesheet” type=”text/css” />
<link href=”css/estilos.css” rel=”stylesheet” type=”text/css” />

Notemos que como dije mas arriba, sólo trabajamos con la carpeta “css”.

Podemos ver que el framework trabaja con clases, esto es class=”container_12″, class=”grid_1″, etc. Es a través de los atributos “id” que podemos personalizar la apariencia de las etiquetas <div>, con colores, tipos de texto, etc. En éste ejemplo, para todas las etiquetas que escribamos, los estilos de las propiedades “id”, las colocamos en el archivo “estilos.css” para separar nuestro código del propio del framework y lograr así mayor claridad. La clase que contiene a todas las demás es class=”container_12″ y todas las restantes clases están agrupadas por lineas teniendo en cuenta que por renglón, las columnas suman 12. Al final de cada linea colocamos “<div class=”clear”></div>” para limpiar los float de la fila.

A modo de ejemplo, podemos mostrar el archivo “estilos.css”, que podría ser algo tan simple como lo siguiente:

body {
background-color: #333333;
}
#container {
background-color: #000000;
color: #FFFFFF;
}
#bloque {
background-color: #999999;
}

Ahora sólo queda adaptar este ejemplo a cada necesidad y trabajar sin preocuparnos por los hack de IE.


Anuncios


No Responses Yet to “960 grid system, un framework para css – parte 3”

  1. Dejar un comentario

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


A %d blogueros les gusta esto: