Guia de Estilos
Guia de estilos baseado em Client First por finsweet
Containeres
Estilo
Exemplo
Classe ou Tag
main-wrapper
main-wrapper
<main> | .main-wrapper
Container dos elementos pricipais da página. Não contém os estilos globais, rodapés, e navegação.
Container dos elementos pricipais da página. Não contém os estilos globais, rodapés, e navegação.
padding-global
padding-global
<div> | .padding-global
filho de .main-wrapper aplica-se exclusivamente os preenchimentos laterais e verticais que determinam os limites do conteúdo da página.
filho de .main-wrapper aplica-se exclusivamente os preenchimentos laterais e verticais que determinam os limites do conteúdo da página.
section
.section_[seção]
<section> |
.section_[seção]
wrapper da seção da página. estilização é específico à seção.
.section_[seção]
wrapper da seção da página. estilização é específico à seção.
container
.container_[tipo]
<div> |
.container_[tipo do container]
área interior com estilização própria à seção em questão. Não há restrição em usar-se grade.
.container_[tipo do container]
área interior com estilização própria à seção em questão. Não há restrição em usar-se grade.
componente
separator
separator
.container_[tipo]
separator
.container_[tipo]
<div> | .separator
div vazio com todos os espaçamentos. inseridos dentro de seções ou containeres como modo rápido de customizar preenchimentos.
div vazio com todos os espaçamentos. inseridos dentro de seções ou containeres como modo rápido de customizar preenchimentos.
Containeres Úteis
Estilo
Exemplo
Classe ou Tag
componente
separator
separator
column
column
container-flex
linha no desktop
vertical no mobile
linha no desktop
vertical no mobile
componente
separator
separator
column
column
container-grid
linha no desktop
vertical no mobile
linha no desktop
vertical no mobile
Como empilhar as classes
Regra:
No máximo 3 combos da mesma categoria.
Exemplo: um container com padding vertical e gap grande.
.padding-spacer-2.padding-vertical ok
.padding-spacer-2.padding-vertical.gap-large não está ok
Com um fundo específico...
.padding-spacer-2.padding-vertical.gap-large.background-dark não está ok
Se não for possível colocar os estilos desejados no elemento mais geral ou em um wrapper, crie um elemento, componente, ou variação de componente para determinar os estilos desejados.
No máximo 3 combos da mesma categoria.
Exemplo: um container com padding vertical e gap grande.
.padding-spacer-2.padding-vertical ok
.padding-spacer-2.padding-vertical.gap-large não está ok
Com um fundo específico...
.padding-spacer-2.padding-vertical.gap-large.background-dark não está ok
Se não for possível colocar os estilos desejados no elemento mais geral ou em um wrapper, crie um elemento, componente, ou variação de componente para determinar os estilos desejados.
Como nomear as classes?
Regra:
Ir do Geral -> Específico
Por exemplo:
Seção-Elemento-Função.
Componente-Localização-Função
Por exemplo:
hero-container-column
indica que o elemento é um container de coluna da seção heróica.
cms-blog-wrapper
indica que é o wrapper do cms do blog.
blog_card-description-wrapper
indica que é o wrapper da descrição do componente cartão de blog.
product_card-description-price
indica que é o preço na descrição do cartão de produto.
background-color-prim
indica que a propriedade afetada é o fundo, especificamente a cor, e que a cor é a primária.
Quando um dos elementos do nome da classe tiver espaço use underline "_"
Não use abreviações. Seja específico.
Ir do Geral -> Específico
Por exemplo:
Seção-Elemento-Função.
Componente-Localização-Função
Por exemplo:
hero-container-column
indica que o elemento é um container de coluna da seção heróica.
cms-blog-wrapper
indica que é o wrapper do cms do blog.
blog_card-description-wrapper
indica que é o wrapper da descrição do componente cartão de blog.
product_card-description-price
indica que é o preço na descrição do cartão de produto.
background-color-prim
indica que a propriedade afetada é o fundo, especificamente a cor, e que a cor é a primária.
Quando um dos elementos do nome da classe tiver espaço use underline "_"
Não use abreviações. Seja específico.
Onde houver repetições use componentes
- Use em cartões, sinopses, cadastros e qualquer elemento que se repita na página ou entre páginas.
- Evite utilizar combos quando for possível usar variações de componentes.
- Crie novos componentes somente se houver diferenças em funções, como atributos ou funções customizadas.
- Use slots sempre que possível.
- Por exemplo: navegadores, cartões de produto, footers, global-styles, separadores, depoimentos, todos devem ser componentes.
- Procure evitar compartilhar variáveis entre componentes. Use a coleção de componentes para criar suas variáveis. Defina relações entre variáveis dos componentes para variáveis mais gerais.
- Evite utilizar combos quando for possível usar variações de componentes.
- Crie novos componentes somente se houver diferenças em funções, como atributos ou funções customizadas.
- Use slots sempre que possível.
- Por exemplo: navegadores, cartões de produto, footers, global-styles, separadores, depoimentos, todos devem ser componentes.
- Procure evitar compartilhar variáveis entre componentes. Use a coleção de componentes para criar suas variáveis. Defina relações entre variáveis dos componentes para variáveis mais gerais.
Preenchimento: Espaçamento
Estilo
Exemplo
Classe ou Tag
demo
padding: spacer-4
.padding-spacer-4
.padding-spacer-1_4
.padding-spacer-1_4
.padding-spacer-1_2
.padding-spacer-1_2
.padding-spacer-3_4
.padding-spacer-3_4
.padding-spacer-1
.padding-spacer-1
.padding-spacer-5_4
.padding-spacer-5_4
.padding-spacer-3_2
.padding-spacer-3_2
.padding-spacer-2
.padding-spacer-2
.padding-spacer-3
.padding-spacer-3
.padding-spacer-4
.padding-spacer-4
.padding-spacer-5
.padding-spacer-5
.padding-spacer-6
.padding-spacer-6
.padding-spacer-7
.padding-spacer-7
.padding-spacer-8
.padding-spacer-8
Preenchimento: Direção
As direções são determinadas pela classe combo que segue padding-[spacer-*]
Direção
Demo
Classe ou Tag
Top
.padding-top
Bottom
.padding-bottom
Left
.padding-left
Right
.padding-right
Vertical
.padding-vertical
Horizontal
.padding-horizontal
Top-Left
.padding-top-left
Top-Right
.padding-top-right
Bottom-Left
.padding-bottom-left
Bottom-Right
.padding-bottom-right
Not-Top
.padding-not-top
Not-Bottom
.padding-not-bottom
Not-Left
.padding-not-left
Not-Right
.padding-not-right
Gaps
Estilo
Exemplo
Classe ou Tag
smallest
.gap-smallest
small
.gap-small
tiny
.gap-tiny
regular
.gap-regular
large
.gap-large
huge
.gap-huge
Cabeçalhos (Manrope)
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Corpo (Plus Jakarta Sans)
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Tipografia
Estilo
Exemplo
Classe ou Tag
Base
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis dignissim tortor. Ut libero mi, efficitur at mi in, vestibulum sollicitudin tellus.
<body>
Smallest
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis dignissim tortor. Ut libero mi, efficitur at mi in, vestibulum sollicitudin tellus.
.text-smallest
Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis dignissim tortor. Ut libero mi, efficitur at mi in, vestibulum sollicitudin tellus.
.text-small
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis dignissim tortor. Ut libero mi, efficitur at mi in, vestibulum sollicitudin tellus.
.text-large
H0
Lorem ipsum...
.h0
H1
Lorem ipsum dolor sit amet
.h1 | <h1>
H2
Lorem ipsum dolor sit amet
.h2 | <h2>
H3
Lorem ipsum dolor sit amet
.h3 | <h3>
H4
Lorem ipsum dolor sit amet
.h4 | <h4>
H5
Lorem ipsum dolor sit amet
.h5 | <h5>
H6
Lorem ipsum dolor sit amet
.h6 | <h6>
Titular
Lorem ipsum...
.titular
Elementos de Texto
Estilo
Exemplo
Classe ou Tag
Parágrafos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
<p>
Citações
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
<blockquote>
Listas
- Lista 1
- Lista 2
- Lista3
<ul>
Listas Ordenadas
- Lista 1
- Lista 2
- Lista3
<ol>
Classes de Texto (Estilo)
Estilo
Exemplo
Classe ou Tag
Corte
Lorem ipsum dolor sit amet
text-dashed
Caps
Lorem ipsum dolor sit amet
text-capped
Ênfase
Lorem ipsum dolor sit amet
text-emphasized
Mutado
Lorem ipsum dolor sit amet
text-muted
Classes de Texto (Peso)
Estilo
Exemplo
Classe ou Tag
Leve
Lorem ipsum dolor sit amet
text-light
Normal
Lorem ipsum dolor sit amet
text-regular
Semi-negrito
Lorem ipsum dolor sit amet
text-semibold
Negrito
Lorem ipsum dolor sit amet
text-bold
Classes de Texto (Alinhamento)
Estilo
Exemplo
Classe ou Tag
Cor primária
Lorem ipsum dolor sit amet
text-color-prim
Cor secundária
Lorem ipsum dolor sit amet
text-color-sec
Cor terciária
Lorem ipsum dolor sit amet
text-color-terc
Negativo
Lorem ipsum dolor sit amet
text-color-negative
Classes de Texto (Cores)
Estilo
Exemplo
Classe ou Tag
Esquerda
Lorem ipsum dolor sit amet
text-aligned-left
Centro
Lorem ipsum dolor sit amet
text-aligned-center
Direita
Lorem ipsum dolor sit amet
text-aligned-right
Ícones
Estilo
Exemplo
Classe ou Tag
Pequeno
icon-wrapper
Médio
icon-wrapper-medium
Grande
icon-wrapper-large
Enorme
icon-wrapper-huge
Propriedades Úteis
.hide
display:none
display:none
.hide-on-tablet
display:none
display:none
.hide-on-mobile
display:none
display:none
.position-relative
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-none
align-center
(margin auto horizontal)
(margin auto horizontal)
z-index-0
z-index-1
z-index-2