BeN

Cuando se comienza el diseño de un sitio nuevo, generalmente usamos algún software de diseño gráfico como Illustrator, Photoshop o — mi favorito — Fireworks. Sin embargo, una vez finalizado este proceso viene la parte de llevar este diseño, gráficos, colores, estilos, etc. a html.

En este proceso es cuando muchas veces nos encontramos ciertos problemas y más aún cuando esta dividido el equipo de diseño del de programación; todos sabemos que no es tarea fácil convertir un bonito diseño a una página web funcional con código claro, que cumpla los estándares actuales y que sea visible en todos los navegadores, si a eso agregamos versiones “print ready” y opciones de accesibilidad les aseguro que no será tarea fácil.

Es en este punto cuando un Css Framework es de utilidad y a mi modo de ver indispensable.

Un Css Framework, también conocido como Framework de diseño no es otra cosa que un archivo de hoja de estilos previamente listo que permite de manera fácil, cumpliendo estándares de diseño web, el diseño y maquetación de una página web. Esto lo hace previendo y corrigiendo incompatibilidades entre navegadores y teniendo toda una serie de opciones para que el diseño sea fácil y muy veloz.

Despues de probar las diferentes opciones que hay por ahí en Internet opte por usar Blueprint el cual es simple pero completo.

Por default Blueprint posee un Grid de 950px de ancho, con 24 comunas de 30px cada una de las cuales son llamadas span-1 de 30px, span-2 de 60px, span-3 de 90px así hasta span-24 de 950px. y un margen de 10px entre cada una, dándonos la posibilidad de hacer nuestras combinaciones de acuerdo a las necesidades que tengamos.

Su uso es simple ya que tiene nombres de clases predefinidas que hacen el trabajo y solo basta incluir los archivos Css en el encabezado de nuestro sitio, veamos unos ejemplos:

Una Sola columna, Header, Contenido y Pie

<div class="container"><!-- Container es una clase predefinida de blueprint dentro de la cual va toda la maquetacion, al igual que span-24  -->
 <div id="encabezado" class="span-24">
        Encabezado
    </div>
    <div id="contenido" class="span-24">
        Cuerpo
    </div>
    <div id="pie" class="span-24">
        Pie
    </div>
</div>

Pueden verlo funcionando aquí

2 columnas, Header, Menú, Contenido y Pie

<div class="container"><!-- Container es una clase predefinida de blueprint dentro de la cual va toda la maquetacion, al igual que span-24, span-4, span-20 y la clase last  -->
    <div id="encabezado" class="span-24">
        Encabezado
    </div>
    <div id="barra_izquierda" class="span-4">
    	Barra Izquierda
    </div>
    <div id="contenido" class="span-20 last">
        Cuerpo
    </div>
    <div id="pie" class="span-24">
        Pie
    </div>
</div>

Pueden verlo funcionando aquí

3 columnas, Header, Menú Izquierdo y Derecho, Contenido y Pie

<div class="container">
    <div id="encabezado" class="span-24">
        Encabezado
    </div>
    <div id="barra_izquierda" class="span-4">
        Barra Lado Izquierdo
    </div>
    <div id="contenido" class="span-16">
        Contenido
    </div>
    <div id="barra_derecha" class="span-4 last">
        Barra Lado Derecho
    </div>
    <div id="pie" class="span-24">
    	Pie de Pagina
    </div>
</div>

Pueden verlo funcionando aquí

Sin duda cualquier necesidad que se les presente de diseño podrán resolverla gracias a este framework css solo basta leer un poco la documentación y ver los ejemplos. Blueprint ya es un básico.