Deja de echarle la culpa al Internet Explorer y aprende como maquetar rápido y sin problemas de visualización en los diferentes navegadores. Salvo que escribas en CSS mejor que en español o te guste perder el tiempo, esto es para ti. 960.gs es un sistema de rejilla ligero, flexible, potente y sencillo de usar que facilita y agiliza la maquetación.

Autor:

¡Hola! Soy Miguel Santirso y me encanta La Web. Aunque en realidad no sé mucho de esto, tengo algún proyecto funcionando por ahí o en proceso: The Source Cookbook es como un libro de recetas en el que puedes publicar y organizar trozos útiles de código y ululand es un portal de videojuegos en el que se guardan las puntuaciones y otras cosas, para que puedas competir con tus amigos o con tus enemigos.
Descarga Demostración

Introducción

Yo voy a hablarte de algo sencillo. Algo tan fácil que hasta los más novatos lo podrán utilizar, pero lo suficientemente desconocido como para que sorprenda y tan útil que seguramente lo usarás en algún proyecto.

¿Qué es un grid system (sistema de rejilla)?

Puede sonar complicado, pero un grid system no es más que un archivo CSS que define una serie de estilos que te ayudan a organizar el contenido de tu página web. Puedes pensar en ello como en una plantilla o una hoja cuadriculada.

Rejilla de 960.gs superpuesta sobre woothemes.com

En la captura de arriba, puedes ver como woothemes.com ha usado el 960 Grid System de forma que todos los elementos encajan en la rejilla.

¿Cómo se usa?

Es muy fácil. Lo primero que tienes que hacer es descargarte el archivo .css que contendrá los estilos que conforman el sistema de rejilla. Para obtenerlo tienes dos opciones:

  • 1. Puedes crear una versión personalizada desde esta página: Variable Grid System. Lo bueno de este método es que puedes ajustar la rejilla a lo que más te interese. Yo recomiendo usar este método y, a juzgar por el enorme enlace que han puesto en su página principal, los creadores del 960 GS también.
  • 2. Puedes descargar la versión “oficial” desde su repositorio. Al mismo tiempo obtendrás algunos ejemplos y documentación, pero no tendrás la flexibilidad que ofrecía el sitio anterior.

Variable Grid System

Para este ejemplo he optado por una rejilla de doce columnas de 50 píxeles de ancho y una separación de treinta píxeles entre cada una. Una vez configurado y descargado, copia el archivo grid.css a la carpeta donde estés trabajando. Después, pon en esa misma carpeta los archivos HTML y CSS iniciales con el siguiente contenido:

main.css:

