Style Guide

Colors

All Sass color variables prefixed with $color-. This makes it easy to figure out what a variable is for later.

Use .bg- class name to control your background color.

Primary

.bg-vert-cascades
$color-vert-cascades
#00483c

.bg-vert-pale
$color-vert-pale
#0f774b

.bg-vert-lime
$color-vert-lime
#bbc406

.bg-vert-pomme
$color-vert-pomme
#84bd00

.bg-bleu-recyclage
$color-bleu-recyclage
#0064a8

.bg-bleu-emeraude
$color-bleu-emeraude
#006c81

.bg-bleu-profond
$color-bleu-profond
#254252

.bg-menthe
$color-menthe
#dbede4

.bg-bleu-pastel
$color-bleu-pastel
#b2dddf

.bg-creme
$color-creme
#eceae6

.bg-creme-pale
$color-creme-pale
#f6f5f2

.bg-sable
$color-sable
#f1e8df

.bg-rouge-rouille
$color-rouge-rouille
#cc472b

.bg-orange
$color-orange
#ff8400

.bg-gris-chaud
$color-gris-chaud
#b9bab2

.bg-blanc
$color-blanc
#ffffff

.bg-noir
$color-noir
#000000

.bg-aqua
$color-aqua
#2cd5c4

.bg-jaune
$color-jaune
#ffbf3f

.bg-texture
Textured background

Markup Details

                            <h3>Primary</h3>
<div class="kss-swatch bg-vert-cascades">
  <div class="kss-swatch__hex"><strong>.bg-vert-cascades</strong><br>$color-vert-cascades<br>#00483c</div>
</div>
<div class="kss-swatch bg-vert-pale">
  <div class="kss-swatch__hex"><strong>.bg-vert-pale</strong><br>$color-vert-pale<br>#0f774b</div>
</div>
<div class="kss-swatch bg-vert-lime">
  <div class="kss-swatch__hex"><strong>.bg-vert-lime</strong><br>$color-vert-lime<br>#bbc406</div>
</div>
<div class="kss-swatch bg-vert-pomme">
  <div class="kss-swatch__hex"><strong>.bg-vert-pomme</strong><br>$color-vert-pomme<br>#84bd00</div>
</div>
<div class="kss-swatch bg-bleu-recyclage">
  <div class="kss-swatch__hex"><strong>.bg-bleu-recyclage</strong><br>$color-bleu-recyclage<br>#0064a8</div>
</div>
<div class="kss-swatch bg-bleu-emeraude">
  <div class="kss-swatch__hex"><strong>.bg-bleu-emeraude</strong><br>$color-bleu-emeraude<br>#006c81</div>
</div>
<div class="kss-swatch bg-bleu-profond">
  <div class="kss-swatch__hex"><strong>.bg-bleu-profond</strong><br>$color-bleu-profond<br>#254252</div>
</div>
<div class="kss-swatch bg-menthe">
  <div class="kss-swatch__hex"><strong>.bg-menthe</strong><br>$color-menthe<br>#dbede4</div>
</div>
<div class="kss-swatch bg-bleu-pastel">
  <div class="kss-swatch__hex"><strong>.bg-bleu-pastel</strong><br>$color-bleu-pastel<br>#b2dddf</div>
</div>
<div class="kss-swatch bg-creme">
  <div class="kss-swatch__hex"><strong>.bg-creme</strong><br>$color-creme<br>#eceae6</div>
</div>
<div class="kss-swatch bg-creme-pale">
  <div class="kss-swatch__hex"><strong>.bg-creme-pale</strong><br>$color-creme-pale<br>#f6f5f2</div>
</div>
<div class="kss-swatch bg-sable">
  <div class="kss-swatch__hex"><strong>.bg-sable</strong><br>$color-sable<br>#f1e8df</div>
</div>
<div class="kss-swatch bg-rouge-rouille">
  <div class="kss-swatch__hex"><strong>.bg-rouge-rouille</strong><br>$color-rouge-rouille<br>#cc472b</div>
</div>
<div class="kss-swatch bg-orange">
  <div class="kss-swatch__hex"><strong>.bg-orange</strong><br>$color-orange<br>#ff8400</div>
</div>
<div class="kss-swatch bg-gris-chaud">
  <div class="kss-swatch__hex"><strong>.bg-gris-chaud</strong><br>$color-gris-chaud<br>#b9bab2</div>
</div>
<div class="kss-swatch bg-blanc">
  <div class="kss-swatch__hex"><strong>.bg-blanc</strong><br>$color-blanc<br>#ffffff</div>
</div>
<div class="kss-swatch bg-noir">
  <div class="kss-swatch__hex"><strong>.bg-noir</strong><br>$color-noir<br>#000000</div>
</div>
<div class="kss-swatch bg-aqua">
  <div class="kss-swatch__hex"><strong>.bg-aqua</strong><br>$color-aqua<br>#2cd5c4</div>
