Grades grids, linhas, colunas
O Sistema de Grade é semelhante a do bootstrap. Com linhas e colunas,
porem foi modificada e ajustada com mudanças de colunas animadas com views e
simplificada as classes.
.g - Container (grade)
.l - Row (linha)
.g0 - Container (grade sem Margens)
.l0 - Row (linh sem Margens)
.co{ 1 | 12 }-{ pp | p | m | g | gg | xg } - Col (Colunas)
.off{ 1 | 11 }-{ pp | p | m | g | gg | xg } - Offset (Colunas vazias)
co5
co3
co2
co2
co5-p
co3-p
co2-p
co2-p
co5-m
co3-m
co2-m
co2-m
co5-g
co3-g
co2-g
co2-g
co5-gg
co3-gg
co2-gg
co2-gg
co5-xg
co3-xg
co2-xg
co2-xg
<div class="g">
<div class="l">
<div class="co5-gg">co5-gg</div>
<div class="co3-gg">co3-gg</div>
<div class="co2-gg">co2-gg</div>
<div class="co2-gg">co2-gg</div>
</div>
<div class="l">
<div class="co5">co5</div>
<div class="co3">co3</div>
<div class="co2">co2</div>
<div class="co2">co2</div>
</div>
</div>
g Blocos
g-pp
g-p
g-m
g-g ou g
g-gg
g-xg
g0 Blocos sem margens
g0-pp
g0-p
g0-m
g0-g ou g0
g0-gg
g0-xg
<div class="g-pp">g-pp</div>
<div class="g-p">g-p</div>
<div class="g-m">g-m</div>
<div class="g-g">g-g</div>
<div class="g-gg">g-gg ou g</div>
<div class="g0-pp">g0-pp</div>
<div class="g0-p">g0-p</div>
<div class="g0-m">g0-m</div>
<div class="g0-g">g0-g</div>
<div class="g0-gg">g0-gg ou g0</div>
Co Coluinas Diversas
co5
co3
co2
co2
3-p 4-m 2-g
3-p 2-m 4-g
3-p 2-m 4-g
3-p 4-m 2-g
4-m 3-g
4-m 6-g
4-m 3-g
5-p 4-g
5-p 2-g
2-p 6-g
5-gg
3-gg
2-gg
2-gg
co5-xg
co3-xg
co2-xg
co2-xg
6-g 12-m
12-p 8-m 4-g 2-gg
co5
co5
3-p 5-m 8-g
3-p 5-m 2-g
off5 co7
off2 co8 off2
off1-m off5-g co
off diversos
off diversos
off diversos
<div class="g">
<div class="l">
<div class="co3-p co4-m co2-g">3-p 4-m 2-g</div>
<div class="co3-p co2-m co4-g">3-p 2-m 4-g</div>
<div class="co3-p co2-m co4-g">3-p 2-m 4-g</div>
<div class="co3-p co4-m co2-g">3-p 4-m 2-g</div>
</div>
<div class="l">
<div class="co4-m co3-g">4-m 3-g</div>
<div class="co4-m co6-g">4-m 6-g</div>
<div class="co4-m co3-g">4-m 3-g</div>
</div>
<div class="l">
<div class="co5-p co4-g">5-p 4-g</div>
<div class="co5-p co2-g">5-p 2-g</div>
<div class="co2-p co6-g">2-p 6-g</div>
</div>
<div class="l">
<div class="co5-gg">5-gg</div>
<div class="co3-gg">3-gg</div>
<div class="co2-gg">2-gg</div>
<div class="co2-gg">2-gg</div>
</div>
<div class="l">
<div class="co5-xg">co5-xg</div>
<div class="co3-xg">co3-xg</div>
<div class="co2-xg">co2-xg</div>
<div class="co2-xg">co2-xg</div>
</div>
<div class="l mf1">
<div class="co6-g c12-m">6-g 12-m</div>
</div>
<div class="l">
<div class="co12-p co8-m co4-g co2-gg">12-p 8-m 4-g 2-gg</div>
</div>
<div class="l">
<div class="off5 co7">off5 co7</div>
</div>
<div class="l">
<div class="off2 co8 off2">off2 co8 off2</div>
</div>
<div class="l">
<div class="off1-m off5-g co">off1-m off5-g co</div>
</div>
<div class="l">
<div class="off0-p off2-m off1-g co">off diversos</div>
<div class="off1-p off0-m off2-g co">off diversos</div>
<div class="off2-p off1-m off0-g co">off diversos</div>
</div>
</div>