Sistema de Grelha
Sistema de Grelha
Tamanho da Grelha (12 colunas)
O nosso sistema de grelha é composto por 12 colunas flexíveis.
A grelha tem como objectivo apresentar a sua página de uma forma fácil e organizada.
As colunas da grelha têm um espaçamento de 30px ou 20px (dependendo da largura do layout) entre colunas. Mesmo que as nossas colunas sejam fluidas, o espaçamento permanece constante, e cada uma dessas colunas terá igual largura.
- HTML
<div class="grid-wrapper">
<div class="row-fluid">
<div class="span12">
<span>span12</span>
</div>
</div>
<div class="row-fluid">
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
<div class="span1">
<span>span1</span>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<span>span3</span>
</div>
<div class="span3">
<span>span3</span>
</div>
<div class="span3">
<span>span3</span>
</div>
<div class="span3">
<span>span3</span>
</div>
</div>
</div>
Deslocamentos / Espaçamentos (offset)
Utilize offset (número de colunas que deseja) para criar espaços.
Por exemplo:
Uma grelha de 7 colunas com offset5 (terá 5 colunas de espaçamento).
Uma grelha de 9 colunas com offset3 (terá 3 colunas de espaçamento).
- HTML
<div class="grid-wrapper">
<div class="row-fluid">
<div class="span12">
<span>span12</span>
</div>
</div>
<div class="row-fluid">
<div class="span7 offset5">
<span>span7 (offset5)</span>
</div>
</div>
<div class="row-fluid">
<div class="span9 offset3">
<span>span9 (offset3)</span>
</div>
</div>
</div>
Colunas Responsivas (colunas fluídas)
As colunas alteram automaticamente as suas dimensões uma vez que alcançam determinados pontos de interrupção. Para ilustrar, redimensione a janela do seu navegador e você verá as colunas da grade alterarem o tamanho. Para isso basta utilizar a class row-fluid.
Em baixo iremos mostrar como as colunas se adaptam a todos os tamanhos de ecrã.
Phone - <767px
Tablets - ≥768px
Desktops - ≥980px
Grandes desktops - ≥1200px
| Breakpoints | ||||
| Phone | Tablets | Desktops | Grandes Desktops | |
| < 767px | ≥768px | ≥980px | ≥1200px | |
| Largura das colunas fixas | Auto | Auto | Auto | Auto |
| Número de colunas | 12 | |||
| Margem | Auto | 20px | 20px | 30px |
Utilidades Responsivas
Para um desenvolvimento mais rápido para mobile, pode usar estas classes para mostrar e ocultar conteúdo nos diferentes devices.
Use as seguintes classes:
visible - visível
hidden - esconde
| Phone | Tablets | Desktops | |
| < 768px | ≥768px | ≥980px | |
| .visible-phone | |||
| .visible-tablet | |||
| .visible-desktop | |||
| .hidden-phone | |||
| .hidden-tablet | |||
| .hidden-desktop |