LOCAWEB STYLE

Documentação Locaweb Style

Grid

Entenda nosso sistema de grid.

Sistemas de grid são usados para criar layouts em páginas com colunas e linhas que trabalham de forma responsiva. Veja como ele funciona:

Possuímos um sistema de grid de 12 colunas baseado no Bootstrap, mantendo seus breakpoints (1200px, 992px, 768px e 480px).

- Linhas (.row), devem ser adicionadas dentro de um .container, para manter os espaçamentos e alinhamentos.
- Use as linhas para criar grupos horizontais de colunas.
- Conteúdos devem ser colocados dentro de colunas e as colunas só devem ser filhos imediatos de linhas.

Para ver a documentação completa, clique aqui.

1
1
1
1
1
1
1
1
1
1
1
1
8
4
4
4
4
6
6

	
1

	
1

	
1

	
1

	
1

	
1

	
1

	
1

	
1

	
1

	
1

	
1





	
8

	
4





	
4

	
4

	
4





	
6

	
6

Identificando a largura do viewport através de classes.

Em alguns momentos utilizamos uma função de javascript (breakpointWindowWidth()) que é iniciada junto com o Locaweb Style, para adicionar classes na tag <html> de acordo com o tamanho do seu viewport.

Classes Tamanhos do viewport
.media-mobile Essa classe é adicionada para viewports menores ou iguais a 768px.
.media-tablet Essa classe é adicionada para viewports menores ou iguais a 992px e maiores ou iguais a 768px.
.media-desk Essa classe é adicionada para viewports menores ou iguais a 1200px e maiores ou iguais a 992px.
.media-desk-lg Essa classe é adicionada para viewports maiores ou iguais a 1200px.

O padrão dos grids dos nossos paineis.

Em nossos paineis utilizamos 2 padrões de estrutura, 1 com conteúdo principal (.col-md-9) e sidebar (.col-md-3) e outra com apenas o conteúdo principal(.col-md-12)

Veja abaixo o primeiro exemplo de nossos padrões.



Conteúdo Principal 




	
Conteúdo Principal

Veja abaixo o segundo exemplo de nossos padrões.



Conteúdo Principal 




	
Conteúdo Principal