Control del ritmo vertical de tus páginas con Sass y Compass

Control del ritmo vertical de tus páginas con Sass y Compass

Un buen ritmo vertical en un sitio web tiene muchos beneficios: en lo estético, el diseño parece más equilibrado y trabajado; para el lector, el contenido será más coherente y fácil de leer. Si has leído alguna vez el contenido de un sitio web denso y te ha parecido difícil de seguir de línea en línea, seguramente se debe a un pobre ritmo vertical.

Antes, cuando se diseñaba para, el ritmo vertical se ajustaba con los tamaños de fuente, alturas de líneas, márgenes …, establecidos en unidades (pt) de tamaño. Hoy en día eso mismo se controla con el uso de unidades de píxel (px) como unidades de tamaño. Sin embargo, el diseño se pelea con los píxeles, ya que la unidad se establece una vez se ha declarado. Es mucho mejor utilizar ems; con ellos al cambiar el tamaño de fuente del elemento padre hará que se extienda este ajuste al conjunto de los tamaños por debajo del elemento en el DOM.

Puedes convertir los píxeles a ems manualmente, pero requiere la utilización de algunas matemáticas. El uso de Sass y Compás  lo hace innecesario. Todo el proceso matemático se realiza de forma rápida y fácil - incluso se pueden declarar los tamaños en píxeles y se convertirán en ems automáticamente.

El uso de Sass & Compass 

Si todavía no sabes lo que es Sass, debes saber que es un pre-procesador de CSS. Y Compass es un framework de código abierto construido con Sass, una colección de herramientas útiles que hacen que la escritura de las hojas de estilo sea más rápida y sencilla.

Por ejemplo, con los prefijos CSS podrías escribir una transición CSS de este modo:

.width-duration-easein {
       -moz-transition-property: width;
       -o-transition-property: width;
       -webkit-transition-property: width;
       transition-property: width;
       -moz-transition-duration: 2s;
       -o-transition-duration: 2s;
       -webkit-transition-duration: 2s;
       transition-duration: 2s;
       -moz-transition-timing-function: ease-in;
       -o-transition-timing-function: ease-in;
       -webkit-transition-timing-function: ease-in;
       transition-timing-function: ease-in;
}
.width-duration-easein:hover {
       width: 80px;
}

Para lograr el mismo código con Sass y Compass, usaríamos este código:

.width-duration-easein {
       @include transition-property(width);
       @include transition-duration(2s);
       @include transition-timing-function(ease-in);
}
.width-duration-easein:hover {        width: 80px; }

Todo el trabajo duro de añadir los prefijos de navegador ya está hecho.

Utilizar el ritmo vertical de Compass 

En primer lugar necesitas importar el módulo de ritmo vertical de Compass:

@import "compass/typography/vertical_rhythm";

Para que funcione el ritmo vertical es necesario que haya un tamaño de fuente y una altura de línea de base en los que el resto de tamaños están basados. Estos valores hay que declararlos como dos variables:

$base-font-size: 16px;
$base-line-height: 24px;

Puedes configurar cualquier tamaño que te guste para hacer que sea la base del ritmo vertical que deseas crear, pero una buena guía es utilizar cotas de 1,5 veces el tamaño de la fuente base. En este caso, 16 x 1.5 = 24.

Como esto solo son declaraciones de la variable, nada habrá cambiado en el CSS. Para implementar los cambios y crear la línea de base incluye este mixin:

@include establish-baseline;

Una vez que el archivo Sass se ha guardado, si miras el archivo CSS, verás lo siguiente:

html{
       font-size: 16px;
       line-height: 1.5em;
}

La línea de base ya se ha establecido y si te fijas la altura de la línea ya se ha declarado en ems. Compass ha hecho los cálculos en base a las variables que has establecido.

Definición de los encabezados 

Calcular el tamaño de letra y las alturas de línea correctas para cada elemento de encabezado podría llevar mucho tiempo. Afortunadamente Compass lo puede hacer por ti, utilizando el adjust-font-size-to mixin. Todo lo que tienes que hacer es especificar el tamaño en px para el elemento, para cada uno de los elementos de encabezado que deseas incluir en el mixin, de este modo:

h1{
       @include adjust-font-size-to(36px);
 }
h2{
       @include adjust-font-size-to(24px);
}
h3{
       @include adjust-font-size-to(20px);
}

Una vez que guardas el archivo Sass, si miras el archivo CSS, verás lo siguiente:

h1 {
       font-size: 2.25em;
       line-height: 1.33333em;
 }
h2 {
       font-size: 1.5em;
       line-height: 2em;
}
h3 {
       font-size: 1.25em;
       line-height: 1.2em;
}

Compass ha realizado todos los cálculos matemáticos para convertir los tamaños px a ems y fijarlos de acuerdo con el tamaño de fuente y la altura de la línea.

Muchas veces necesitarás un poco de espacio en blanco añadido entre los encabezados y los párrafos. Compass tiene múltiples funciones y mixins para ayudarte con esto.

Función Rhythm 

Esta función se puede utilizar para cualquier declaración de margen o padding. En el siguiente ejemplo se utiliza para establecer el margen inferior de un encabezado, para añadir un poco de espacio entre él y el párrafo siguiente. Tiene dos argumentos - el primero es el múltiplo de la altura de la línea base que desees, y el segundo es el tamaño de la fuente del elemento:

h1{
       @include adjust-font-size-to(36px);
       margin-bottom: rhythm(1, 36px);
 }

La función rhythm calcula 1 vece la altura de la línea de base (que es 24px) por el tamaño de la fuente (que es 36px). Una vez que guardas el archivo Sass, si miras el archivo CSS, verás que el estilo h1 ahora se ve así:

h1 {
       font-size: 2.25em;
       line-height: 1.33333em;
       margin-bottom: 0.66667em;
 }

Compass ha calculado el valor del margen inferior y lo deja en ems.

Mixin Leader 

Este mixin se puede utilizar para agregar el margen superior a un elemento. En el siguiente ejemplo se solicita a todos los (p) elementos de párrafo:

p {
       @include leader;
 }

El mixin está aplicando una unidad de línea de base 1 para el margen superior. Una vez que guardas el archivo Sass, si miras el archivo CSS, verás que el estilo p ahora se ve así:

p {
       margin-top: 1.5em;
}

Mixin Trailer 

Este mixin se puede utilizar para añadir margen inferior a un elemento. En el siguiente ejemplo se aplica a todos los elementos p:

p {
       @include leader;
       @include trailer;
 }

El mixin está aplicando líneas de 1 unidad base hasta el margen inferior. Una vez que guardas el archivo Sass, si miras el archivo CSS, verás que el estilo p ahora se ve así:

p {
       margin-top: 1.5em;
       margin-bottom: 1.5em;
 }

Encontrar problemas 

A veces algo no se ve bien, pero no tiene por qué ser una tarea de chinos averiguar qué elemento está rompiendo el ritmo vertical. Afortunadamente Compass tiene un mixin útil para ayudar a identificar problemas. La debug-vertical-alignment mixin se debe aplicar al elemento body:

body {
       @include debug-vertical-alignment;
 }

Una vez que guardas el archivo Sass puedes ver el CSS para ver los nuevos estilos en la clase body, pero eso no es lo importante de este mixin. Si actualizas el navegador verás que se ha añadido una rejilla base en el fondo de la página. Esto puede ser muy útil para depurar cualquier problema de espacio.

Es recomendable incluir este mixin durante el desarrollo para asegurarse de que cada elemento está separado correctamente cuando se aplican los estilos.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario: