Utilities

Utilitários -

Classes ultracurtas para estilização instantânea no HTML. Inspiradas no Tailwind, adaptadas à escala Y2 Framework (1rem = 10px).

1. Display & Posição

Controla como o elemento é renderizado no flow do documento.

.blk
.non (hidden)
.flx
.grd
.inline
.rel
.abs
.fix
Classe CSS
.blk display: block
.non display: none
.flx display: flex
.grd display: grid
.inline display: inline-block
.rel position: relative
.abs position: absolute
.fix position: fixed

Combine classes para layouts flexíveis:

2. Tipografia

Tamanho, peso, alinhamento, transformação e decoração de texto.

Tamanhos - Escala PP-XXG

t-pp - 1.0rem (10px) - Micro label
t-p - 1.2rem (12px) - Caption
t-m - 1.4rem (14px) - Body small
t-g - 1.6rem (16px) - Body base
t-gg - 2.0rem (20px) - Subtitle
t-xg - 2.8rem (28px) - Heading
t-xxg - 4.0rem (40px) - Hero

Pesos

f-xlt (100) f-lt (300) f-re (400) f-m (500) f-sm (600) f-bd (700) f-xbd (800) f-bk (900)

Alinhamento & Transformação

.t-ct - center
.t-ri - right
.t-le - left
.t-upp - UPPERCASE
.t-low - lowercase
.t-cap - Capitalize

3. Espaçamento Semântico (PP - XXG)

Escala nomeada baseada em 1rem = 10px. Funciona em m-*, p-*, gap-*, e variantes direcionais.

pp
0.4rem = 4px
p
0.8rem = 8px
m
1.6rem = 16px
g
2.4rem = 24px
gg
4.8rem = 48px
xg
8.0rem = 80px
xxg
12.0rem = 120px
Prefixo Direção Exemplo
m-* Margin (todos os lados) m-g = margin: 2.4rem
mt-* / mb-* / ml-* / mr-* Margin direcional mb-m = margin-bottom: 1.6rem
mx-* / my-* Margin eixo mx-au = centralizar
p-* Padding (todos os lados) p-m = padding: 1.6rem
pt-* / pb-* / pl-* / pr-* Padding direcional pt-g = padding-top: 2.4rem
px-* / py-* Padding eixo py-m = padding vertical: 1.6rem
gap-* Gap (flex/grid) gap-g = gap: 2.4rem

4. Espaçamento Numérico (N = 4px)

Grade de 4px. Cada unidade = 0.4rem. Disponível em m-N, p-N, gap-N de 1 a 16.

1 = 4px
2 = 8px
3 = 12px
4 = 16px
6 = 24px
8 = 32px
10 = 40px
12 = 48px

5. Cores de Texto T{cor}{shade}

Cada família cromática tem shades 1-12 + opacidades 13-16. Use T maiúsculo + nome da cor + número.

Cores Semânticas

Tprin Tsecu Tsuce Tinfo Taler Tperi

Escala Cromática (exemplo: azul)

azul1 azul2 azul3 azul4 azul5 azul6 azul7 azul8 azul9 azul10 azul11 azul12

Use .T{cor}{1-12} para hierarquia visual fina:

Gradiente de Texto T{cor}D

TprinD TsecuD TvermD TverdD TazulD TgoldD TroxoD TrosaD

Use classes semânticas para intenção ou cromáticas para design fixo:

6. Cores de Fundo B{cor}{shade}

Mesma lógica de T{cor}, mas aplica background-color. O contraste do texto é calculado automaticamente.

Semânticos

Bprin
Bsecu
Bsuce
Binfo
Baler
Bperi

Escala cromática (verm 1?12)

verm1
verm2
verm3
verm4
verm5
verm6
verm7
verm8
verm9
verm10
verm11
verm12

Use .B{cor}{1-12} para controle tonal preciso:

Gradientes de Fundo B{cor}D

BprinD
BsecuD
BvermD
BverdD
BazulD
BroxoD

Opacidades & Glassmorphism B{cor}{13-16}

Shades 13 a 16 aplicam opacidades de 10%, 30%, 60% e 90% respectivamente.

13 (10%)
14 (30%)
15 (60%)
16 (90%)

Exemplos de fundos sólidos, gradientes e opacidades translúcidas:

7. Gradientes Decorativos DG1-DG20

20 gradientes pré-definidos para fundos de seção, cards e banners. Use .DG{n} ou a variante .dg{n} para background-image.

DG1
DG2
DG3
DG4
DG5
DG6
DG7
DG8
DG9
DG10
DG11
DG12
DG13
DG14
DG15
DG16
DG17
DG18
DG19
DG20

