• Ver Demo
• Bajar Origo CSS

Origo (origen, en latín) está basado en grillas. La clave está en las filas y columnas. Las columnas permiten ordenar elementos de forma horizonal. Las filas por su lado, permiten definir bloques de información en el eje vertical conteniendo grupos de columnas.

La unidad mínima de la grilla es de 60px y el ancho de cada columna es determinado por la cantidad de unidades utilizada. Por ejemplo, si quieres que una columna que ocupe 4 unidades de grilla, es cosa de aplicarle la clase “cuatro” y con eso automáticamente tomará una medida de 300px de ancho (cuatro unidades de columna equivalentes a 240px, más 60px de espacio entre ellas).

Todo el sistema trabaja basado en al suma de clases al elemento <div>. Una fila entonces contendrá cuatro columnas, cada una con la clase “cuatro” (cosa que mida 300px de ancho cada una). Como la última columna no requiere distanciarse de nadie a su derecha, se le asignará la clase “última” para que quede perfectamente alineada al borde derecho de la caja contenedora. Para mas claridad expongo el siguiente ejemplo:

<div class="fila">
 <div class="columna cuatro">
  <p>Algo de texto...</p>
 </div>
 <div class="columna cuatro">
  <p>Algo de texto...</p>
 </div>
 <div class="columna cuatro">
  <p>Algo de texto...</p>
 </div>
 <div class="columna cuatro ultima">
  <p>Algo de texto...</p>
 </div>
</div>

En total son 12 unidades que utilizan un área de 940px (12 x 60px=720px más 220px de espacio entre ellas). Al ser 12 un múltiplo de 4 y 3, permite varias combinaciones de columnas.

Origo utiliza como pieza fundamental el CSS Reset (que está en el archivo neutra.css) creado por Eric Meyer, que permite eliminar los valores de despliegue por defecto que tienen los distintos browsers a fin de evitar una buena cantidad de inconsistencias. Además te “obliga” a definir el modo de despliegue de todos los elementos html.

Lo probé en Opera, Firefox, IE 5.5+ bajo windows. Además obtuve impresiones de pantalla mediante el servicio BrowserShots y los resultados obtenidos fueron muy satisfactorios ya que no presentaron colapsos de estructura en ningún sistema operativo ni browser moderno.

Te invito a estudiar Origo CSS y si tienes aportes que permitan ejecutar mejoras, déjalos en los comentarios .

Bajar Origo CSS.

Con los avances que ha tenido el diseño web y la tecnología, este elemento ha ido cobrando protagonismo. Durante los 90 y comienzos del 2000 era muy extraño que se le dedicara tiempo en el diseño, generalmente se le desconocía al mismo tiempo que se desconocía la ventana del browser, los diseños se encerraban en elementos contenedores que funcionaban como cajas y se integraban muy poco al fondo. En el ejemplo es posible ver un fondo sin atención gráfica que poco y nada ayuda a tener un despliegue de contenidos rico y agradable.

La variedad de resoluciones de pantalla que es posible acceder hoy y la entrada de la poderosa mezcla de CSS con HTML ha permitido sacarle mas partido a este elemento y reconocer la ventana del browser como un área util que permita dar aire y respiro al usuario al ver los contenidos, dejándolos mas libres. Otra cosa muy importante es entender que le podemos sacar mucho partido al body cuando lo utilizamos gráfcamente para trabajar el ambiente, la onda, la ilumnación de un diseño.

Porque es importante que dediquemos tiempo a pensar los fondos:

• Nos permiten definir parte importante de los aspectos sensoriales de un diseño
• Permite establecer una iluminacion general
• Determina rápidamente la atmósfera que estará presente en el sitio
• Es un área que podemos utilizar para desplegar contenido, no hay que tenerle miedo

Creo que es posible sacarle mucho partido al lienzo del sitio a diseñar. Personalmente me gusta partir un diseño la base general como la buena masa de una pizza, el fondo. Sobre este buen fondo se me hace más fácil colocar los elementos de contenido y es más fácil poner atención y dedicación al diseño orientado al contenido. Es como pensar los ingredientes de la pizza. No es llegar y mezclar las cosas, debemos saber muy bien que colocar y para lograr buenos resultados debemos pensar primordiamente en el contenido, como cuando pensamos en el sabor final de nuestra pizza.

A continuación dejo un par de ejemplos de sitios que admiro por su buen diseño. El primero es el de Veerle Pieters (con excelentes contenidos también) donde utiliza una caja para enmarcar el contenido principal del sitio y el body (lienzo) para el despliegue de contenidos complementarios. Es interesante el uso que da al eje z para levantar el área principal.

Y este, perteneciente al diseñador portugués Filipe Varela. Podemos ver como sin miedo lanza todo el contenido libre, sin marcos o fronteras mas que la sugerida por la alineación. ¿Que sería de este simple diseño sin su fondo?

Espero que estas pistas y esta reflexión te sean tan útiles como me fueron a mi.