Client-First - Versione 2.1

Guida allo stile

Client-First è un insieme di linee guida e strategie create da Finsweet per aiutarvi a costruire siti Webflow.

Struttura Classi

Struttura di base definita e flessibile che possiamo utilizzare su tutte o sulla maggior parte delle pagine.

pagina-avvolgitore
involucro principale
contenitore-piccolo
contenitore-medio
contenitore-grande
imbottitura globale
imbottitura-sezione-piccola
imbottitura-sezione-media
imbottitura-sezione-grande
gruppo di pulsanti

Titoli

I tag HTML definiscono gli stili di intestazione predefiniti. Usare le classi di intestazione quando lo stile tipografico non corrisponde al tag HTML predefinito.

H1

Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto.

stile-intestazione-h1

Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto.

H2

Il testo di esempio viene utilizzato come segnaposto. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale.

stile-intestazione-h2

Il testo di esempio viene utilizzato come segnaposto. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale.

H3

Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.

stile-intestazione-h3

Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.

H4

Il testo di esempio viene utilizzato come segnaposto. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.

stile-intestazione-h4

Il testo di esempio viene utilizzato come segnaposto. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.

H5
Il testo di esempio viene utilizzato come segnaposto. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale.
stile-intestazione-h5
Il testo di esempio viene utilizzato come segnaposto. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale.
H6
Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come può apparire il testo reale.
stile-intestazione-h6
Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come può apparire il testo reale.

Altri tag HTML

I tag HTML definiscono gli stili di testo predefiniti.

Tutti i paragrafi

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale.

Tutti i link
Tutti i link
Tutte le citazioni
Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web.
Tutti gli elenchi ordinati
  1. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  2. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  3. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
Tutti gli elenchi non ordinati
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.

Classi di testo

Classi di testo quando lo stile tipografico non corrisponde al tag HTML predefinito.

Dimensioni del testo

dimensione testo grande

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.

dimensione testo-media

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente sul vostro sito web.

dimensione del testo regolare

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web.

dimensione del testo piccola

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente sul vostro sito web. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web.

dimensione del testo piccola

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente sul vostro sito web. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web.

Stili di testo

stile testo barrato

stile testo barrato

testo-stile-italico

testo-stile-italico

stile testo-muto

stile testo-muto

stile testo-allcaps

stile testo-allcaps

stile testo-nowrap

stile testo-nowrap

collegamento in stile testo

collegamento in stile testo

testo-stile-citazione

Il testo di esempio viene utilizzato come segnaposto.

stile testo-2 linee
Questo stile CSS non è supportato per i testi ricchi su iOS.

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale stile testo-2 linee

stile testo-3 linee
Questo stile CSS non è supportato per i testi ricchi su iOS.

Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come può apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale.

Pesi del testo

peso del testo-xbold
peso del testo-xbold
peso del testo in grassetto
peso del testo in grassetto
peso del testo-semibold
peso del testo-semibold
peso del testo medio
peso del testo medio
peso del testo-normale
peso del testo-normale
peso del testo leggero
peso del testo leggero

Allineamenti del testo

allineamento del testo a sinistra
allineamento del testo a sinistra
allineamento del testo al centro
allineamento del testo al centro
allineamento del testo a destra
allineamento del testo a destra

Pulsanti

Sistema di classi combinate di pulsanti.

pulsante
Testo del pulsante
pulsante
è-medio
Testo del pulsante
pulsante
è-grande
Testo del pulsante
pulsante
è-jade
Testo del pulsante
pulsante
è-bianco
Testo del pulsante
pulsante
è-testo
Testo del pulsante
pulsante
è-testo
Testo del pulsante

Colori

Gestire i colori di testo e di sfondo ricorrenti.

Colori del testo

testo-colore-primario
testo-colore-primario
testo-colore-secondario
testo-colore-secondario
testo-colore-alternato
testo-colore-alternato

Colori di sfondo

colore di sfondo primario
colore di sfondo secondario
colore di sfondo terziario
colore di sfondo alternato

Larghezze massime

Utilizzare la proprietà CSS max-width per contenere il contenuto interno a una larghezza massima.

larghezza massima piena
larghezza massima del tablet
max-larghezza-piena-mobile-ritratto
max-larghezza-piena-mobile-landscape
max-larghezza-xxlarge
max-larghezza-xlarge
max-larghezza-grande
larghezza massima-media
max-larghezza-piccola
max-larghezza-xsmall
max-larghezza-xxpiccola

Imbottiture

Sistema di spaziatura di utilità - classi di padding. [padding-direction] + [padding-size].

Classi di direzione

padding-bottom
imbottitura-top
padding-verticale
imbottitura orizzontale
padding-sinistra
padding-destra

Classi di dimensione

imbottitura-0
imbottitura-minuscola
imbottitura-xxpiccola
imbottitura-xpiccolo
imbottitura-piccola
imbottitura-media
imbottitura-grande
imbottitura-xlarge
imbottitura-xxlarge
imbottitura-ingombro
imbottitura-xhuge
imbottitura-xxhuge
imbottitura-custom1
imbottitura-custom2
imbottitura-custom3

Margini

Sistema di spaziatura di utilità - classi di padding. [margin-direction] + [margin-size].

Classi di direzione

margine inferiore
margine superiore
margine-verticale
margine orizzontale
margine-sinistra
margine destro

Classi di dimensione

margine-0
margine-minuscolo
margine-xxpiccolo
margine-xpiccolo
margine-piccolo
margine-medio
margine-grande
margine-xlarge
margine-xxlarge
margine-ingente
margine-xhuge
margine-xxhuge
margine-custom1
margine-custom2
margine-custom3

Distanziatori

Sistema di distanziatori unificato per il progetto.

distanziatore-minuscolo
distanziatore-xxpiccolo
distanziatore-xpiccolo
distanziatore-piccolo
distanziatore medio
distanziatore grande
distanziatore-xlarge
distanziatore-xxlarge
distanziatore-grande
distanziatore-xhuge
distanziatore-xxhuge

Icone

Unifica le dimensioni delle icone. icon-height imposta l'altezza delle icone. icon-1x1 imposta sia l'altezza che la larghezza delle icone.

icona-altezza-piccola
icona-altezza-media
icona-altezza-grande
icona-1x1-piccola
icona-1x1-media
icona-1x1-grande

Sistemi di utilità utili

Classi di utilità che ci piace usare nella maggior parte dei nostri progetti per costruire più velocemente.

nascondersi
Questo elemento è nascosto
nascondi-tablet
nascondi-mobile-ritratto
nascondi-mobile-paesaggio
overflow-visibile
overflow-nascosto
overflow-auto
scorrimento del flusso eccessivo
puntatore-eventi-auto
puntatore-eventi-nessuno
strato
spaziatura-pulito
allineare al centro
z-indice-1
z-indice-2
display-inlineflex
ereditare il colore
rapporto d'aspetto-quadrato
rapporto d'aspetto-ritratto
aspetto-rapporto-paesaggio
aspect-ratio-widescreen

Elementi del flusso web

Elementi Webflow nativi con classi Client-First applicate.

componente_forma

Esempio di componente di un modulo che utilizza le cartelle

Grazie! Il vostro invio è stato ricevuto!
Oops! Qualcosa è andato storto durante l'invio del modulo.
testo-ricco-testo

Rubrica 1

Rubrica 2

Rubrica 3

Rubrica 4

Rubrica 5
Rubrica 6

Il testo di esempio con un link viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale.

  • Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  1. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  2. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
  3. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente. Il testo di esempio aiuta a capire come potrebbe apparire il testo reale sul vostro sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale normalmente presente.
componente_navigazione