Example


Primary colour backgrounds

.bg--white

.bg--red

.bg--deep-violet

Secondary colour backgrounds

.bg--grey

.bg--coral

.bg--orange

.bg--yellow

.bg--green

.bg--blue

.bg--magenta

.bg--purple

.bg--teal

Secondary light colour backgrounds

.bg--light-grey

.bg--light-coral

.bg--light-orange

.bg--light-yellow

.bg--light-green

.bg--light-blue

.bg--light-magenta

.bg--light-purple

.bg--light-teal

Secondary dark colour backgrounds

.bg--dark-grey

.bg--dark-coral

.bg--orange

.bg--dark-yellow

.bg--dark-green

.bg--dark-blue

.bg--dark-magenta

.bg--dark-purple

.bg--dark-teal

Markup: background-colours.twig

<br/>
<br/>

<h3>Primary colour backgrounds</h3>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--white</p>

<div class="bg--red" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--red</p>

<div class="bg--deep-violet" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--deep-violet</p>


<h3>Secondary colour backgrounds</h3>
<div class="bg--grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--grey</p>

<div class="bg--coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--coral</p>

<div class="bg--orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--yellow</p>

<div class="bg--green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--green</p>

<div class="bg--blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--blue</p>

<div class="bg--magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--magenta</p>

<div class="bg--purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--purple</p>

<div class="bg--teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--teal</p>


<h3>Secondary light colour backgrounds</h3>
<div class="bg--light-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-grey</p>

<div class="bg--light-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-coral</p>

<div class="bg--light-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-orange</p>

<div class="bg--light-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-yellow</p>

<div class="bg--light-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-green</p>

<div class="bg--light-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-blue</p>

<div class="bg--light-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-magenta</p>

<div class="bg--light-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-purple</p>

<div class="bg--light-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-teal</p>


<h3>Secondary dark colour backgrounds</h3>
<div class="bg--dark-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-grey</p>

<div class="bg--dark-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-coral</p>

<div class="bg--dark-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--dark-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-yellow</p>

<div class="bg--dark-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-green</p>

<div class="bg--dark-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-blue</p>

<div class="bg--dark-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-magenta</p>

<div class="bg--dark-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-purple</p>

<div class="bg--dark-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-teal</p>
Source: _shop19-styleguide.scss, line 43