É 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.
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.
A classe .row é necessário para separação de conjunto de elementos evitando a quebra de elementos em linha.
A grid pode ser dividida em 12 colunas:
<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>
A adição da classe .-sp após a classe relativa a divisão da grid, dará espaço entre os elementos.
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>
Basta adicionar .-sp a classe .d6-sp-child
É possível a divisão em 5, 7, 8, 9, 10 e 11 colunas.
<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>
É possível a divisão em 5, 7, 8, 9, 10 e 11 colunas.
<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>
Os elementos se alinham corretamente removendo as margens laterais, dispensando o uso do .row em cada linha de elementos.
Por padrão algumas classes podem ajudar na criação da estrutura e elementos repetitivos:
<div class="mg5-child">
<div>5px de espaço</div>
<div>5px de espaço</div>
<div>5px de espaço</div>
<div>5px de espaço</div>
<div>5px de espaço</div>
</div>
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.
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>