body, html { background-color: #fffff4; color: #333; font-family: Georgia, Times New Roman, Serif; }
 
h1 { display: none; }
 
h2 { font-weight: normal; font-size: xx-large; }
 
a { color: #0ad2b9; }
a:hover { color: #2d695f; }
 
/* teaser and hello texts at index */
 
.hello { font-size: 90px; margin: 30px 0; }
 
.teaser { font-size: 45px; margin: 10px 0; line-height: 125%; }
.teaser a { color: #0ad2b9; text-decoration: none; }
.teaser a:hover { background-color: white; }
 
/* facebook badge */
 
.facebook_badge { margin-top: 25px; text-align: center; }
 
/* long texts */
 
.long_text { text-align: justify; }

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>

        <title>Introducción a 960.grid</title>

        <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen" charset="utf-8" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    </head>

    <body>

        <h1 class="heading">El blog personal de Miguel Santirso</h1>

        <div class="container_12">

            <div class="grid_10 push_2">
                <p class="heading hello">Hello!</p>
                <p class="heading teaser">I am <a href="http://miguelsantirso.es/">Miguel Santirso</a> and this is a test using the <a href="http://960.gs">960 Grid System</a>:</p>
            </div>

            <div class="grid_2 pull_10">
                <div class="facebook_badge">
                    <!-- Facebook Badge START --><a href="http://www.facebook.es/miguel.santirso" title="Miguel Santirso González" target="_TOP"><img src="http://badge.facebook.com/badge/718517613.289.164519491.png" width="120" height="247" style="border: 0px;" /></a><!-- Facebook Badge END -->
                </div>
            </div>

            <div class="grid_10 prefix_2">
                <h2>Some projects I am working on:</h2>
            </div>

            <div class="grid_5 prefix_2">
                <h3>The Source Cookbook</h3>

                <p class="long_text"><a href="http://sourcecookbook.com/">The Source Cookbook</a> is a place to show and keep your source code snippets. The recipes can be embedded everywhere and are beautifully highlighted for every language.</p>
            </div>

            <div class="grid_5">
                <h3>ululand.com - Play Better</h3>

                <p class="long_text"><a href="http://ululand.com/">ululand</a> is a better flash games portal. At ululand you can play the same great flash games, only better: Save your scores, create competitions and much more.</p>
            </div>

        </div>

    </body>
</html>

Y así es como debería quedar antes de usar la rejilla para darle estructura al contenido:

Aspecto de la página de ejemplo antes de aplicar la rejilla

Ahora que tenemos algo de contenido de ejemplo, podemos empezar a usar la rejilla para conseguir una buena estructura casi sin esfuerzo.

Vamos a empezar con la parte de arriba de la página. Quiero colocar la “insignia” de Facebook en la parte superior izquierda de la página, justo a la izquierda del saludo. Para conseguirlo, basta con aplicar unos pocos estilos del sistema de rejilla:

<div class="container_12">  
	<div class="grid_10 push_2">  
		<p class="heading hello">Hello!</p>  
		<p class="heading teaser">I am <a href="http://miguelsantirso.es/">Miguel Santirso</a> and this is a test using the <a href="http://960.gs">960 Grid System</a>:</p>  
	</div>  
	<div class="grid_2 pull_10">  
		<div class="facebook_badge">  
			<!-- Facebook Badge START --><a href="http://www.facebook.es/miguel.santirso" title="Miguel Santirso González" target="_TOP"><img src="http://badge.facebook.com/badge/718517613.289.164519491.png" width="120" height="247" style="border: 0px;" /></a><!-- Facebook Badge END -->  
		</div>  
	</div>
</div>

La clase container_12 activa los estilos de rejilla en todos los elementos contenidos dentro de ese div.

grid_10 significa que un div debería tener 10 columnas de ancho y grid_2 significa 2 columnas de ancho. En general, puedes usar desde grid_1 hasta grid_12 para establecer los anchos de los elementos de la página.

push_2 “empuja” un elemento dos columnas a la derecha y pull_10 “tira” de un elemento 10 columnas a la izquierda.

Fíjate en que si quieres usar todo el ancho de una página, todos los divs dentro de un container_12 deberían sumar un total de 12 columnas.

Deberías tener algo como esto:

Aspecto de la página de ejemplo tras colocar los elementos de la parte superior

Ahora, solo quedaría usar la misma técnica para dar estilos al resto de la página:

<div class="grid_10 prefix_2">
	<h2>Some projects I am working on:</h2>
</div>

<div class="grid_5 prefix_2">
	<h3>The Source Cookbook</h3>
	<p class="long_text"><a href="http://sourcecookbook.com/">The Source Cookbook</a> is a place to show and keep your source code snippets. The recipes can be embedded everywhere and are beautifully highlighted for every language.</p>
</div>  

<div class="grid_5">
	<h3>ululand.com - Play Better</h3>
	<p class="long_text"><a href="http://ululand.com/">ululand</a> is a better flash games portal. At ululand you can play the same great flash games, only better: Save your scores, create competitions and much more.</p>
</div>

Y este es el resultado final:

Resultado final del ejemplo

Reflexión final

Como conclusión, me gustaría recalcar que el sistema de rejilla 960.gs es una forma fácil, sencilla y potente de organizar el contenido de tus sitios si no quieres perder demasiado tiempo o si no tienes mucha experiencia con CSS.

¡Por cierto! No sé si a alguien le podrá resultar útil, pero este mismo tutorial está publicado, pero en inglés, en The Source Cookbook: Introduction to 960 Grid System.

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (8 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Escueto pero realmente útil. Le echaré un vistazo cuando necesite hacer alguna web “express”.

Gracias por el tutorial!

Yo suelo usar BluePrint y la verdad es que es bastante práctico, aunque muchas veces no lo necesito porque ya le conozco las mañas a IE y hago el codigo justo que necesito.

Genial! No conocía este sistema, y la verdad la cross-compatibilidad es un dolor de cabeza…lo usaremos la próxima vez que toque maquetar algo de cero.

Había leído algo hace poco pero no me aclaraba…pero según lo explicas parece facilísimo!
Habrá que probar…
Gracias!

Yo también suelo usar blueprint pero ya que habéis publicado sobre el 960 le echare un ojo que ya me lo habían recomendado.

Creo que el primer index.html ya le tienes tageado y no es el inicial tal como explicas en la versión de sourcecookbook. Pequeña errata para un buen artículo.

Buen trabajo. Un saludo.

Vaya, luego de leer el tutorial me dí cuenta que al parecer hablo mejor css que el español xD

Personalmente veo más complicado hacerlo mediante éste sistema que handcoded.

Gracias por el artículo ^^