GainTime

Grid System

O GainTime inclui 3 formatos de Grid System, que se dimensionam adequadamente em até 12 colunas à medida que o tamanho do dispositivo ou do viewport aumenta.

GA IN TI ME
TOPO

O que é um Grid System?

Uma grid é simplesmente uma coleção de linhas horizontais e verticais criando um padrão no qual podemos alinhar nossos elementos de design. Grids nos ajudam a criar projetos onde os elementos não pulam ou alteram a largura à medida que nos movemos de página para página, proporcionando maior consistência em nossos sites.

Como funciona?

Como dito, Grid Systems são usado para criar layouts através de uma série de linhas e colunas que abrigam conteúdo. Agora veja como os Grid System do GanTime funcionam:

Opções para construir com GS

Dispositivos muito pequenos (>0px) Dispositivos pequenos (>768px) Dispositivos médios (>992px) Dispositivos grandes (>1200px)
Prefixo .xs .sm .md .lg
Gutter 10px (5px de cada lado)
Aninháveis SIM
Nº de colunas 12

Demonstração do Grid System


  <div
  class="row">

  
    <div
    class="xs-8">...</div>
  
  
    <div
    class="xs-4">...</div>
  

  </div>

Repare que você pode ter uma coluna com tamanhos diferentes, em resoluções diferentes, ao misturar as classes de largura. Ex: div.xs-8.sm-6.md-4.lg-2

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

  <div
  class="row false-guter">

  
    <div
    class="xs-8">...</div>
  
  
    <div
    class="xs-4">...</div>
  

  </div>

xs-12
xs-11
xs-1
xs-10
xs-2

  <div
  class="row flex-box">

  
    <div
    class="xs-8">...</div>
  
  
    <div
    class="xs-4">...</div>
  

  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
xs-2

  <div
  class="row flex-box">

  
    <div
    class="xs-10">
  
    
      <div
      class="xs-4"></div>
    
    
      <div
      class="xs-4"></div>
    
    
      <div
      class="xs-4"></div>
    
  
    </div>
  
  
    <div
    class="xs-2">
  
    
      <div
      class="xs-12"></div>
    
  
    </div>
  

  </div>

xs-10
xs-2
xs-4
xs-4
xs-4
xs-8
xs-4
xs-12

Deslocadores

Você pode deslocar suas colunas através do Grid System, e para isso basta adicionar uma classe de largura com o prefixo off à sua coluna. É isso mesmo, você já tem a sua coluna (.xs-1, .sm-5, .md6, .lg-9, por exemplo), agora você adiciona a classe correspondente ao quanto você precisa afastá-la, respeitando sempre o limite de 12 colunas.


  <div
  class="row">

  
    <div
    class="off-xs-4 xs-4">...</div>
  

  </div>

.xs-4 com .off-xs-4
.xs-6 com .off-xs-3

Ocultadores

Quando estamos trabalhando com responsividade, é comum que queiramos ocultar elementos. Pensando nisso, criamos os ocultadores. Eles aplicam display: none!important.

Classe Dispositivos muito pequenos (<=768px) Dispositivos pequenos (<=992px) Dispositivos médios (<=1200px) Dispositivos grandes (1200 < x)
.hxs Invisível Visível Visível Visível
.hsm Invisível Invisível Visível Visível
.hmd Invisível Invisível Invisível Visível
.hidden Invisível Invisível Invisível Invisível
.hoxs Invisível Visível Visível Visível
.hosm Visível Invisível Visível Visível
.homd Visível Visível Invisível Visível
.holg Visível Visível Visível Invisível

Exemplos de utilização:

Exibidores

Bom, como as vezes queremos que algo não seja exibido em determinada largura, as vezes queremos o contrário. Pensando nisso, criamos os exibidores. Eles aplicam display: inline.

Classe Dispositivos muito pequenos (<=768px) Dispositivos pequenos (<=992px) Dispositivos médios (<=1200px) Dispositivos grandes (1200 < x)
.vxs Visível Invisível Invisível Invisível
.vsm Visível Visível Invisível Invisível
.vmd Visível Visível Visível Invisível
.visible Visível Visível Visível Visível
.voxs Visível Invisível Invisível Invisível
.vosm Invisível Visível Invisível Invisível
.vomd Invisível Invisível Visível Invisível
.volg Invisível Invisível Invisível Visível

Exemplos de utilização: