FC DiviChild

# Titoli

Lo stile dei titoli di Divi-Child è pensato per dare coerenza a questi elementi, pertanto prevede una scalatura univoca delle misure, che però è ovviamente overridabile.

Nei file _variables.scss sono presenti una serie di variabili che è possibile sovrascrivere per modificare la scalatura delle misure.
Di seguito le variabili riguardanti le misure dei titoli:

$title-1-xs: 1.7rem !default;
$title-1-sm: 1.8rem !default;
$title-1-md: 2rem !default;
$title-1-lg: 2.1rem !default;
$title-1-xl: 2.2rem !default;

$title-2-xs: 1.3rem !default;
$title-2-sm: 1.4rem !default;
$title-2-md: 1.5rem !default;
$title-2-lg: 1.6rem !default;
$title-2-xl: 1.7rem !default;

$title-3-xs: 1.06rem !default;
$title-3-sm: 1.07rem !default;
$title-3-md: 1.17rem !default;
$title-3-lg: 1.27rem !default;
$title-3-xl: 1.37rem !default;

$title-4-xs: 0.8rem !default;
$title-4-sm: 0.9rem !default;
$title-4-md: 1rem !default;
$title-4-lg: 1.1rem !default;
$title-4-xl: 1.2rem !default;

$title-5-xs: 0.63rem !default;
$title-5-sm: 0.73rem !default;
$title-5-md: 0.83rem !default;
$title-5-lg: 0.93rem !default;
$title-5-xl: 1.03rem !default;

$title-6-xs: 0.47rem !default;
$title-6-sm: 0.57rem !default;
$title-6-md: 0.67rem !default;
$title-6-lg: 0.87rem !default;
$title-6-xl: 0.97rem !default;

Come intuibile dalle variabili, sono ovviamente stati pensati sei gruppi di misure corrispondenti ai sei livelli di titolazione H di HTML.

Come è possibile vedere già dal nome delle variabili, ognuno dei sei blocchi è composto da cinque variabili corrispondenti ai breakpoint disponibili. Questo significa che in logica mobile first, se prendiamo ad esempio il livello 1 dei titoli, questo avrà la dimensione di 1.7rem fino al breakpoint "sm", punto nel quale diventerà 1.8rem e così via per il resto dei breakpoint.

# Override delle misure

Per sovrascrivere le misure dei vari livelli, laddove necessario, sarà sufficiente dichiarare le variabili da modificare con i nuovi valori nel file custom/_variables--override.scss.

# Classi standard per i titoli

Divi-Child prevede già delle classi standard per i titoli che è possibile vedere alla pagina Classi di questa documentazione.

# Classi e Mixins custom per i titoli

Per scrivere classi e mixin custom per i titoli è possibile importare le scalature standard utilizzando l'apposito mixin title_sizes($title_level,$title_sizes). Questo mixin è pensato per lavorare con le sei map generate attraverso le variabili di cui sopra. Le map delle scalature dei titoli hanno i seguenti nomi:

  • $title-1
  • $title-2
  • $title-3
  • $title-4
  • $title-5
  • $title-6

Ogni mappa ha la seguente struttura:

// Esempio di mappa per il livello 1
$title-1: (
  "xs": $title-1-xs,
  "sm": $title-1-sm,
  "md": $title-1-md,
  "lg": $title-1-lg,
  "xl": $title-1-xl,
);

Per creare ad esempio un mixin custom per un ipotetico livello 1 dei titoli si può procedere nel seguente modo:

@mixin title_1() {
    // Qui lo stile personalizzato
    @include title_sizes(1,$title-1)
}

← Borders →