Emmaboshi - Pattern library

Breakpoint e griglia

I layout si adattano sulla base di sette media query. Tutti i template utilizzano delle griglie regolari per definire gli spazi dei singoli componenti. Il numero di colonne varia in base al viewport. Anche lo spazio tra le colonne (gutter) cambia sulla base dei viewport.

Viewport name min-width Template columns Gutter
mobile 320 6 10
mobilewide 550 10 25
tablet 768 10 20
desktop 1024 10 20
bigdesk 1200 10 40
wide 1366 14 35
fullhd 1920 14 40

Classi di utility

Alcune classi di utility per sovrascrivere comportamenti CSS.

Font

Classe Descrizione
.u-font-serif font Canela-Light
.u-font-sans font National Book
.u-font-sans-italic font National Italic
.u-font-sans-bold font National Bold
.u-font-sans-bold-italic font National Bold Italic
.u-font-normal font-weight normal
.u-font-medium font-weight medium
.u-font-bold font-weight bold

Typography

Classe Descrizione
.u-align-left testo allineato a bandiera a sinistra
.u-align-right testo allineato a bandiera a destra
.u-text-xs dimensione del testo: px(11)
.u-text-s dimensione del testo: px(15)
.u-text-m dimensione del testo: px(20)
.u-text-l dimensione del testo: px(25)
.u-text-xl dimensione del testo: px(30)
.u-text-xxl dimensione del testo: px(40)

Visibility

Classe Descrizione
.u-hidden-m elemento nascosto solo in mobile
.u-hidden-t elemento nascosto solo in tablet
.u-hidden-d elemento nascosto solo in desktop
.u-hidden-w elemento nascosto solo in wide
.u-hidden-l elemento nascosto da tablet in su

Others

Classe Descrizione
.u-listreset resetta l’elenco puntato di default, togliendo i pallini e le spaziature
.u-disabled disabilita l’elemento
.u-nowrap evita che un elemento vada a capo
.u-rm-margin-top rimuove il margin-top