aperte s para abrir a busca
Storybook Storybook
v1.81.11

# Grid

Nosso Grid é criado a partir de classes CSS, utilizando Flexbox e de forma responsiva seguindo a ideia de Mobile First.

Aqui vamos ter alguns exemplos de uso do nosso Grid, assim como explicações de como utiliza-lo da melhor forma em conjunto com o Figma e os Designers.

# Simples

Uso simples do Grid, as colunas (c-col ou c-col-*) devem ser sempre utilizadas dentro das linhas (c-row), e o container c-container deve ser sempre utilizado em volta da página como um todo (em um layout por exemplo).

Coluna 1
Coluna 2
Coluna 3 
<div class="c-container">
  <div class="c-row">
    <div class="c-col">
      <div>
        Coluna 1
      </div>
    </div>
    <div class="c-col">
      <div>
        Coluna 2
      </div>
    </div>
    <div class="c-col">
      <div>
        Coluna 3
      </div>
    </div>
  </div>
</div>

# Colunas e Breakpoints

Para definir colunas específicas por breakpoint, é só usar o prefixo do breakpoint desejado na frente em conjunto com as outras classes.

Exemplo: 3 colunas ocupando 100% do espaço no mobile, passando a ter layouts diferentes no tablet e desktop.

<div class="c-container">
  <div class="c-row">
    <div class="c-col-2 sm:c-col-3 md:c-col-4">
      <div>
        Coluna 1
      </div>
    </div>
    <div class="c-col-2 sm:c-col-3 md:c-col-4">
      <div>
        Coluna 2
      </div>
    </div>
    <div class="c-col-2 sm:c-col-6 md:c-col-4">
      <div>
        Coluna 3
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Colunas e Figma

Nossas colunas seguem a mesma definição de colunas do Figma (opens new window), respeitando o número máximo de colunas disponíveis para cada tipo de dispositivo (tamanho de tela).

Para visualizar a grade de colunas no Figma, selecione o frame do Figma e pressione Ctrl + G (Mac)

Sendo assim, para implementar as colunas do Figma basta utilizar as classes de c-col-x se adaptando dependendo do breakpoint.

# Colunas Mobile

Para os viewports que variam entre Mobile e Mobile Small. Limitado a 2 colunas conforme as definições do Figma.

Para uma referência dos tamanhos dos breakpoints e viewports veja na aba de API

Código Figma
<div class="c-container">
  <div class="c-row">
    <div class="c-col-2">
      <div>Coluna 1</div>
    </div>
  </div>
  <div class="c-row">
    <div class="c-col-1">
      <div>Coluna 1</div>
    </div>
    <div class="c-col-1">
      <div>Coluna 2</div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Figma Mobile

# Colunas Tablet

Para os viewports que variam entre Tablet Portrait e Tablet Landscape. Limitado a 6 colunas conforme as definições do Figma.

Para uma referência dos tamanhos dos breakpoints e viewports veja na aba de API

Código Figma
<div class="c-container">
  <div class="c-row">
    <div class="sm:c-col-6">
      <div>Coluna 1</div>
    </div>
  </div>
  <div class="c-row">
    <div class="sm:c-col-3">
      <div>Coluna 1</div>
    </div>
    <div class="sm:c-col-3">
      <div>Coluna 2</div>
    </div>
  </div>
  <div class="c-row">
    <div class="sm:c-col-2">
      <div>Coluna 1</div>
    </div>
    <div class="sm:c-col-2">
      <div>Coluna 2</div>
    </div>
    <div class="sm:c-col-2">
      <div>Coluna 3</div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Figma Mobile

# Colunas Desktop

Para os viewports que variam entre Desktop e Desktop Large. Limitado a 12 colunas conforme as definições do Figma.

Para uma referência dos tamanhos dos breakpoints e viewports veja na aba de API

Código Figma
<div class="c-container">
  <div class="c-row">
    <div class="md:c-col-12">
      <div>Coluna 1</div>
    </div>
  </div>
  <div class="c-row">
    <div class="md:c-col-6">
      <div>Coluna 1</div>
    </div>
    <div class="md:c-col-6">
      <div>Coluna 2</div>
    </div>
  </div>
  <div class="c-row">
    <div class="md:c-col-4">
      <div>Coluna 1</div>
    </div>
    <div class="md:c-col-4">
      <div>Coluna 2</div>
    </div>
    <div class="md:c-col-4">
      <div>Coluna 3</div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Figma Mobile

