Crie uma melhor experiência de leitura em seu site usando o Vertical Rhythm.

Embora muitas pessoas estejam familiarizadas com os sistemas de grades horizontais – como Bootstrap e Foundation, para citar alguns – nem todo mundo sabe que grades verticais podem ser usadas para dar ritmo à sua página da web. Podemos facilmente atingir esse objetivo usando Sass & Compass.

Imagine um cenário onde você pode colocar uma grade de linha de base no topo de seu design e combinar seu conteúdo perfeitamente acima de cada uma dessas linhas. Quando estamos projetando um site, temos a prática de calcular seu conteúdo apenas pelas margens e alturas de linha, o que não é errado, mas pode facilmente se tornar um pesadelo para fins de manutenção.

Como eu disse, podemos usar o Sass e o Compass para fazer esse trabalho sujo para nós. Primeiro de tudo, temos que definir as variáveis ​​globais para fazer isso:

@import "compass"

$base-font-size: 16px;
$base-line-height: 30px;
@include establish-baseline;

Se você quiser incluir alguma outra tag html com tamanho de fonte diferente – como um cabeçalho – você apenas tem que usar o mixin “ajustar o tamanho da fonte para”. Desta forma, você evita quebrar o ritmo de sua página e tudo estará no lugar:

h1 {
    @include adjust-font-size-to(40px);
}

Para adicionar algum espaço extra entre o conteúdo da sua página, você ainda pode brincar com as margens, preenchimentos e bordas sem afetar o descarte de nossa página. Só temos que usar os mixins de “líder” e “trailer”, assim:

h1 {
     @include adjust-font-size-to(40px);
     @include leader(1, 40px); // margin-top
     @include trailer(1, 40px); // margin-bottom
     @include padding-leader(1, 40px); // padding-top
     @include padding-trailer(1, 40px); // padding-bottom
     @include trailing-border(5px, 1, 40px); //border
}

Observe que temos que passar alguns argumentos extras aqui para obter o resultado adequado: Em todos os mixins, temos que repetir o tamanho da fonte do nosso elemento e em “borda do trailer” temos 3 argumentos, onde o primeiro arg é a largura de a borda e a segunda é o preenchimento.

Não se esqueça de que esses mixins têm o objetivo de ajudar seu fluxo de trabalho como webdesigner, mas podem facilmente transformar seu css gerado em uma bagunça total. Use com sabedoria.

Leitura adicional.