Sistema de Grelha

Tamanho da Grelha (12 colunas)

O nosso sistema de grelha é composto por 12 colunas flexíveis. 

A grelha tem como objetivo apresentar a sua página de uma forma fácil e organizada.

As colunas da grelha têm um espaçamento de 30 px ou 20 px (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.

 

Código
Ocultar Código
  • 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).

 

Código
Ocultar Código
  • 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 responsivas 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 verá as colunas da grelha alterarem o seu tamanho. Para isso basta utilizar a classe 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 dispositivos.

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      
Grelha
(.css)