Recomendaciones a la hora de diseñar con el framework CSS Blueprint

Ya llevamos unos cuantos artículos sobre el framework CSS Blueprint, que hemos ido publicando en un Manual de Blueprint. Hemos podido conocer la rejilla para posicionamiento de elementos en la página y hemos visto un par de ejemplos interesantes de páginas maquetadas con Blueprint.

Ahora vamos a hacer una pequeña aportación en forma de consejos útiles para trabajar con el framework CSS, sacarle mayor partido y evitar problemas de diseño.

Aplica estilos en tu propia hoja de estilos

Puede ser una buena idea que mantengas los CSS del framework inalterados y los estilos que quieras añadir a tu proyecto los indiques en hojas de estilo propias, que crees en archivos aparte de los del framework. Ayudará a mantener tus archivos de estilo más reducidos y no mezclar tus especificaciones con las de Blueprint.

Diseña con la plantilla de 24 columnas

El primer paso para la concepción creativa de una web es el diseño en un programa de edición gráfica como Photoshop. En el archivo de descarga de Blueprint tenemos un PSD (archivo de photoshop) con una serie de divisiones en columnas y guías para ajustarnos a ellas. Ese archivo sirve de plantilla vacía con la que generar nuestro propio diseño, que se ajuste a los espacios disponibles en Blueprint.

El archivo de Photoshop viene con una capa oculta que contiene un ejemplo de diseño de sitio web, basándose en los espacios disponibles en Blueprint. Podemos buscar esa capa en la ventana de capas, cuyo nombre es "sample site".

Recomendación para aplicar estilos adicionales a los contenedores

Como se puede ver, en el ejemplo del artículo anterior ya hemos colocado algunos estilos en los contenedores de la página, como colores de fondo y hasta algún estilo de tipografía. Aun sin mucha experiencia en el Framework Blueprint podría dar un par de recomendaciones:

Aplicar estilos en contenedores distintos de los span-x:
Para aplicar estilos a los contenidos de cada uno de los contenedores que colocamos en la rejilla, merece más la pena colocar dentro del DIV "span-x" otro segundo DIV al que podremos darle estilos. Si aplicamos CSS directamente sobre los "span-x" podemos estar machacando los estilos creados por el propio framework. Por ejemplo:

<div class="span-2">
   <div id="cuerpoizq">
      Aqui estoy en las dos primeras columnas de la parte de abajo del cuerpo...
   </div>
</div>

Has visto que el DIV contenedor "span-2" no tiene más estilos que los proporcionados por esa clase "span-2". Luego hemos colocado dentro otro DIV y a éste es al que le asignamos estilos particulares de nuestro sitio.

Utilizar la clase "box" para conseguir un padding:
En Blueprint hay una clase pensada para que las cajas tengan padding, llamada "box". Esa clase provee un comportamiento por defecto para los contenedores, que incluye un padding entre otras cosas. Mi recomendación, igual que en el punto anterior, sería utilizar esa clase también sobre un DIV que anidamos dentro del contenedor "span-x":

<div class="span-4">
   <div class="box">
      Contenido que ya tiene un padding
   </div>
</div>

Nosotros podríamos incluso cambiar los estilos de la clase "box" si es que no se ajustan al modelo de caja que deseamos tener en nuestro sitio web.

Usando tipografías

Tipografías por defecto:
Al usar las etiquetas estándar del HTML tenemos la ventaja de que éstas están formateadas por el framework CSS y por lo que respecta a la tipografía, ya están previamente configuradas. No obstante, podríamos necesitar cambiar alguna tipografía y esto se puede hacer en nuestra propia hoja de estilo o editando el archivo del framework screen.css, en la sección que está marcada con el comentario /* typography.css */. Aunque no sea muy recomendable cambiar el código fuente del framework, para pequeñas ediciones como la tipografía por defecto no veo problema en tocarla directamente en el código de Blueprint.

Usar medidas em para tamaños del texto:
Las medidas CSS relativas son mucho más adecuadas, como las que obtenemos con las unidades px o em. Lo más recomendable cuando queramos cambiar el tamaño de los textos es asignarlos con la unidad em, que está explicada, junto con sus ventajas, en el artículo Tamaños de texto con CSS: buenas prácticas.

En general, todas las prácticas recomendables para CSS también se pueden aplicar a nuestro trabajo con el framework. Después de varias prácticas seguro que irás creando un esquema de trabajo que se adapte bien a tus costumbres y conocimientos.