Folha simples de estilo para quem precisa ter mais liberdade na hora da codificação do Layout;
- 4Kb arquivo original / 2Kb arquivo minificado;
- Não acompanha estilização de elementos;
- Grid horizontal de 1360px;
- Estrutura flexível;
- São 12 colunas;
- Com a classe .move--*, você consegue melhor posicionar a coluna dentro do Grid;
- A menos de 600px as colunas se empilham verticalmente;
Classes
.container (width 1360px)
.no--space (somente com .row)
.col--1
.col--2
.col--3
.col--4
.col--5
.col--6
.col--7
.col--8
.col--9
.col--10
.col--11
.col--12
.column-overlay (após uma .col--*, use como wrapper de conteúdo)
.move--1 (somente com .col--*)
.move--2 (somente com .col--*)
.move--3 (somente com .col--*)
.move--4 (somente com .col--*)
.move--5 (somente com .col--*)
.move--6 (somente com .col--*)
.move--7 (somente com .col--*)
.move--8 (somente com .col--*)
.move--9 (somente com .col--*)
.move--10 (somente com .col--*)
.move--11 (somente com .col--*)
.move--12 (somente com .col--*)
Obs: Não deixe de usar a Classe: '.container'
Estrutura comum das colunas
<div class="row">
<div class="col--8 move--2">
<div class="column--overlay">
8 ( .move--2 )
</div>
</div>
<div class="col--8">
<div class="column--overlay">
8
</div>
</div>
<div class="col--4">
<div class="column--overlay">
4
</div>
</div>
</div>
<div class="row no--space">
<div class="col--6">
<div class="column--overlay">
6 ( row .no-space )
</div>
</div>
<div class="col--6">
<div class="column--overlay">
6 ( row .no-space )
</div>
</div>
</div>