Origo CSS

Origo CSS es una base estructural para el diseño de interfaces de usuario web desarrollada en CSS y HTML, que permite definir los cimientos para la organización y distribución de unidades de información. Origo permite en una etapa temprana del desarrollo de un sitio o aplicación web, definir maquetas de navegación que entreguen información relevante para poder afinar las decisiones vinculadas al despliegue de información, diseño e interacción. Posteriormente es posible anexar los elementos vinculados al diseño gráfico, colores, tipografías, sensaciones…

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