Project guideline

variables.scss

$bold: 700;
$light: 300;
$brand-secondary: #CD5334;

// taille de la gouttière
$grid-gutter-width: 20px;
// taille du container desktop
$container-large-desktop: 1144px + $grid-gutter-width;

// arrondi des boutons, champs, etc
$border-radius-small: 1px;
$border-radius-base: 2px;
$border-radius-large: 3px;

// couleurs
$body-bg: #FFF;
$brand-primary: #03afba;
// couleur d'un séparateur
$hr-border: $gray-lighter;

// les fameux 5 gris
$gray-darker: #222;
$gray-dark: #555;
$gray: #999;
$gray-light: #CCC;
$gray-lighter: #F0F0F0;

// couleurs texte, liens, rollover, titres, formulaire
$text-color: $gray-dark;
$link-color: $brand-primary;
$link-hover-color: $brand-primary;
$headings-color: $gray-darker;
$input-color: $gray-dark;

// background des zones de texte
$input-bg: $gray-lighter;
// contour des zones de texte
$input-border: $gray-dark;
// contour des zones de texte au focus (quand on clique dessus)
$input-border-focus: $brand-primary;

// typo
$font-family-sans-serif: Arial, sans-serif;
$headings-font-family: 'Roboto', $font-family-sans-serif;
$headings-font-weight: $bold;

$font-size-base: 15px;
$font-size-large: 18px;
$font-size-small: 12px;

$font-size-h1: 36px;
$font-size-h2: 22px;
$font-size-h3: 20px;
$font-size-h4: 18px;
$font-size-h5: $font-size-base;
$font-size-h6: $font-size-small;

// séparateur entre chaque élément du fil d'ariane
$breadcrumb-separator: ">";