A esta altura no es ninguna novedad y no se necesitan muchas explicaciones sobre que es una grilla CSS y para qué sirven. Básicamente se trata de automatizar el proceso de la construcción de la estructura de cualquier sitio armado con CSS/html (2 columnas, 3 columnas, blogs, diarios, etc.) definiendo ésta estructura en base a una grilla que determina columnas y separación entre ellas con simetría y balance.

He probado varios de los sistemas de grilla CSS existentes (960 Grid System, Blueprint, Origo, Yaml, YUI Yahoo Grid CSS) pero siempre terminaba con el mismo problema: no se adaptaban a mis necesidades y forma de trabajo como diseñador. Esto no es un problema de los sistemas existentes ya que cada uno de ellos está pensado en base a principios, metodologías de trabajo y tipos de proyectos distintos, el problemas es que esos principios, metodologías y tipos de proyectos no son los mios.

Hace casi un año que vengo trabajando con mi propio sistema, una especie de grilla Frankestein, hija de todos los sistemas pero pensada en mi propia definición de lo que debe ser una grilla CSS: “Una Grilla CSS debe ser fácil de entender, usar y modificar, económica en el uso del código y flexible para adaptarse a la mayor cantidad de necesidades de diagramación”.

Así que tomé lo que tenía y le puse nombre: Simple.

• Ver demo Simple
• Ir a Simple: Repositorio para todo lo relacionado con Simple.
• Descargar Simple
• Descargar Simple + Manual + Ejemplos

Principios sobre los que se construyó Simple

• Economía de código: lograr construir estructuras con la menor cantidad de código CSS/html posible.
• Economía de tiempo: todos los proyectos web tienen el mismo requerimiento base: buen despliegue en todos (los más usados) browsers. ¿Si esto se hizo una vez, porqué hacerlo de cero cada vez?.
• Si existe, se usa: nada de contenedores vacíos con un class “clear” para separar secciones.
• No emular el comportamiento de tablas: hacerlo exige más código.
• Solución crossbrowser: mientras sea factible y conveniente.Si todos los navagadores son distintos e interpretan de distinta manera los estándares (por definición un estándar es un modelo, norma o patrón acordado y único), porqué debemos nosotros esforzárnos para lograr que los sitios se desplieguen idénticamente en todos ellos. Nuestro esfuerzo debe estar enfocado en seguir el estándar y ampliar su uso, buscando la consistencia, no la igualdad del despliegue de los sitios en la web. Simple mantiene su estructura y consistencia en Firefox (Windows, Mac, Linux) | Explorer 7, 6 y 5.5 (Windows) | Opera (Windows, Linux) | Chrome (Windows) | Safari (Windows, Mac).
• Fácil de usar modificar: cambiar diagramaciones, modificarlas, subdividirlas. Todo debe ser fácil de hacer y la curva de aprendizaje debe ser mínima con buenos conocimientos de CSS/html.
• … Y en español: es innegable que hay que saber inglés, todos los días leo información global en ese idioma, pero también creo que lo global debe ser a partir de lo local y acá hablamos y pensamos en español así que pensé ¿porqué no consturirSimple en español?. Quizá haga una traducción al inglés más adelante si es necesario hacerlo, pero la intención con Simple no es ambiciosa, es sólo colaborativa, y bajo esa premisa es mejor tratar de colaborar primero con los cercanos que con todo el mundo.

¿Cómo funciona Simple?

Es mejor ver el manual que explica su funcionamiento, los principios que lo sustentan y algunos ejemplos básicos de diagramaciones de 2 columnas, 3 columnas, blogs y diarios. Este manual es pequeño y contiene todo lo necesario para entender cómo funciona Simple.

Aquí dejo una explicación base, extraída del manual, de cómo funciona:
“Basado en 3 elementos clave: contenedor, caja y columa. El elemento “contenedor” (id) encierra todo y define el ancho del sitio, “caja” (clase) es el contenedor universal para definir las áreas o secciones de un sitio; y el ancho y ubicación de estas mismas se mide y determina en columnas llamadas “colX”, desde “col1″ a “col12″.”

En este manual hay ejemplos de cómo con Simple es posible levantar cualquier tipo de estructura que se requiera, desde las básicas de 2 y 3 columnas hasta estructuras de blogs o sitios de noticias.

Lor archivos css son:

• estilos.css: a través de la regla @import incluye todos los estilos necesarios. Cualquiér nueva hoja de estilo debe ser agregada o eliminada desde aquí.
• grilla.css: es el corazón de Simple. Acá se controla la estructura, el ancho del sitio, la cantidad de columnas, medida y separación entre ellas. Modificar sólo si tienen los conocimientos de CSS/html para hacerlo.
• reset.css: los navegadores viene con propiedades CSS predefinidas y reset.css hace consistente entre el cómo se ven los elementos html en distintos navegadores. Basado en el css reset de Blueprint pero con mis propias modificaciones y adaptaciones. /li>
• visual.css: todo lo que involucre definiciones estéticas debe estar aquí. Viene con algunas definiciones básicas para algunos elementos pero pueden ser eliminadas.

Agradecimientos

Me sirvió mucho la experiencia de un buen amigo y diseñador gráfico como yo, Quiltro (Claudio Olivares) que al parecer también por similares razones a las mías, también construyó su propia grilla, llamada Origo (Orígen) y es una excelente herramienta. La usé por bastante tiempo y es agradable ver que el principio de la simpleza siempre ayuda a hacer un mejor trabajo. El uso de Origo y las largas conversaciones al respecto me ayudaron a tomar ese código que no tenía cara ni nombre, pero que me ayudaba desde hace más de un año, y a estructurarlo como una herramienta que podría ser útil para otros. Y siguiendo el principio de “si vas a hacer algo, hazlo bien”, decidí hacer el manual de uso más algunos ejemplos.

Por supuesto que el trabajo puesto en los sistemas de grilla CSS existentes (960 Grid System, Blueprint, Origo, Yaml, YUI Yahoo Grid CSS son los que he usado) ha sido determinante para poder construir mi propio sistema que espero le pueda servir y facilitar el trabajo a alguien más ya que el objetivo de esto no es más que poder automatizar algunos pasos que nos permitan concentrar nuestro tiempo y esfuerzo en buscar las mejores soluciones que demanden nuestros proyectos y no en comprobar que nuestro sitios no “se caen” en algún mal browser.