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-menthe
$color-menthe
#dbede4

bg-blanc
$color-blanc
#ffffff

bg-noir
$color-noir
#000000

bg-texture
Textured background

Couleurs modifiées

bg-vert-lime
$color-vert-lime
#c8dc5f

bg-vert-sauge
$color-vert-sauge
#7ea88b

bg-bleu-emeraude
$color-bleu-emeraude
#2a8b9a

bg-creme
$color-creme
#ebe8db

bg-creme-pale
$color-creme-pale
#f3f2ed

bg-sable
$color-sable
#e2cca0

bg-orange
$color-orange
#f89844

Nouvelles couleurs

bg-humain
$color-humain
#fedbb4

bg-ancre
$color-ancre
#5a422f

bg-temporel
$color-temporel
#b18e62

bg-expertise
$color-expertise
#20294e

bg-espoir
$color-espoir
#8ac2c5

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-menthe">
  <div class="kss-swatch__hex"><strong>bg-menthe</strong><br>$color-menthe<br>#dbede4</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" style="background-image: url('../assets/bg_cascades.jpg'); background-size: cover;">
  <div class="kss-swatch__hex"><strong>bg-texture</strong><br>Textured background<br><br></div>
</div>
<h3>Couleurs modifiées</h3>
<div class="kss-swatch bg-vert-lime">
  <div class="kss-swatch__hex"><strong>bg-vert-lime</strong><br>$color-vert-lime<br>#c8dc5f</div>
</div>
<div class="kss-swatch bg-vert-sauge">
  <div class="kss-swatch__hex"><strong>bg-vert-sauge</strong><br>$color-vert-sauge<br>#7ea88b</div>
</div>
<div class="kss-swatch bg-bleu-emeraude">
  <div class="kss-swatch__hex"><strong>bg-bleu-emeraude</strong><br>$color-bleu-emeraude<br>#2a8b9a</div>
</div>
<div class="kss-swatch bg-creme">
  <div class="kss-swatch__hex"><strong>bg-creme</strong><br>$color-creme<br>#ebe8db</div>
</div>
<div class="kss-swatch bg-creme-pale">
  <div class="kss-swatch__hex"><strong>bg-creme-pale</strong><br>$color-creme-pale<br>#f3f2ed</div>
</div>
<div class="kss-swatch bg-sable">
  <div class="kss-swatch__hex"><strong>bg-sable</strong><br>$color-sable<br>#e2cca0</div>
</div>
<div class="kss-swatch bg-orange">
  <div class="kss-swatch__hex"><strong>bg-orange</strong><br>$color-orange<br>#f89844</div>
</div>
<h3>Nouvelles couleurs</h3>
<div class="kss-swatch bg-humain">
  <div class="kss-swatch__hex"><strong>bg-humain</strong><br>$color-humain<br>#fedbb4</div>
</div>
<div class="kss-swatch bg-ancre">
  <div class="kss-swatch__hex"><strong>bg-ancre</strong><br>$color-ancre<br>#5a422f</div>
</div>
<div class="kss-swatch bg-temporel">
  <div class="kss-swatch__hex"><strong>bg-temporel</strong><br>$color-temporel<br>#b18e62</div>
</div>
<div class="kss-swatch bg-expertise">
  <div class="kss-swatch__hex"><strong>bg-expertise</strong><br>$color-expertise<br>#20294e</div>
</div>
<div class="kss-swatch bg-espoir">
  <div class="kss-swatch__hex"><strong>bg-espoir</strong><br>$color-espoir<br>#8ac2c5</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>