Diseño Responsive dinámico con Less

En entradas anteriores he hablado de diseños Responsive y en esta ocasión vuelvo a hacerlo, pero ahora de una manera más técnica trataré de explicar como conseguir una diseño web ajustado al medio y dinámico con la ayuda de Less.

Te recomiendo que le eches un vistazo a LESS y las Media Queries de CSS3.

Less es un lenguaje de hojas de estilo dinámico, que se puede ejecutar en el lado del cliente con Javascript o en el lado del servidor con Node.js. Además es totalmente multiplataforma y de código abierto. También puedes usar como hago yo, un compilador en tiempo real de php con lessphp.

Less añade en cierto modo lo que alguna vez hemos echado en falta en CSS; permite el uso de variables como cualquier otro lenguaje de programación, permite operaciones aritméticas, dispone de un gran número de funciones para el tratamiento del color, permite la anidación de reglas de estilo, Mixins que vienen a ser las funciones de cualquier otro lenguaje e incluso reservar espacio de nombres.

En cuanto a las Media Queries, recordemos como se declaran:

<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 400px)" >

Bien, llegados a este punto, tenemos las herramientas necesarias para conseguir algo realmente chulo; unas definiciones de estilos totalmente dinámicas y que producen un diseño 100% responsive, veámos el código:

lib.less

Un archivo independiente donde vamos a definir una serie de variables que van a corresponder con las medidas para cada dispositivo, en este caso, la anchura de cada layout.

En este archivo, además de las variables, suelo definir las funciones (Mixins). Es un archivo que raramente se va a volver a tocar durante el proceso de desarrollo y menos en producción.

responsive.less

Este es el archivo donde defino las Media Queries de CSS3 y aplico los estilos para cada definición.

Aquí podemos apreciar la potencia de Less y los estilos anidados, además de las variables previamente definidas.

Como se puede intuir, tenemos un contenedor principal que he llamado wrapper y en us interior se aloja la cabecera (header), el apartado principal del contenido (section) y la barra lateral (aside). Evidentemente estoy hablando de elementos del Dom nuevos en HTML5. Échale un ojo y explico a continuación...

//responsive.less
/* Main layout */
body{
    #wrapper {
        width: @mainWidth;
        header{
            width:@mainWidth;
        }
        .section{
            width: @mainWidth - (@mainWidth/3);
            float:left;
        }
        .aside{
            width: @mainWidth/3;
            float:left;
        }
    }
}

/* Tablet Layout */
@maxTabletWidth: @mainWidth;
@media only screen and (min-width: @tabletWidth) and (max-width: @maxTabletWidth) {
 body{
    #wrapper {
        width: @tabletWidth;
        header{
            width:@tabletWidth;
        }
        .section{
            width: @mainWidth - (@mainWidth/3);
            float:left;
        }
        .aside{
            width: @tabletWidth/3;
            float:left;
        }
    }
}

/* Wide Mobile Layout */
@maxWideMobileWidth: @tabletWidth;
@media only screen and (min-width: @wideMobileWidth) and (max-width: @maxWideMobileWidth) {
 ...
}

/* Mobile Layout */
@maxMobileWidth: @wideMobileWidth;
@media only screen and (max-width: @maxMobileWidth) {
 ...
}

Bien, he aplicado tres Media Queries, para el layout principal o main layout no he aplicado ninguna porque estas van a ser las reglas que se apliquen siempre por defecto.

Observa como se calcula el valor máximo y mínimo de anchura para cada Layout; operaciones aritméticas jugando con los valores de las variables previamente definidas. Aquí Less es el actor principal!.

Al header le damos la misma anchura que al contenedor principal. Section y aside, van a tener que dividirse de alguna manera la anchura del layout, que viene a ser @mainWidth en el layout principal. En mi caso particular, he optado por una columna lateral que corresponde a un tercio de la anchura, por lo tanto, el bloque section, dispondrá de una anchura total determinada por @mainWidth - (@mainWidth/3).

Esto es un sencillo ejemplo de distribución, evidentemente podemos usar la configuración de pantalla que queramos y mediante operaciones sencillas aritméticas, conseguir un archivo 100% independiente, que se va a configurar solo, sin necesidad de editarlo y aquí esta la gracia del asunto. Únicamente accediendo al archivo lib.less, previamente declarado, modificando el valor de las variables, todo el site se ajusta automáticamente sin editar absolutamente nada más ¿consigues ver la potencia?

No dudes en comentar o contactar si tienes alguna duda al respecto.