Les variables

Les variables modifiables en back-office

Les variables du thème sont définies dans _config.scss et sont régénérées automatiquement en modifiant les variables au sein du back-office dans le menu : Configuration —> Style graphique.

$font-title : typographie des titres.
$font_txt : typographie des textes.
$font_spe : typographie des textes alternatifs (surtitre, catégories,…).
$size_variation : 100 est la valeur par défaut. Elle définie le font-size en pourcentage sur la balise <html>.
$size_title : variante en pixel de la taille de font des titres.
$size_txt : variante en pixel de la taille de font des textes.
$size_spe : variante en pixel de la taille de font des textes alternatifs.
$color_main : couleur principale du site.
$color_sub : couleur secondaire du site.
$color_cta_bg : couleur de fond des boutons.
$size_radius : variation des borders-radius.

Les variables par défaut dans le thème

Les variables de couleur :

$c_txt : #454545; // Couleur du texte
$c_grey : #333333; // Gris
$c_light : #F2F2F2; // Gris très clair
$c_dark : #000000; // Noir
$c_lightgrey : #E5E5E5; // Gris clair
$c_greydark : #666666; // Gris foncé
$c_white : #FFFFFF; // Blanc
$c_nophoto : $color_main; // Couleur .no-photo
$c_red : #FF1A7B; // Rouge
$c_error : #E91741; // Rouge erreur
$c_disabled : rgba($c_txt, 0.35); // Couleur contenu indisponible

Les variables de taille de texte :

$s_h1 : 50px + $size_title; // Taille des titres H1
$s_h2 : 35px + $size_title; // Taille des titres H2
$s_h3 : 28px + $size_title; // Taille des titres H3
$s_h4 : 18px + $size_title; // Taille des titres H4
$s_p : 16px + $size_text; // Taille du texte
$s_alt : 16px + $size_alt; // Taille du texte alternatif
$s_cta : 15px + $size_text; // Taille des fonts des boutons
$s_link : 18px + $size_text; // Taille des liens

Les variables d’espacement

$max-width : 1120px; // La largeur du conteneur du site
$wrapper-small : 960px; // La largeur du conteneur small du site
$wrapper-extra-small : 850px; // La largeur du conteneur extra-small du site
$wrapper-wide : 1520px; // La largeur du conteneur large du site pour les écrans avec une résolution supérieure à 1600px
$border-gutter : 80px; // L’espacement entre le contenu et l’écran à 1280px
$content-gutter : 40px; // L’espacement entre les colonnes de la grille de contenu
$content-spacing : 80px; // L’espacement vertical entre deux blocs
$header-height : 90px; // La hauteur du header du site

Les variables de breakpoint

$breakpoint_wd : $wrapper-wide; // Par défaut à 1520px (pour les écrans avec une résolution supérieure à 1600px)
$breakpoint_paysage : 1024px; // Tablette en mode paysage
$breakpoint_portrait : 980px; // Tablette en mode portrait
$breakpoint_mo : 599px; // Mobile
$breakpoint_mo_small : 350px; // Mobile de petites tailles (iPhone5 / iPhone 5S…)