Nós usamos o grid do Bootstrap da versão v3.1.1. Não modificamos nada, está exatamente como saiu da caixa. Abaixo, seguem algumas instruções básicas de uso. Aconselhamos que você leia também a documentação de Grids do Bootstrap caso queira mais informações.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Tabela de breakpoints

Esta tabela mostra os prefixos de classes que são usadas nos breakpoints do Locastyle.

As classes do grid são aplicadas aos dispositivos com telas de largura maior ou igual ao tamanho do breakpoint. Isso quer dizer que se você aplicar em uma coluna a classe .col-md-6 a coluna terá essa largura nos dispositivos maiores, até que você use, nesse caso, uma classe col-lg-*.

Regras de montagem das grids

Para que o grid funcione perfeitamente, a estrutura abaixo precisa ser respeitada. Existem 3 elementos básicos:

• O elemento .container é onde todos os elementos estarão inseridos. Ele abriga os elementos do grid bem como o elemento .row. Ele é necessário para que o espaçamento das extremidades do Grid funcionem sem erros.
• O elemento .row é o pai das colunas. Ela define um grupo de grids.
• A coluna é qualquer elemento que tenha classes de grid, que são os prefixos como col-xs-*, col-sm-*, col-md-*, col-lg-*. O * (asterísco) é o número que define o tamanho da largura da coluna, chegando no máximo até 12.

Veja como funciona:

• Rows sempre devem ser inseridas em um .container ou em um .container-fluid, assim o alinhamento e padding das colunas funcionam perfeitamente.
• Use as Rows para criar grupos de colunas. Não é sempre, mas é muito provavel que você esteja fazendo algo errado se as colunas não estiverem dentro de uma .row.
• As colunas (elementos com os prefixos de classes de grid), devem ser filhos imediatos de .row
• As colunas criam um espaço com padding que são chamados de gutters. Como o elemento .row já tem um padding nas laterais de 15px, a primeira coluna e a última coluna tem uma margem negativa para corrigir o desalinhamento. Mas não se preocupe com isso.

12 é o número máximo de colunas. Há muita discussão em volta da quantidade de colunas que um Grid pode ter ou que seria mais fácil de montar layouts. Mas 12 é um número bem flexível para montar um grid escalável e que funciona.

Breakpoints e variável global

Nós temos 3 tamanhos de breakpoints que você pode usar para fazer algo específico em seu layout, são eles: 768px, 992px e 1200.

O Locaweb Style marca com uma classe na tag HTML o breakpoint que o usuário se encontra, mesmo quando ele muda a largura da janela do browser. Essa variável se chama breakpointClass.

Se quiser fazer o teste, abra o console do seu browser agora e digite locastyle.breakpointClass. O valor será o breakpoint atual. Tente diminuir o tamanho da tela e execute novamente o comando. Você verá que o valor da variável mudou.

Quando o usuário redimensiona a janela, há um script que calcula o breakpoint e muda o valor da variável depois de 300ms que o redimensionamento parou. Usamos isso para adaptar elementos de acordo com o tamanho da janela e você pode usar para resolver algo específico do seu projeto.