Download - 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
02F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
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
03F.biz | COMPANY CONFIDENTIAL
A Semantic Grid System foi construída com base nas nossas
necessidades e realidade.
F.biz | COMPANY CONFIDENTIAL
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
04F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
Usando a Gridsystem
F.biz | COMPANY CONFIDENTIAL
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.
05F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
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);
06F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
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);
07F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
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.
08F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
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);
09F.biz | COMPANY CONFIDENTIAL
F.biz | COMPANY CONFIDENTIAL
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
10F.biz | COMPANY CONFIDENTIAL
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);
11F.biz | COMPANY CONFIDENTIAL
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
12F.biz | COMPANY CONFIDENTIAL
Bora usar grids emtodos os projetos!
F.biz | COMPANY CONFIDENTIAL
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
13F.biz | COMPANY CONFIDENTIAL
A WPP Company / thank you