<!-- item para fins de acessibilidade --> Wolf
wolfgrid



download beta 0.2

Wolfgrid

É um framework com foco em estruturas de grids que dinamizam a criação de estruturas em sites ou sistemas.

O seu diferencial é a possibilidade da criação de estruturas hierarquicas, onde o elemento pai repassa a divisão estrutural para os elementos filhos. Adição de margem e espaçamento entre os elementos.

Containers

A classe .container define o tamanho da área principal do seu site.

Por padrão está definida com a largura de xpx. mas pode utilizar coma a variação de classes. .container* e o valor do tamanho referente a % da largura da tela, como: .container50

As classes disponíveis são: .container40 .container50 .container60 .container70 .container80 .container90 .container100.

Row (Linha)

A classe .row é necessário para separação de conjunto de elementos evitando a quebra de elementos em linha.

Grid Sistem

12 Columns

A grid pode ser dividida em 12 colunas:

d-12
d-11
d-1
d-10
d-2
d-9
d-3
d-8
d-4
d-7
d-5
d-6
d-6
d-1
d-1
d-1
d-1
d-1
d-1
d-1
d-1
d-1
d-1
d-1
d-1
Example:
<div class="row">
	<div class="d-12">d-12</div>
	<div class="d-11">d-11</div>
	<div class="d-10">d-10</div>
	<div class="d-9">d-9</div>
	<div class="d-8">d-8</div>
	<div class="d-7">d-7</div>
	<div class="d-6">d-6</div>
	<div class="d-5">d-5</div>
	<div class="d-6">d-6</div>
	<div class="d-4">d-4</div>
	<div class="d-3">d-3</div>
	<div class="d-2">d-2</div>
	<div class="d-1">d-1</div>
</div>

GRID COM ESPAÇO

A adição da classe .-sp após a classe relativa a divisão da grid, dará espaço entre os elementos.

d-12-sp
d-11-sp
d-1-sp
d-10-sp
d-2-sp
d-9-sp
d-3-sp
d-8-sp
d-2-sp
d-1-sp
d-1-sp
d-7-sp
d-3-sp
d-2-sp
d-6-sp
d-6-sp
d-5-sp
d-5-sp
d-2-sp
d-4-sp
d-4-sp
d-4-sp
d-3-sp
d-3-sp
d-3-sp
d-3-sp
d-2-sp
d-2-sp
d-2-sp
d-2-sp
d-2-sp
d-2-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp
d-1-sp

GRID IGUAIS - SEM ESPAÇO

Ao utilizar grids com tamanhos iguais não é necessária a repetição da classe em todos os elementos, apenas será necessário a adição da classe referente ao número de espaços no elemento pai, .d6-child fará uma separação uniforme para todos os elementos dentro dele.

Example:
<div class="d6-child">
	<div>2 columns</div>
	<div>2 columns</div>
</div>

Também não é necessária a criação de uma nova .row para uma nova linha de elementos, ao adicionar mais elementos do que a divisão escolhida por colunas ele se organizará em baixo.

Example:
<div class="d6-child">
	<div>2 columns</div>
	<div>2 columns</div>
	<div>2 columns</div>
	<div>2 columns</div>
	<div>2 columns</div>
	<div>2 columns</div>
</div>
d12
d6
d6
d4
d4
d4
d3
d3
d3
d3
d2
d2
d2
d2
d2
d2
d1
d1
d1
d1
d1
d1
d1
d1
d1
d1
d1
d1

GRID IGUAIS - COM ESPAÇO

Basta adicionar .-sp a classe .d6-sp-child

d6
d6
d4
d4
d4
d3
d3
d3
d3
d2
d2
d2
d2
d2
d2
d1
d1
d1
d1
d1
d1
d1
d1
d1
d1
d1
d1

GRID ESPECIAIS DE COLUNAS - SEM ESPAÇO

É possível a divisão em 5, 7, 8, 9, 10 e 11 colunas.

Example:
<div class="c5-child">
	<div>5 columns</div>
	<div>5 columns</div>
	<div>5 columns</div>
	<div>5 columns</div>
	<div>5 columns</div>
</div>
c5
c5
c5
c5
c5
c7
c7
c7
c7
c7
c7
c7
c8
c8
c8
c8
c8
c8
c8
c8
c9
c9
c9
c9
c9
c9
c9
c9
c9
c10
c10
c10
c10
c10
c10
c10
c10
c10
c10
c11
c11
c11
c11
c11
c11
c11
c11
c11
c11
c11

GRID ESPECIAIS DE COLUNAS

É possível a divisão em 5, 7, 8, 9, 10 e 11 colunas.

Example:
<div class="c5-sp-child">
	<div>5 columns</div>
	<div>5 columns</div>
	<div>5 columns</div>
	<div>5 columns</div>
	<div>5 columns</div>
</div>
c5
c5
c5
c5
c5
c7
c7
c7
c7
c7
c7
c7
c8
c8
c8
c8
c8
c8
c8
c8
c9
c9
c9
c9
c9
c9
c9
c9
c9
c10
c10
c10
c10
c10
c10
c10
c10
c10
c10
c11
c11
c11
c11
c11
c11
c11
c11
c11
c11
c11

Fluxo contínuo

Os elementos se alinham corretamente removendo as margens laterais, dispensando o uso do .row em cada linha de elementos.

c5
c5
c5
c5
c5
c5
c5
c5
c5
c5

COMPLEMENTOS

Por padrão algumas classes podem ajudar na criação da estrutura e elementos repetitivos:

Margens

Margens por hierarquia

MOBILE

Para adaptação para dispositivos mobile as classes de divisão de colunas podem ser utilizadas com o prefixo .mb como por exemplo .mb* irá dividir os elementos de 1 a 6 colunas na versão mobile.
Para adicionar espaço utilizar a mesma lógica dos outros elementos .mb*-sp.

c11
c11
c11
c11
c11
c11
c11
c11
c11
c11
c11

Third-party

Font-awesome

Como base para ícones utilizamos o Font-awesome, porém a tagi substituida pela tag em

Example:
<em>class="fa fa-code" aria-hidden="true"</div>