Ritmo vertical na web é uma técnica usada para manter o alinhamento de textos e imagens baseando-se em um line-height padrão. Porém, além do line-height, é preciso manipular font-sizes, paddings, margins e borders. Resumindo, para manter o ritmo vertical no “CSS puro” envolve muito cálculo. E é aqui que entra o CARA pra nos ajudar: Vertical Rhythm do Compass.
Eu sei que não está bem alinhado, ignorem, foi só pra ilustrar a ideia.
Caso não conheça o Compass, recomendo você ir atrás porque já está atrasado, amigo.
O que é o Vertical Rhythm?
Vertical Rhythm é uma ferramenta do Compass que faz mágica para manter o ritmo vertical do seu projeto, utilizando funções e mixins para calcular font-sizes, line-heights, borders, e afins.
Organizando seu CSS
Nos últimos projetos que trabalhei usei a organização proposta pelos caras do MVCSS, que consistem em:
|-- _base.scss
|-- _settings.scss
|-- _reset.scss
|-- application.scss
Para saber mais, acesse a página do projeto no Github.
Porém, é totalmente válido você criar sua própria organização. Por exemplo, se você tem muito estilos de botão na aplicação, remova para um _buttons.scss. O que importa é a organização!
Definindo padrões de tamanho
Feito isso, nas configurações do seu css, no caso _settings.scss, vamos estabelecer valores à duas variáveis do Compass, $base-font-size e $base-line-height.
$base-font-size: 16px; $base-line-height: 24px;
Quase lá. É preciso incluir um mixin do Compass no seu projeto, chamado establish-baseline. Eu, particularmente, coloco ele no _base.scss:
@include establish-baseline;
Quando compilado, o código gerado por esse mixin é o resultado relativo ao $base-font-size e $base-line-height, no caso, ficará assim:
html {
font-size: 100%;
line-height: 1.5em;
}
Legal, né? Calma, vem mais mágia por aí.
Tamanho de fonte
Esqueça o a propriedade font-size, de agora em diante você usará um mixin para calcular isso, o útil @adjust-font-size-to. Você irá passar o valor desejado em pixels por parâmetro. Exemplo:
p {
@adjust-font-size-to(14px);
}
Assim, ele irá calcular o tamanho da fonte e o line-height relativo às propriedades setas acima e resultar em em. Bruxaria!
Margins e Paddings
Aqui vão outras propriedades de CSS que você deverá evitar o uso: margin-top, margin-bottom, padding-top e padding-bottom. Ao invés destas propriedades você usará o mixin rhythm, que como os outros mixins do Compass, compila e te passa o resultado em em:
.header {
@include rhythm(1, 0, 0, 1);
}
Para ser mais específico, o primeiro e último são referentes a margin-top e margin-bottom, respectivamente. Segundo e terceiro referentes à padding-top e padding-bottom, respectivamente.
Imagens
Eis um problema a ser enfrentado, imagens! Como nem sempre, apesar de recomendado, o designer irá layoutar tudo com tamanho relativo ao seu line-height, você vai precisar quebrar a cabeça. Por exemplo, como calcular os paddings de uma imagem com tamanho de 30px em um projeto com line-height de 24px? Aí é que entra o mixin bárbaro que o @rodrigowillrich criou.
Estamos procurando um bom nome pra ele, se alguém ter uma dica, por favor, entre em contato. Por enquanto, ele se chama fix-vertical-rhythm (sim, eu sei que não está legal), e calcula o ritmo baseado na altura da imagem que você quer. Segue a mágia do cara:
@mixin fix-vertical-rhythm($height, $font-size: $base-font-size, $padding) {
@if $height > 0 {
$lines: lines-for-font-size($height);
$offset: rhythm($lines, $font-size, $height);
@if $padding { padding-top: $offset / 2;
padding-bottom: $offset / 2;
}
@else {
margin-top: $offset / 2;
margin-bottom: $offset / 2;
}
}
}
Exemplo de uso, sendo 31px a altura da imagem e 32px o tamanho da fonte:
@include fix-vertical-rhythm(31px, 32px);
Se alguém ter uma melhoria, só colaborar com ele no Github! (:
Bônus
Vou deixar de bônus uma técnica bem simples e muito útil, também criada pelo Rodrigo.
Trata-se de dois mixins para debugar seu ritmo vertical e seu grid-system. Talvez alguém já use isso, mas fica a dica.
Defina uma váriavel que funcionará como um boolean. Aqui vamos chamar de $debug.
$debug: false;
Abaixo, os mixins:
@mixin debug-grid {
@if $debug {
@include susy-grid-background; // seu grid-system
}
}
@mixin debug-vertical-rhythm {
@if $debug {
@include debug-vertical-alignment;
}
}
Caros, acho que isso. Ritmo vertical é algo muito legal mas que as vezes pode tirar o cara do sério. Existe uma penca de coisas já criadas para auxiliar isso, mas se for perder muito tempo, vá em frente. Tudo depende dos seus princípios.
Até logo!