Grid Systems Explained

Grid Systems
Marcelo Miranda Carneiro
20/03/2014
F.biz|COMPANYCONFIDENTIAL

O que é?
É a estrutura visual utilizada para organizar o conteúdo.
Pode utilizar linhas retas, curvas, verticais,
horizontais ou anguladas.
01F.biz|COMPANYCONFIDENTIAL

O que é?
• O conceito aplicado à organização do CSS ajuda a criar
consistência da estrutura do layout
• Se torna referência na construção das páginas
• Organização ajuda na construção de sites responsivos ou
flexíveis
• Velocidade no desenvolvimento, maior precisão e garante
qualidade

Por que?
• A grande maioria das grids consideram implementações
limitadas ou não semânticas
• A realidade de uma agência de publicidade é, digamos …
bem peculiar:
• Muitas vezes o lay-out não bate com uma única grid
• Faça apenas os cálculos, não faça box-modelling

A Semantic Grid System foi
construída com base nas nossas
necessidades e realidade.

Análise
• Os layouts de criação devem vir dentro de grids visuais
• Muitas vezes a grid não está claramente definida no PSD
• Análise do layout em busca das estruturas principais
• Nestes casos é muito comum definir múltiplas grids:
• Uma global para estrutura
• (N) definições baseadas em módulos

Usando a Gridsystem

Registrando a Grid
Antes de tudo é necessário registrar a grid:
@includegs-register-grid(
$label:"site-normal",//nomedagrid
$width:960px,//tamanhomáximo
$column-num:10,//quantidadedecolunas
$gutter:10px);//tamanhodogutter
01.
02.
03.
04.
05.

Criando colunas
Para captar o valor de uma coluna, utilize a função:
width:gs-column(1,site-normal);
O valor “all” pode ser usado para indicar “todas as
colunas:
width:gs-column(all,site-normal);

Utilizando gutters
Para pegar o valor do gutter, utilize a função:
margin-left:gs-gutter(1,site-normal);
com a vantagem de usar como for melhor para a
situação:
padding-left:gs-gutter(1,site-normal);

Utilizando gutters
• Uma das vantagens deste modelo é a liberdade para usar
a grid apenas quando necessário, com a técnica que for
mais eficaz para a situação.
• Exemplo a seguir com coluna fixa e fluída, utilizando
técnica mista.

Criando listas
Para facilitar o box modelling em listas, é possível usar o
mixin:
@includegs-row(auto,site-normal);
ou passar um tamanho fixo de colunas:
@includegs-row(6,site-normal);

Forma “não semântica”
Para gerar as classes baseadas na configuração da grid:
@includegs-classes(site-normal,sn-);
Gerará classes de acordo com as configurações de “site-
normal” com o prefixo “sn-“, resultando em:
.sn-col-1,.sn-col-2....sn-col-10

Media Queries
Para projetos que usam a chamada da media-query
dentro do CSS, é possível utilizar o mixin:
@includegs-media-query($grid:site-normal){...}
Desde que um breakpoint tenha sido definido:
@includegs-register-grid(...$breakpoint:959px);

Nota sobre grids flexíveis
• Grids flexíveis (com valores em %) consideram o gutter
como valor separado e não fazem parte do cálculo das
colunas
• O valor do gutter normalmente é usado como padding de
wrappers que desenham a estrutura da grid
• Isso se dá por visualmente não fazer sentido gutters
baseados em porcentagem

Bora usar grids em
todos os projetos!

Onde está?
Clone ou adicione via bower no seu projeto:
https://github.com/mcarneiro/gs/
gitclonehttps://github.com/mcarneiro/gs.git
ou
bowerinstallgs--save-dev

Grid Systems Explained

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (12)

Similar a Grid Systems Explained

Similar a Grid Systems Explained (15)

Grid Systems Explained