Zero to Hero com Saturn-V — Episódio I — Grid System
Se você ainda não sabe o que é o Saturn-V, estes são os links dos quais você precisa:
Este é o primeiro post de uma série que trará toda semana a explicação de uma feature do Saturn-V.
Vamos começar pelo Grid System.
Basicamente o Grid System é a parada mais importante para um site ou app ser responsivo. Pelo que me lembro, tudo meio que começou com 960.gs… mas não vou entrar em detalhes históricos aqui. O que importa é que sem um Grid System, você não vai muito longe nos dias de hoje. E o Saturn-V, como diz sua documentação, fornece um “ridiculous simple grid system”. E mano!! é muito simples mesmo!
Bom, eu já disse que o grid system é a parada mais importante para um app ser responsivo. Mas para que, de fato, ele serve?
Um grid system auxilia na implementação do layout e posicionamento dos elementos na tela. Seu funcionamento consiste em dividir a tela em linhas e colunas.
O HTML abaixo demonstra como criar um grid de 1 linha com 3 colunas.
<div class='sv-row'>
<div class='sv-column'>Column</div>
<div class='sv-column'>Column</div>
<div class='sv-column'>Column</div>
</div>Este é o exemplo mais simples de grid do Saturn-V. Tudo que você precisa fazer é criar uma div com a classe sv-row e dentro dessa div, colocar quantas divs quiser com a classe sv-column. Só isso!
Com algo tão simples quanto isso, você poderá construir qualquer tipo de layout e posicionar elementos na tela onde você quiser. Responsive and mobile friendly.
O exemplo abaixo demonstra como criar um grid onde há um espaçamento entre as linhas. Note o uso da classe sv-row--with-gutter.
<div class='sv-row--with-gutter'>
<div class='sv-column'>Column</div>
<div class='sv-column'>Column</div>
</div>
Até agora criamos grids com colunas de mesma largura. Mas em muitos casos, será necessário especificar um tamanho diferente para cada coluna. O Saturn-V soluciona isso por meio das classes de porcentagem que devem ser usadas em conjunto com a classe sv-column. Existem 6 classes para porcentagens que variam de 20 a 80: _20, _25, _40, _60, _75 e _80.
O código abaixo demonstra como criar um grid com 1 linha e duas colunas, sendo uma coluna com 20% e outra com 80% do tamanho total da tela.
<div class='sv-row'>
<div class='sv-column _20'>Coluna com 20% de tamanho</div>
<div class='sv-column _80'>Coluna com 80% de tamanho</div>
</div>
Muuito simples, não é?!
Usar valores percentuais é muito importante para garantir que seu app é responsivo. Porém, em alguns casos é necessário fixar o tamanho de uma coluna. Para isso existem as classes de valores fixos _100--fixed, _150--fixed, _200--fixed, _250--fixed e _300--fixed.
O exemplo abaixo demonstra como criar um grid de 1 linha com 3 colunas, sendo que a primeira coluna tera uma largura fixa de 100px.
<div class='sv-row'>
<div class='sv-column _100--fixed'>100px</div>
<div class='sv-column'>column</div>
<div class='sv-column'>column</div>
</div>
Flexbox
O Grid System do Saturn-V é implementado usando flexbox. Mas o que é flexbox?
O Flexbox busca prover uma maneira eficiente de distribuir e posicionar os elementos dentro de um container, mesmo quando seu tamanho não é deteminado (fixo) ou é dinâmico, daí o uso do termo flex.
A ideia geral por trás do flexbox é que o tamanho dos elementos filhos de um container são ajustados para melhor aproveitar o espaço disponível, seja aumentando o tamanho destes elementos filhos para cobrir todo o tamanho do container, ou diminuindo para evitar overflow.
O flexbox não é apenas uma propriedade, mas um conjunto de propriedades, aplicadas ao container ou aos elementos filhos. Vamos dar uma olhada no código fonte do Saturn-V para entender melhor o funcionamento do flexbox.
Abaixo estão as definições das classes sv-row e sv-column.
.sv-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 10px;
}
.sv-column {
flex-basis: 100%;
transition: all 0.3s;
}A propriedade display determina o uso de flexbox. Em seguida, temos a propriedade flex-direction que é definida com o valor row. Essa propriedade determina a direção do eixo principal do container, e portanto a direção que será usada para posicionar os elementos filhos, neste caso, os elementos com a classe sv-column. O valor default row estabelece que a direção é da direita para esquerda.
A terceira linha da classe sv-row define a propriedade flex-wrap: wrap;. Isso faz com que a linha seja quebrada caso não haja espaço suficiente para todos os elementos filhos em uma mesma linha.
Olhando para a classe sv-column, percebemos o uso da propriedade flex-basis. Esta propriedade determina o tamanho do elemento antes de todo o espaço disponível para o container ser distribuído.
Com essas duas classes conseguimos criar um container (sv-row) com elementos filhos (sv-column) de mesmo tamanho. Agora, vamos ver como funcionam as colunas de tamanho variável que criamos ao usar as classes de porcentagem (_20, _40, …) .
.sv-column {
flex: 1;
}._20 {
flex: 2;
}
._25 {
flex: 2.5;
}
._40 {
flex: 4;
}
Na definição destas classes notamos o uso da propriedade flex, que é um shorthand para flex-grow. Basicamente, o que estamos fazendo, é definir a proporção de um determinado item em relação a seus irmãos e ao espaço disponível. Ao definirmos o valor de flex:1, e aplicarmos essa definição a todos os elementos filhos de um container, estamos dizendo que todos devem ter a mesma proporção de tamanho. Ou seja, todos devem ocupar um espaço igual. Porém, em um container (sv-row) com 2 elementos filhos (sv-column), se definirmos um deles com flex:1 e o outro com flex:2, estamos dizendo que o segundo item deve ocupar o dobro do espaço ocupado pelo seu irmão.
No Saturn-V, podemos pensar na propriedade flex como simples porcentagem. Portanto uma coluna com classe _20 ocupará 20% do tamanho da linha, contanto que haja uma segunda coluna com classe _80. Por isso, ao especificar uma classe de porcentagem para uma coluna é importante especificar as classses de porcentagem para as demais colunas da mesma linha.
Há muito mais sobre flexbox. Minha intenção aqui foi explicar como o Saturn-V usa flexbox para implementar seu Grid System. Talvez no futuro eu faça um post específico sobre flexbox.
Bom! Isso é tudo que você precisa saber sobre o Grid System do Saturn-V. Agora é mão na massa! Acesse a documentação e faça alguns testes ;)
Até a próxima!
