Hostdime Core - Documentação

Sistema de grid

O Sistema de grids do HostDime Core 1.0 foi construído pegando como referência o sistema de grids do famoso framework CSS Bootstrap 4.0. Ele inclui classes predefinidas para várias opções de colunas, a diferença para o bootstrap é que dependendo da media query, pode ter 12, 10 ou 4 colunas como verá mais adiante.

Abaixo está um exemplo e uma visão detalhada de como o sistema de grid funciona.

.col-xl-12100%

.col-xl-650%

.col-xl-433.33333%

.col-xl-325%

.col-xl-216.66667%

.col-xl-18.33333%

<div class="row">
   <div class="col-xl-12">.col-xl-12</div>
</div>
<div class="row">
   <div class="col-xl-6">.col-xl-6</div>
   <div class="col-xl-6">.col-xl-6</div>
</div>
<div class="row">
   <div class="col-xl-4">.col-xl-4</div>
   <div class="col-xl-4">.col-xl-4</div>
   <div class="col-xl-4">.col-xl-4</div>
</div>
<div class="row">
   <div class="col-xl-3">.col-xl-3</div>
   <div class="col-xl-3">.col-xl-3</div>
   <div class="col-xl-3">.col-xl-3</div>
   <div class="col-xl-3">.col-xl-3</div>
</div>
<div class="row">
   <div class="col-xl-2">.col-xl-2</div>
   <div class="col-xl-2">.col-xl-2</div>
   <div class="col-xl-2">.col-xl-2</div>
   <div class="col-xl-2">.col-xl-2</div>
   <div class="col-xl-2">.col-xl-2</div>
   <div class="col-xl-2">.col-xl-2</div>
</div>
<div class="row">
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
   <div class="col-xl-1">.col-xl-1</div>
</div>

Introdução

Criar novos blocos de conteúdo com o sistema de grids do Core é uma tarefa muito fácil, através de uma série de linhas e colunas que abrigam seu conteúdo. Aqui esta como o sistema de grid do Core funciona:

Linhas .row devem estar localizadas preferencialmente dentro do .container, para alinhamento adequado.
Use linhas para criar grupos horizontais de colunas.
As classes como .col-xl-*(colunas), devem ser filhas imediatas de .row(linhas).
Colunas de grid são criados em um número específico de 12 colunas disponíveis. Por exemplo, três colunas iguais faria uso de três .col-xl-4.
Se mais que 12 colunas são colocadas dentro de uma única linha, automaticamente elas ficarão abaixo uma das outras.
Por padrão, você deverá iniciar as colunas sempre usando as classes .col-xl-*.
A largura das colunas .col-xl-* terá a mesma proporção em todos os dipositivos, para dipositivos menores deve-se usar as classes col-xl-, .col-md- e col-sm-. Você verá mais adiante em opções de grid todos os pontos de
A largura do .container é fluída, com uma largura maxíma de 960px.
A class .col-xl-* só será subscrita em pontos de paradsas. Por exemplo, usando a class .col-md-*, ela só vai subscrever a class .col-xl-* quando a resolução for menor ou igual a 768px de largura.
Todas as colunas tem um espaço interno(padding), de 10px esquerda e 10px direita, totalizando uma espaço de 20px entre as colunas.
Caso não queira esse espaço interno, basta utilizar a class .no-padding junto da class .col-xl-*, isso vai fazer com que os espaços sejam zerados. Como é mostrado no exemplo logo abaixo

.col-xl-433.33333%

.col-xl-866.66667%

<div class="row">
   <div class="col-xl-4 no-padding">.col-xl-4</div>
   <div class="col-xl-8 no-padding">.col-xl-8</div>
</div>

Opções de grid

Veja como o sistema de grid do Core funciona, através de múltiplos pontos de parada com uma tabela prática.

	Todas as resoluções	Igual ou menor que 992px	Igual ou menor que 768px	Igual ou menor que 576px
Largura do container	max 960px	auto
Prefixo da classe	`.col-xl-*`	`.col-lg-*`	`.col-md-*`	`.col-sm-*`
Número de colunas	12	12	10	4
Espaço entre as colunas	20px (10px em cada lada da coluna)

Exemplo Desktop, Tablet e Celular

Não deseja que as colunas fiquem expremidas uma ao lado da outra em dispositivos menores? Use as classes de grid .col-lg-*, .col-md-* .col-sm-* em suas colunas. No exemplo abaixo, mostra um exemplo prático de como usar as class de grid, como foi explicado acima, o uso da class .col-lg-* é obrigatório. As demais class irão sobrescrever ela, a cada ponto de parada.

.col-xl-4 .col-md-5 .col-sm-4

.col-xl-4 .col-md-10 .col-sm-4

<div class="row">
   <div class="col-xl-4 col-md-5 col-sm-4">.col-xl-4 .col-md-5 .col-sm-4</div>
   <div class="col-xl-4 col-md-5 col-sm-4">.col-xl-4 .col-md-5 .col-sm-4</div>
   <div class="col-xl-4 col-md-10 col-sm-4">.col-xl-4 .col-md-10 .col-sm-4</div>
</div>