Sections

As section filhas diretas da body são os elementos mais básicos do layout do GainTime, e os demais elementos, apesar de independentes, são baseados nelas.

A configuração padrão dessas section, dentre outras propriedades, inclui o código abaixo, e você não precisa fazer nada para isso. O efeito pode ser reproduzido em outras tags utilizando a classe .gt-section

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

Containers

A classe .container atribui uma aparência de segmentador de conteúdo semelhante ao da .gt-section, porém com uma característicac especial de limite.

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>
      <li><a href=".">Como começar</a></li>
      <li class="active"><a href="layouts">Layouts</a></li>
    </ul>
  </nav>
</header>
        

• .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

Exemplo

Footer

As footer não tem nenhuma estilização muito especial. Elas apenas seguem o padrão de espaçamento das section se forem filhas diretas da body ou de uma main.

Tabelas

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

Tabela listrada

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

Tabela com hover

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

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

Tipografia

Headings

Os headings seguem o padrão do HTML, exceto que, a tag h1, quando filha das tags article, aside, nav ou section, não tem seu tamanho reduzido.

Parágrafos

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Elementos Inline

Alteramos apenas o cursor do elemento attr, mas para que você tome conhecimento, seguem alguns elementos de texto inline, seus efeitos e funções.