En esta iteración nos metemos en faena con el CSS. Nada complicado, sólo los primeros pasos para quitar esa falta de estilos tan fea que había hasta ahora y tener una base sobre la que comenzar a dar las pinceladas que conformarán el diseño final.

Si observáis la hoja de estilos para esta iteración veréis que apenas hay unas pocas reglas en las que aplico la tipografía, algunos colores y muy poca cosa más. Pero todo lo que he definido en la hoja de estilos tiene su por qué.

Tipografía

Una de las primeras cosas que me gusta definir cuando comienzo a maquetar un diseño es su tipografía. En mi trabajo diario no soy yo el que define el tipo a utilizar, de eso se encarga el diseñador, y yo lo único que tengo que hacer es seguir sus instrucciones. Pero en este caso es distinto, porque el diseñador soy yo.

Para Colores Efímeros he decidido que la tipo a utilizar sea la famosísima Helvética. Siempre me ha parecido muy precisa, muy cuidada y sobre todo muy legible, que es de lo que se trata. Así que en mi hoja de estilos definí la siguiente regla relativa a la tipografía para el body completo:

font: 10px/1.6 Helvetica, Arial, sans-serif;

Es probable que a muchos de vosotros os parezca chocante que use un tamaño en píxeles para el tipo, ya que nuestro querido Internet Explorer 6 no es capaz de permitirle al usuario cambiar el tamaño del texto si está definido en esa unidad de media. Pero como Colores Efímeros es mi blog personal, he decidido que voy a darle un tratamiento especial a este navegador, así que no tiene importancia que use un tamaño fijo de tipo.

Según la regla anterior, además de decidir que quiero Helvética (y las demás por si se da el caso de que alguien no la tenga en su máquina), defino que quiero un tamaño base de 10px para el texto. Este número no es al azar, obviamente. Como en el interior del documento quiero usar unidades relativas de medida para (casi) todos los elementos, en concreto quiero usar em, me resulta mucho más fácil hacer los cálculos si sé de antemano que 1em equivale a 10px. Sobre todo teniendo en cuenta que más adelante quiero basar la maquetación del blog en base a una grilla elástica (hablando del tema, aquí os dejo un par de artículos de Rodrigo Galíndez sobre el tema: Diseño con grillas (formato PDF, 1.6 Mb) y Utilizando grillas (formato PDF, 2.4 Mb)).

Maquetación

Para controlar la maquetación de los elementos he necesitado englobar todo el contenido del documento en un <div id="wrapper"></div> con el que poder jugar para centrar el bloque de texto. Para hacerlo he usado la técnica de aplicarle un ancho concreto, y determinar que sus márgenes laterales sean automáticos:

#wrapper {
	margin: 0 auto;
	min-width: 640px;
	width: 64em;
}

Además de eso, y para asegurarme de que el ancho nunca sea menor de lo que considero adecuado, he definido un ancho mínimo con min-width de 640px, que se corresponden con los 64em si tenemos en cuenta que el tamaño base del tipo es de 10px.

clearfix

Algo que me gusta tener en todas mis hojas de estilos es el archiconocido clearfix. Este conjunto de reglas se utiliza para “limpiar” bloques que contienen elementos flotantes. ¿No entendéis un pimiento? Bueno, os lo explico en el siguiente gráfico:

En la figura de la izquierda, tenemos un div que contiene a otros dos elementos, uno flotando a la izquierda y otro a la derecha. Como nuestro div padre no tiene colocado el class="clearfix", no es capaz de “entender” que tiene dos elementos contenidos dentro de si. Se comporta como si los elementos flotantes no existieran y por tanto no ocupa el alto que debería. Imaginad que debajo hubiera texto, el resultado sería desastroso, los elementos flotados pisarían el texto y no quedaría nada bien.

Por el contrario, en la figura de la derecha, donde nuestro div sí tiene el class="clearfix", no ocurre nada raro, ya que al tenerlo colocado entiende que posee contenido flotante, y se ajusta a la altura del mismo, comportándose de manera lógica.

Hay otros sistemas para hacer esto mismo (clear: both, etc.), pero de entre todos ellos considero que el mejor es este, y por eso siempre lo tengo en mis hojas de estilo:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* HACK: Esconder de IE/Mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* FIN-HACK: Esconder de IE/Mac */

Ocultaciones

Otra de las cosas que siempre me gusta tener en mi hoja de estilos, y la de este blog no se escapa de tenerla, es una serie de reglas para ocultar elementos. Quizá os sorprenda, porque con un simple display: none; bastaría. Pero hay un problema con esta regla, con ella estamos ocultando los elementos sobre los que la usemos a los ojos de la gran mayoría de lectores de pantalla.

Y vosotros os preguntaréis: ¿Y a quién cojones le importan los lectores de pantalla? Pues tenéis razón, ni siquiera a mi me importan, dudo mucho que alguien vaya a entrar a mi blog con uno de ellos… Pero como no me cuesta absolutamente nada, uso las siguientes reglas para ocultar elementos:

.ocultar {
	height: 1px;
	left: -9999px;
	position: absolute;
	top: -9999px;
	width: 1px;
}

Captura de la iteración

Y de nuevo, para los visitantes que vengan del futuro y quieran ver cómo estaba el diseño del blog en la iteración número 02, aquí os dejo una captura.

• Iteración 02