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.

stile-intestazione-h1

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

stile-intestazione-h2

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

stile-intestazione-h3

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

stile-intestazione-h4

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

stile-intestazione-h5

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

stile-intestazione-h6

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

Classi di testo

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

Dimensioni del testo

dimensione testo grande

Ecco il vostro testo... Selezionate una parte qualsiasi del testo per accedere alla barra degli strumenti di formattazione.

dimensione testo-media

Ecco il vostro testo... Selezionate una parte qualsiasi del testo per accedere alla barra degli strumenti di formattazione.

dimensione del testo regolare

Ecco il vostro testo... Selezionate una parte qualsiasi del testo per accedere alla barra degli strumenti di formattazione.

dimensione del testo piccola

Ecco il vostro testo... Selezionate una parte qualsiasi del testo per accedere alla barra degli strumenti di formattazione.

dimensione del testo piccola

Ecco il vostro testo... Selezionate una parte qualsiasi del testo per accedere alla barra degli strumenti di formattazione.

Stili di testo

stile testo barrato

testo-stile-italico

stile testo-muto

stile testo-allcaps

stile testo-nowrap

collegamento in stile testo

testo-stile-citazione

Ecco il vostro testo... Selezionate una parte qualsiasi del testo per accedere alla barra degli strumenti di formattazione.

stile testo-2 linee

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

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 in grassetto

peso del testo-semibold

peso del testo medio

peso del testo-normale

peso del testo leggero

Allineamenti del testo

allineamento del testo a sinistra

allineamento del testo al centro

allineamento del testo a destra

Pulsanti

Sistema di classi combinate di pulsanti.

pulsante

Testo del pulsante

pulsante

è-piccolo

Testo del pulsante

pulsante

è-grande

Testo del pulsante

pulsante

è-secondario

Testo del pulsante

pulsante

è-testo

Testo del pulsante

pulsante

è-icona

Testo del pulsante

Colori

Gestire i colori di testo e di sfondo ricorrenti.

Colori del testo

testo-colore-primario

testo-colore-secondario

testo-colore-alternato

Colori di sfondo

colore di sfondo primario

stile testo barrato

testo-stile-italico

stile testo-muto

stile testo-allcaps

stile testo-nowrap

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-pieno-mobile-paesaggio

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

Icone

Unificare le dimensioni delle icone. altezza dell'icona imposta l'altezza delle icone. icona-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 overflow

puntatore-eventi-auto

puntatore-eventi-nessuno

strato

spaziatura-pulizia

allineare al centro

z-indice-1

z-indice-2

ereditare il colore

rapporto d'aspetto-quadrato

rapporto d'aspetto-ritratto

aspetto-rapporto-paesaggio

aspect-ratio-widescreen