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.

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy