Creo que ya todo el que se haya internado en lo que es el diseño web básico debe haber leído algo sobre lo herético que puede llegar a ser el crear una malla, o grilla, usando <table> y partir de ahí el maqueteo del sitio. Aunque admito que lo usé alguna vez, puedo decir a mi favor que eso fue antes de saber CSS, tenía sólo una vaga referencia de lo que se podía hacer con eso, ¡ah!, también ocupaba <font> :D

Luego, al empezar a estudiar más HTML y CSS, empieza el adoctrinamiento donde te hacen partidario del odio al uso de tablas que, si bien facilitan el trabajo, actúan para lo que no fueron creadas. También se te instruye sobre usar las etiquetas para lo que son y no asignarles un uso alternativo. Acá se viene todo el discurso de crear un código limpio y ordenado, que, en caso de trabajar en equipo, le sea posible al otro entender lo que tú construiste, para esto te ayudas con comentarios, en HTML y en CSS. También pensando en que, si mucho tiempo después necesitas usar algo de ese código, sea entendible y no pierdas tiempo interpretándolo.

Y bueno, como alternativa al uso de tablas, están las grillas en CSS. Que pueden complicarte la vida si es que no entiendes suficiente sobre las hojas de estilo en cascada.

La Tarea

Quería hacer una página estática para zentaurus.org, intentando no meterle tablas al maqueteo. Aunque, por la idea inicial de usar los logos de redes sociales como links a mis cuentas, unas tablas me hubiesen simplificado todo muchísimo.

Tampoco podría haber confiado en “mis habilidades”, ya que mis conocimientos de CSS están un poco empolvados por la no-práctica.

Desorientado, llegó el momento de googlear, pensando en que google siempre tendrá las respuestas a todo.

Simple, grilla CSS

Por suerte, me encontré con Sîmple. Creada por Rodrigo García Rejas, esta grilla contiene los archivos necesarios para armar un proyecto HTML/CSS si es que necesitas una mano con el desarrollo del armado.

Además puede informarte leyendo su manual. Y ver ejemplos de lo que puedes llegar a hacer usando el código.

O sea, tienes los ejemplos y el inicio. Sólo debes saber manipular archivos .css y .html. Y, obviamente,  tener contenido para reemplazar el Lorem Ipsum con algo cuerdo e interesante, aunque esto último no es tan necesario.

Las Razones de su Creador

Las Grillas CSS (Framework CSS) son el mejor amigo del diseñador web después del CSS mismo. El único problema con ellas es que la mayoría son complejas y densas en estructura, con una curva de aprendizaje larga y algunas de ellas ofrecen soluciones que abusan de contenedores vacíos para mantener la estructura funcionando. Luego de estudiar y usar algunas, decidí crear Sîmple, mi propia Grilla CSS, adaptada a mis reales necesidades y bajo 3 condiciones básicas que definen su estructura y funcionamiento:

1. Economía de CSS/HTML
   
2. Escalable y Crossbrowser
3. Fácil de implementar y manipular

Como se especifica que esto está creado bajo licencia CC, me permití usarlo para el actual index de mi sitio. Además de prestar atención para ir asimilando de a poco ciertos parámetros y etiquetas, lo tomé como un ejemplo de organización y modelo del cómo se deberían hacer las cosas.

También es destacable el que sea producto nacional.