</div>
<div class="kss-swatch bg-jaune">
  <div class="kss-swatch__hex"><strong>.bg-jaune</strong><br>$color-jaune<br>#ffbf3f</div>
</div>
<div class="kss-swatch bg-texture">
  <div class="kss-swatch__hex"><strong>.bg-texture</strong><br>Textured background</div>
</div>
</div>

Lorem ipsum dolor sit amet, nobis molestie ornare donec, at quia mi. Sagittis rutrum, sodales ut quis, id felis vitae. Vitae proin nibh laoreet, dolor sunt feugiat vel sed vulputate nulla. Tempor dolor malesuada, id velit id ultricies eget posuere mauris, malesuada ultrices imperdiet dui vivamus class, per wisi aliquam in dignissim sit tortor. Nisl enim lobortis massa auctor tincidunt. Commodo arcu, est tellus donec, wisi elementum voluptatem cursus, libero fusce. Velit leo lectus mattis elit, turpis blandit.

Grid container medium

Grid container large

Grid container full

Grid container full mobile only

Markup Details

                            <h3 class="">Grid container small</h3>
<hr>
<div class="grid-container-small p-5 mb-5 bg-bleu-profond">
  <p class="text-blanc">Lorem ipsum dolor sit amet, nobis molestie ornare donec, at quia mi. Sagittis rutrum, sodales ut quis, id felis vitae. Vitae proin nibh laoreet, dolor sunt feugiat vel sed vulputate nulla. Tempor dolor malesuada, id velit id ultricies eget posuere mauris, malesuada ultrices imperdiet dui vivamus class, per wisi aliquam in dignissim sit tortor. Nisl enim lobortis massa auctor tincidunt. Commodo arcu, est tellus donec, wisi elementum voluptatem cursus, libero fusce. Velit leo lectus mattis elit, turpis blandit.</p>
</div>
<h3 class="">Grid container medium</h3>
<hr>
<div class="grid-container-medium p-5 mb-5 bg-bleu-profond">
  <p class="text-blanc">Lorem ipsum dolor sit amet, nobis molestie ornare donec, at quia mi. Sagittis rutrum, sodales ut quis, id felis vitae. Vitae proin nibh laoreet, dolor sunt feugiat vel sed vulputate nulla. Tempor dolor malesuada, id velit id ultricies eget posuere mauris, malesuada ultrices imperdiet dui vivamus class, per wisi aliquam in dignissim sit tortor. Nisl enim lobortis massa auctor tincidunt. Commodo arcu, est tellus donec, wisi elementum voluptatem cursus, libero fusce. Velit leo lectus mattis elit, turpis blandit.</p>
</div>
<h3 class="">Grid container large</h3>
<hr>
<div class="grid-container-large p-5 mb-5 bg-bleu-profond">
  <p class="text-blanc">Lorem ipsum dolor sit amet, nobis molestie ornare donec, at quia mi. Sagittis rutrum, sodales ut quis, id felis vitae. Vitae proin nibh laoreet, dolor sunt feugiat vel sed vulputate nulla. Tempor dolor malesuada, id velit id ultricies eget posuere mauris, malesuada ultrices imperdiet dui vivamus class, per wisi aliquam in dignissim sit tortor. Nisl enim lobortis massa auctor tincidunt. Commodo arcu, est tellus donec, wisi elementum voluptatem cursus, libero fusce. Velit leo lectus mattis elit, turpis blandit.</p>
</div>
<h3 class="">Grid container full</h3>
<hr>
<div class="grid-container-full p-5 mb-5 bg-bleu-profond">
  <p class="text-blanc">Lorem ipsum dolor sit amet, nobis molestie ornare donec, at quia mi. Sagittis rutrum, sodales ut quis, id felis vitae. Vitae proin nibh laoreet, dolor sunt feugiat vel sed vulputate nulla. Tempor dolor malesuada, id velit id ultricies eget posuere mauris, malesuada ultrices imperdiet dui vivamus class, per wisi aliquam in dignissim sit tortor. Nisl enim lobortis massa auctor tincidunt. Commodo arcu, est tellus donec, wisi elementum voluptatem cursus, libero fusce. Velit leo lectus mattis elit, turpis blandit.</p>
</div>
<h3 class="">Grid container full mobile only</h3>
<hr>
<div class="grid-container--full-mobile p-5 mb-5 bg-bleu-profond">
  <p class="text-blanc">Lorem ipsum dolor sit amet, nobis molestie ornare donec, at quia mi. Sagittis rutrum, sodales ut quis, id felis vitae. Vitae proin nibh laoreet, dolor sunt feugiat vel sed vulputate nulla. Tempor dolor malesuada, id velit id ultricies eget posuere mauris, malesuada ultrices imperdiet dui vivamus class, per wisi aliquam in dignissim sit tortor. Nisl enim lobortis massa auctor tincidunt. Commodo arcu, est tellus donec, wisi elementum voluptatem cursus, libero fusce. Velit leo lectus mattis elit, turpis blandit.</p>
</div>