Sobre a `<body>`

Por padrão, a body do GainTime é colorida com a cor #AEBDCA. Dentre outros fatores, esta é uma maneira de o GainTime dizer "Olá Mundo!".

Default vs `.panel`

Nós pensamos em 2 modelos para a nossa body, e esses modelos determinam apenas como as section irão se comportar.

Default

A configuração padrão das section do GainTime, dentre outras propriedades, inclui o código abaixo, e você não precisa fazer nada para isso.

section
  
    box-shadow: unset
  
  
    margin: 0
  
  
    width: 100%

`.panel`

De outra maneira, se você adicionar a classe .panel à body, vai alterar o comportamento de todas as section, e o seguinte código fará a nova configuração:

section
  
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.06), 0 2px 5px 0 rgba(0,0,0,0.2)
  
  
    margin: 30px auto
  
  
    width: 90%

Esta implementação remete à primeira versão do GainTime que era focada apenas em painéis administrativos para websites.

.container

Se você desejar uma visualização como a do .panel em alguma section do Default, basta adicionar a classe .container à respectiva section.

GT top menu

Construímos um cabeçalho padrão para menus de navegação que é invocado pela classe .gt-top-menu. A apresentação dele é idêntica à do menu deste site, e deve seguir a seguinte construção:

<header class="gt-top-menu xs-left">
  <img src="assets/img/gaintime.png" alt="" />
  <label class="menu-toggle">
    <svg viewBox="0 0 24 24">
      <path fill="#333" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"></path>
    </svg>
  </label>
  <nav>
    <ul>
      <a href="."><li>Como começar</li></a>
      <a href="layouts"><li class="active">Layouts</li></a>
      <a href="components"><li>Componentes</li></a>
      <a href="forms"><li>Formulários</li></a>
      <a href="helpers"><li>Auxiliares</li></a>
    </ul>
  </nav>
</header>

Detalhes

A classe .gt-top-menu cria uma caixa #FFF devidamente estilizada e pronta para receber os elementos que compõem o nosso menu. Contudo, para que o menu seja responsivo é preciso adicionar uma das classes auxiliares que são explicadas abaixo.

.xs-left - O menu se mantém no formato mobile, sentido direita para esquerda, até 768px.
.sm-left - O menu se mantém no formato mobile, sentido direita para esquerda, até 992px.
.md-left - O menu se mantém no formato mobile, sentido direita para esquerda, até 1200px.
.lg-left - O menu se mantém sempre no formato mobile, sentido direita para esquerda.

.xs-right - O menu se mantém no formato mobile, sentido esquerda para direita, até 768px.
.sm-right - O menu se mantém no formato mobile, sentido esquerda para direita, até 992px.
.md-right - O menu se mantém no formato mobile, sentido esquerda para direita, até 1200px.
.lg-right - O menu se mantém sempre no formato mobile, sentido esquerda para direita.

`.menu-toggle`

A classe .menu-toggle é responsável por guardar o componente que dispara a abertura e o fechamento da versão mobile do menu. No nosso exemplo utilizamos um svg.

`.active`

Você pode utilizar a classe .active para destacar uma li. Normalmente utilizado para destacar o item que representa a página atual.

Menu Fixo

Para obter um menu que não acompanha o scroll da página, um menu fixo, basta adicionar a classe .fixed ao .gt-top-menu

        <header class="gt-top-menu xs-left fixed">
        ...
        </header>
      

Exemplo

Quando criamos um menu fixo, automaticamente, o elemento seguinte ficará atrás deste menu, e parte dele ficará encoberta. Para resolver isso, basta utilizar a classe .first no próximo elemento.

        <header class="gt-top-menu xs-left fixed">
        ...
        </header>
        <section class="first">
        ...
        </section>
      

Tabelas

Nós planegamos a classe .gt-table para estilizar as tabelas com um layout mais agradável.

Name	Email	Actions
Maria C.	maria@email.com	Edit Delete Show
Amanda C.	amanda@email.com	Edit Delete Show
Torne-se forte. :)

Tabela listrada

Para obter uma tabela listrada, basta adicionar a classe .striped.

Name	Email	Actions
Maria C.	maria@email.com	Edit Delete Show
Amanda C.	amanda@email.com	Edit Delete Show
Torne-se forte. :)

Tabela com hover

Adicionando a classe .hovered na table você vai obter um efeito de hover nas suas tbody > tr.

Name	Email	Actions
Maria C.	maria@email.com	Edit Delete Show
Amanda C.	amanda@email.com	Edit Delete Show
Torne-se forte. :)

<table class="gt-table striped hovered">
  <thead>
    ...
  </thead>
  <tbody class="text-center">
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Layouts

Sobre a <body>

Default vs .panel