En el articulo anterior vimos como crear un sitio web básico con nanoc. Ahora vamos a ver como podemos gestionar nuestras hojas de estilo en un proyecto de nanoc utilizando LESS.

LESS, o “Leaner CSS” es una gema de Ruby que extiende el lenguaje CSS con elementos propios de otros lenguajes de programación, como variables, herencia, operaciones aritméticas, etc. Algunas de las cosas que nos permite son:

Variables
LESS te permite declarar variables y reutilizarlas dentro de tus hojas de estilo, haciendo cambios globales tan sencillos como modificar una linea.

@color_logo: #F7BD01;
 
#logo { background: @color_logo; }

Elementos anidados (herencia)
Con LESS, en vez de tener selectores largos podemos anidar un selector dentro de otro. De esta forma la herencia queda más clara y tus hojas de estilo más pequeñas.

/* less */
#cabecera {
    background:#222;
    color:#ccc;
    a {
        text-decoration:none;
        font-weight:bold;
    }
}
 
/* css */
#cabecera {
    background:#222;
    color:#ccc;
}
#cabecera a {
    text-decoration:none;
    font-weight:bold;
}

No voy a hablar mucho más de LESS en este articulo. Para ver más características os recomiendo que leais la documentación oficial, donde explican cómo extiende el lenguaje CSS y todo lo que se puede hacer con la librería.

Leer más…

En algún momento de nuestra carrera profesional, todos nosotros hemos oído o leido que debemos usar tamaños de fuentes relativos (si no es el caso, te lo digo yo: debes usar tamaños de fuentes relativos).

¿Por qué debo yo usar fuentes relativos?

Simple: por usabilidad.

Leer más…

Que levanten la mano todos los que han querido meter una caja en su web con un fondo translucido y no han podido por culpa de Internet Explorer.

Hasta su versión 7, Internet Explorer no soporta el uso de PNGs transparentes de modo nativo. Sin embargo es posible usar un PNG transparente en nuestras hojas de estilos usando un filtro propietario. Nos interesa que dicho filtro solo lo interprete Internet Explorer 6 e inferiores, por lo que tendremos que utilizar comentarios condicionales o algún otro método para filtrar CSS. (Yo personalmente uso el Tan hack)

.capa-con-png {
	background:url('../img/transparente.png');
}
* html .capa-con-png {
	background-image: none; /* Sin esto no veríamos la imagen cargada con el filtro */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/transparente.png', sizingMethod='scale');
}

A tener en cuenta

Es más que posible que en nuestro sitio la estructura de carpetas sea similar a la de la imagen, y que en nuestra hoja de estilos estemos poniendo las rutas relativas como en el ejemplo de arriba. Es importante saber que en el filtro las rutas no se tienen en cuenta desde el CSS, sino desde la página en la que estemos. Para ahorrarnos problemas es mejor usar rutas absolutas (siempre que tengamos posibilidad).

Las imagenes cargadas con el filtro no aceptan las propiedades background-position y background-repeat. Siempre se posicionarán en la esquina superior izquierda y se repetirán una única vez.

Dentro del filtro, la propiedad sizingMethod acepta dos valores:

• image: pondrá la imagen a su tamaño. Si tenemos un PNG de 1×1 pixels, lo mostrará a 1×1.
• scale: redimesiona la imagen al tamaño de la caja en la que estamos aplicando el filtro. Si tenemos un png de 100×100 pixels puesto en una caja que mide 200×400 px, lo reescalará hasta ocupar toda la página