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!
Deixe um comentário