Aplique .DG{n} para fundo fixo ou .dg{n} para sobreposição de gradiente:

8. Dimensionamento w-* & h-*

Largura e altura rápidas. Disponíveis: fl (100%), v (100vw/vh), au (auto).

.w-fl (100%)
.w-au (auto)
.h-au (altura conteúdo)

Controle dimensões rápidas com wrappers limitadores:

Classe CSS
.w-fl width: 100%
.w-v width: 100vw
.w-au width: auto
.h-fl height: 100%
.h-v height: 100vh
.h-au height: auto
.max-w max-width: 100%

9. Efeitos UI

Overflow, cursor, opacidade e gradientes utilitários.

.poi (cursor pointer)
.op-5 (50%)
.op-1 (10%)
.bg-g-pri
.bg-g-suc
.bg-g-per
.bg-g-men

Z-index

Classe Valor Uso típico
.z-bot var(--y2-z-bot) Elemento atrás de tudo
.z-bas var(--y2-z-bas) Base (0)
.z-nvb var(--y2-z-nvb) Navbar / header fixo
.z-m var(--y2-z-m) Modal / overlay

Efeitos de borda, sombra e visibilidade:

10. Flex & Alinhamento

Controle completo de layout flexível - direção, alinhamento, wrap e grow.

justify-content

.j-st
.j-ct
.j-en
.j-sb
.j-se

align-items

.alc
.als
.ale
.alb base
Classe CSS
.flx display: flex
.f-cl flex-direction: column
.f-clr flex-direction: column-reverse
.f-rr flex-direction: row-reverse
.f-wr flex-wrap: wrap
.alc align-items: center
.als align-items: flex-start
.ale align-items: flex-end
.alb align-items: baseline
.alst align-items: stretch
.j-ct justify-content: center
.j-sb justify-content: space-between
.j-sp justify-content: space-around
.j-se justify-content: space-evenly
.j-st justify-content: flex-start
.j-en justify-content: flex-end
.as-ct align-self: center
.as-st align-self: flex-start
.as-en align-self: flex-end
.f-sh0 flex-shrink: 0
.ml-au margin-left: auto - empurra item para a direita

Quick Reference - Cheat Sheet

DISPLAY & POSIÇÃO

.blk .non .flx .grd .inline .rel .abs .fix

FLEX & ALINHAMENTO

.f-cl .f-clr .f-rr .f-wr .alc .als .ale .alb .alst .j-ct .j-sb .j-sp .j-se .j-st .j-en .as-ct .as-st .as-en .f-sh0 .ml-au

TIPOGRAFIA

.t-pp .t-p .t-m .t-g .t-gg .t-xg .t-xxg .f-xlt .f-lt .f-re .f-m .f-sm .f-bd .f-xbd .f-bk .t-ct .t-ri .t-le .t-ju .t-upp .t-low .t-cap .t-uln .t-rsk .t-no-dec .t-ital

ESPAÇAMENTO

.m-pp .m-p .m-m .m-g .m-gg .m-xg .m-xxg .mt- .mb- .ml- .mr- .mx- .my- .p-pp .p-p .p-m .p-g .p-gg .p-xg .p-xxg .pt- .pb- .pl- .pr- .px- .py- .gap-pp .gap-p .gap-m .gap-g .m-1.12 .p-1.12 .gap-1.16

CORES TEXTO

.Tprin .Tsecu .Tsuce .Tinfo .Taler .Tperi .T{cor}1 . .T{cor}12 .T{cor}D (gradiente) .Tmut .Tcla .Tnot

CORES FUNDO

.Bprin .Bsecu .Bsuce .Binfo .Baler .Bperi .B{cor}1 . .B{cor}12 .B{cor}13 . .B{cor}16 (opac) .B{cor}D (gradiente) .DG1.DG20 .dg1.dg20 .bg-g-pri .bg-g-suc .bg-g-per

BORDAS & EFEITOS

.bor .bor-t .bor-b .bor-l .bor-r .bor-0 .bor-1 .bor-2 .bor-4 .bor-s-sol .bor-s-das .bor-s-dot .r-p .r-m .r-g .r-gg .r-fl .sha-p .sha .sha-g .poi .op-5 .op-1 .ov-hi .ov-au .w-fl .w-v .w-au .h-fl .h-v .max-w .z-bot .z-bas .z-nvb .z-m

Utilitários Especializados

Bordas Detalhadas Sombras & Elevation Object-Fit Scale & Zooms