# Largura Máxima

Para definir uma largura máxima para o container, temos hoje dois tamanhos definidos o lg e o xl e eles podem ser usados como modificadores do c-container.

Container LG Máximo de 1440px
Container XL Máximo de 1900px
Container Fluido 
<div class="c-container-lg">
  <div class="c-row">
    <div class="c-col">
      <div>
        Container LG Máximo de 1440px
      </div>
    </div>
  </div>
</div>
<div class="c-container-xl">
  <div class="c-row">
    <div class="c-col">
      <div>
        Container XL Máximo de 1900px
      </div>
    </div>
  </div>
</div>
<div class="c-container">
  <div class="c-row">
    <div class="c-col">
      <div>
        Container Fluido
      </div>
    </div>
  </div>
</div>

# Roadmap

Roadmap de melhorias para nosso grid:

  • Disponibilizar uma forma de as aplicações usarem as variáveis de media-query, ou os custom medias
  • Experimentar colunas utilizando unidades relativas ao tamanho da tela (vw, vmin, vmax)

# API

Para usar as classes do nosso Grid é preciso primeiro importar o estilos.

import '@estrategiahq/coruja-web-ui/dist/coruja-web-ui.css'
1

# Breakpoints e Containers

Aqui podemos ver nossos breakpoints e algumas informações sobre espaçamentos e larguras das colunas. Nosso Grid é feito pensando em Mobile First, onde inicia em 0px de tamanho de tela e vai crescendo seguindo os breakpoints, portanto todas as classes que compôem nosso Grid são configuradas para representar valores do Mobile caso não seja definido um breakpoint.

Nossas rows, não possuem espaçamento vertical entre sí. Caso deseje um espaçamento fixo entre as rows temos uma classe de c-auto-mb.


Breakpoints Larguras Espaçamentos Container Espaçamentos entre colunas
{sem breakpoint} Mobile
>= 0px <= 360px		 16px 24px
xs Mobile Small
>= 360px <= 768px		 24px 32px
sm Tablet
>= 768px <= 1024px		 16px 24px
md Desktop
>= 1024px <= 1440px		 112px 24px
lg Desktop Large
>= 1440px		 208px 24px

# Classes

Aqui temos todas as classes CSS que compôem nosso Grid. Todas elas respeitam o padrão de Mobile First, sendo totalmente voltadas ao Viewport de Mobile caso não seja passado o prefixo indicando o breakpoint ( sm: ). Assim como todas elas aceitam a definição do breakpoint por prefixo (menos c-container e c-row).

# Container

Temos 2 tipos de containers, do tipo fluido e com largura máxima definida. Por default a classe c-container é o nosso container fluido que vai crescer sem nenhum limite definido. Já os dois containers com limites c-container-lg e c-container-xl vão crescer até um determinado ponto.

ClassDescrição
c-containerContainer fluído, sem limite de largura
c-containe-lgContainer lg, limite de 1440px de largura
c-container-xlContainer xl, limite de 1900px de largura

# Principais

Classe Descrição
c-container wrapper da página, define os espaçamentos laterais e tamanho
c-row para cada linha do grid
c-col coluna com tamanho automatico
c-col-x coluna com tamanho X, onde mobile (até 2 colunas), tablet (até 6 colunas) e desktop (até 12)
c-offset-x empurra o conteúdo para a direita em X colunas, respeitando os mesmos numeros que o c-col-x

# Utilidades

Classe Descrição
c-col-full pega sempre 100% da row
c-col-1\2 pega sempre 50% da row
c-col-1\4 pega sempre 25% da row
c-center centraliza vertical e horizontalmente
c-vertical-center centraliza verticalmente
c-vertical-start alinha com a parte superior
c-vertical-end alinha com a parte inferior
c-horizontal-center centraliza horizontalmente
c-horizontal-start alinha com a esquerda
c-horizontal-end alinha com a direita
c-d-flex adiciona display flex
c-d-block adiciona display block
c-d-none adiciona display none