GainTime

Auxiliares

Algumas coisas em CSS são comuns no dia-a-dia do desenvolvimento, e achamos chato toda hora ter que voltar a escrevê-las. É por isso que montamos os auxiliares. :P

GA IN TI ME

Flutuadores

Use as classes left e right para dar um quick float em um elemento. !important é aplicado.

Corretor de altura

Quando usamos elementos flutuantes, o normal é que o elemento pai "se esqueça" dos filhos, e deixe de crescer em altura. Pois bem, para solucionar esse problema, trouxemos a classe .fix-height.

<div class="content-align fix-height success">
  <button class="btn left">Left</button>
  <button class="btn right>Right</button>
</div>
        

Centralizador de bloco

Com a classe .center, definimos que um elemento é um bloco (display: block), e colocamos ele no centro através de margin.

<div class="center danger" style="width: 50px">.....</div>
.....

Espaçamento

Padding

Vai ver, tudo o que aquele elemento precisa é de um .padding padrão. :P

Se você quiser apenas padding horizontal, utilize .padding-lr.

Se você quiser apenas padding vertical, utilize .padding-tb.

Também são válidos: padding-l, padding-r, padding-t, padding-b.

<div class="success padding" style="width: 50px">.....</div>
.....
.....
!!!!!!!!!!!!

Margin

Vai ver, tudo o que aquele elemento precisa é de um .margin padrão. :P

Se você quiser apenas margin horizontal, utilize .margin-lr.

Se você quiser apenas margin vertical, utilize .margin-tb.

Também são válidos: margin-l, margin-r, margin-t, margin-b.

<div class="success margin" style="width: 50px">.....</div>
.....
.....
!!!!!!!!!!!!

Ou...

Vai ver aquele elemento não precisa nem de padding, nem de margin. Aí você utiliza as classes .no-padding ou .no-margin.

Alinhador de conteúdo

A classe .content-align alinha todo o conteúdo diretamente ligado a ela (>) horizontalmente e verticamente. Provoca display: inline-block.

Bordas

Bom, você pode querer aplicar uma borda discreta. Se for isso, utilize a classe .border.

Modificadores de tamanho

Bom, essas classes vão tentar ampliar ou reduzir as coisas, mas tome cuidado, porque elas só trabalham com padding e font-size, o resto é com você. .sm, .lg.

Alinhadores de texto

Use .text-left para textos alinhados à esquerda.

Use .text-center para textos alinhados ao centro.

Use .text-right para textos alinhados à direita.

E por último, para textos justificados, você pode utilizar a classe .text-justify.

Truncator

Alguns textos precisam ser cortados antes mesmo de terminarem, e é pra isso que serve a nossa classe .truncate. Observe:

<div class="inform" style="max-width: 300px">
  <p class="truncate">
    Este é um texto muito longo e, por isso, deve ser truncado.
  </p>
</div>
        

Resultado

Este é um texto muito longo e, por isso, deve ser truncado.

Hover

Se quiser um efeito rápido de hover: .hoverable.