Tipografia

Misure font

Nei casi in cui l'attribuzione di un font size è dubbia perché lasciata all'editore in generale, tranne su qualche blocco della home e nel block grid dove la misura di default è 14px, non si è assegnata una misura, i testi risulteranno quindi a 1rem (16) misura base.

In ogni caso misure custom possono essere assegnate a titoli e testo tramite style in linea e classi,
Classi disponibili per font-size:
Classi font size bootstrap
classi font size custom per il sito:

classe size
.cfs-small 14px
.cfs-default 16px
.cfs-medium 18px
.cfs-big 20px
.cfs-bigger 24px

Per gestire eventuali cambi di misura su desktop è disponibile un altro set di classi che si attiva a 1280px (xl) di larghezza schermo:

classe size
.cfs-xl-small 14px
.cfs-xl-default 16px
.cfs-xl-medium 18px
.cfs-l-big 22px
.cfs-xl-bigger 24px

Sono inoltre disponibili le seguenti classi, con la stessa logica:

classe size
.ch1 24px
.ch2 22px
.ch3 20px
.ch4 18px
classe size
.ch1-xl 50px
.ch2-xl 40px
.ch3-xl 28px
.ch4-xl 26px

Test stili entry content - testi in generale

Titolo 1

Titolo 2

Titolo 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Duis aute irure dolor in reprehenderit
  • in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  1. Duis aute irure dolor in reprehenderit
  2. in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Stili liste custom:

  • Duis aute irure dolor in reprehenderit
  • in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Test stili entry content con class font size custom (14px mobile - 18px desktop)

Titolo 1

Titolo 2

Titolo 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Duis aute irure dolor in reprehenderit
  • in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1. Duis aute irure dolor in reprehenderit
  2. in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Stili liste custom:

  • Duis aute irure dolor in reprehenderit
  • in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Allineamento

Su pagine,sezioni e blocchi i titoli e i test hanno allinementi di default, è possibile modificarli tramite le classi bootstrap: Classi allinemento testo

Gestione spaziature tra sezioni e blocchi

È stata assegnata una spaziatura regolare tramite padding o margin bottom a sezioni e blocchi

Regole di spaziatura

  • Sezioni e blocchi con campitura colore hanno classe aggiuntiva: .color
  • Le spaziature tra sezioni e blocchi possono essere modificate tramite le classi di spaziatura bootstrap.
    Si agisce principalmente sul padding,
    per sezioni e blocchi con class .color si può agire anche sul margin-bottom (.mb-*).
    Il caso più comune è quello dell'eliminazione dello spazio tra sezioni / blocchi (classi bootstrap py-0 o pb-0, my-0 0 mb-0)

Assegnazione colore e altre classi a sezioni e blocchi

Classi colore, stili in linea e snippet css per la gestione del colore e della spaziatura possono essere assegnate su sezioni e blocchi.
In alcuni blocchi l'assegnazione va fatta sul block-container.container e non sul .block, i blocchi in questione sono:

  • .block-products-grid,
  • .block-tabs,
  • .block-composizione,
  • .block-grid (quando non è inserito nel block-tabs)
  • .block-onecaption