Grid systems

Grid Systems

Marcelo Miranda Carneiro 20/03/2014

F.biz | COMPANY CONFIDENTIAL

O que é?

É a estrutura visual utilizada para organizar o conteúdo.Pode utilizar linhas retas, curvas, verticais, horizontais ou anguladas.

01F.biz | COMPANY CONFIDENTIAL

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 ouflexíveis

• Velocidade no desenvolvimento, maior precisão e garantequalidade














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 GridAntes de tudo é necessário registrar a grid:

@include gs-register-grid( $label: "site-normal", // nome da grid $width: 960px, // tamanho máximo $column-num: 10, // quantidade de colunas $gutter: 10px); // tamanho do gutter

01.02.03.04.05.



Criando colunasPara 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 ascolunas:

width: gs-column(all, site-normal);



Utilizando guttersPara 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 asituaçã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 formais eficaz para a situação.

• Exemplo a seguir com coluna fixa e fluída, utilizandotécnica mista.



Criando listasPara facilitar o box modelling em listas, é possível usar omixin:

@include gs-row(auto, site-normal);

ou passar um tamanho fixo de colunas:

@include gs-row(6, site-normal);



Forma “não semântica”Para gerar as classes baseadas na configuração da grid:

@include gs-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 QueriesPara projetos que usam a chamada da media-querydentro do CSS, é possível utilizar o mixin:

@include gs-media-query($grid: site-normal) { ... }

Desde que um breakpoint tenha sido definido:

@include gs-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 dascolunas

• O valor do gutter normalmente é usado como padding dewrappers que desenham a estrutura da grid

• Isso se dá por visualmente não fazer sentido guttersbaseados em porcentagem


Bora usar grids emtodos os projetos!


Onde está?Clone ou adicione via bower no seu projeto:https://github.com/mcarneiro/gs/

git clone https://github.com/mcarneiro/gs.git

ou

bower install gs --save-dev


https://github.com/mcarneiro/gs/

A WPP Company / thank you

http://fbiz.com.br/

Technology

Grid systems