Utilities

Background Jump to Source

Various background shades.

.u-bg-white
.u-bg-grey
.u-bg-river-bed
.u-bg-prussian-blue
.u-bg-black-squeeze
.u-bg-allports
.u-bg-green-haze
.u-bg-japanese-laurel
.u-bg-olive
.u-bg-rose-of-sharon
.u-bg-guardsman-red
.u-bg-tamarillo
.u-bg-fuzzy-wuzzy-brown
.u-bg-wisteria
.u-bg-white-light
.u-bg-grey-light
.u-bg-river-bed-light
.u-bg-prussian-blue-light
.u-bg-black-squeeze-light
.u-bg-allports-light
.u-bg-green-haze-light
.u-bg-japanese-laurel-light
.u-bg-olive-light
.u-bg-rose-of-sharon-light
.u-bg-guardsman-red-light
.u-bg-tamarillo-light
.u-bg-fuzzy-wuzzy-brown-light
.u-bg-wisteria-light
.u-bg-white-dark
.u-bg-grey-dark
.u-bg-river-bed-dark
.u-bg-prussian-blue-dark
.u-bg-black-squeeze-dark
.u-bg-allports-dark
.u-bg-green-haze-dark
.u-bg-japanese-laurel-dark
.u-bg-olive-dark
.u-bg-rose-of-sharon-dark
.u-bg-guardsman-red-dark
.u-bg-tamarillo-dark
.u-bg-fuzzy-wuzzy-brown-dark
.u-bg-wisteria-dark
Source 

<div class="l-grid l-grid--spaced">

  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-white">.u-bg-white</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-grey">.u-bg-grey</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-river-bed">.u-bg-river-bed</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-prussian-blue">.u-bg-prussian-blue</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-black-squeeze">.u-bg-black-squeeze</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-allports">.u-bg-allports</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-green-haze">.u-bg-green-haze</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-japanese-laurel">.u-bg-japanese-laurel</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-olive">.u-bg-olive</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-rose-of-sharon">.u-bg-rose-of-sharon</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-guardsman-red">.u-bg-guardsman-red</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-tamarillo">.u-bg-tamarillo</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-fuzzy-wuzzy-brown">.u-bg-fuzzy-wuzzy-brown</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-wisteria">.u-bg-wisteria</div></div>  

</div>

<div class="l-grid l-grid--spaced">

  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-white-light">.u-bg-white-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-grey-light">.u-bg-grey-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-river-bed-light">.u-bg-river-bed-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-prussian-blue-light">.u-bg-prussian-blue-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-black-squeeze-light">.u-bg-black-squeeze-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-allports-light">.u-bg-allports-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-green-haze-light">.u-bg-green-haze-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-japanese-laurel-light">.u-bg-japanese-laurel-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-olive-light">.u-bg-olive-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-rose-of-sharon-light">.u-bg-rose-of-sharon-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-guardsman-red-light">.u-bg-guardsman-red-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-tamarillo-light">.u-bg-tamarillo-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-fuzzy-wuzzy-brown-light">.u-bg-fuzzy-wuzzy-brown-light</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-wisteria-light">.u-bg-wisteria-light</div></div>  

</div>

<div class="l-grid l-grid--spaced">

  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-white-dark">.u-bg-white-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-grey-dark">.u-bg-grey-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-river-bed-dark">.u-bg-river-bed-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-prussian-blue-dark">.u-bg-prussian-blue-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-black-squeeze-dark">.u-bg-black-squeeze-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-allports-dark">.u-bg-allports-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-green-haze-dark">.u-bg-green-haze-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-japanese-laurel-dark">.u-bg-japanese-laurel-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-olive-dark">.u-bg-olive-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-rose-of-sharon-dark">.u-bg-rose-of-sharon-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-guardsman-red-dark">.u-bg-guardsman-red-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-tamarillo-dark">.u-bg-tamarillo-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-fuzzy-wuzzy-brown-dark">.u-bg-fuzzy-wuzzy-brown-dark</div></div>
  <div style="width: 196px; height: 196px;"><div class="sg-boxlet u-bg-wisteria-dark">.u-bg-wisteria-dark</div></div>  

</div>

Scrollable Jump to Source

Allows containers to scroll when the contents within exceed the container height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo consequat augue, molestie bibendum est malesuada ac. Quisque sollicitudin leo ornare odio porta elementum. Aliquam erat volutpat. Vivamus in blandit nunc. Nam vitae ultricies mauris. Mauris quis arcu vulputate, blandit elit ut, ultricies dui. Maecenas molestie porta metus, ut sodales urna maximus a. Pellentesque mattis posuere ex, sed pellentesque erat porttitor id.

Pellentesque semper, velit in dictum egestas, odio est lacinia augue, ut euismod metus ipsum id lorem. Nunc viverra pellentesque auctor. Donec in tempor nisl. Integer at bibendum massa. Sed eu augue felis. Sed id justo vulputate, dictum ante vehicula, feugiat sapien. Phasellus tempor nulla ac turpis semper varius.

Source 

<div style="width: 512px; height:256px; padding: 20px; background-color: #EEE;">
  <div class="u-scrollable">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo consequat augue, molestie bibendum est malesuada
    ac. Quisque sollicitudin leo ornare odio porta elementum. Aliquam erat volutpat. Vivamus in blandit nunc. Nam vitae
    ultricies mauris. Mauris quis arcu vulputate, blandit elit ut, ultricies dui. Maecenas molestie porta metus, ut sodales
    urna maximus a. Pellentesque mattis posuere ex, sed pellentesque erat porttitor id.</p>
    
    <p>Pellentesque semper, velit in dictum egestas, odio est lacinia augue, ut euismod metus ipsum id lorem. Nunc viverra
    pellentesque auctor. Donec in tempor nisl. Integer at bibendum massa. Sed eu augue felis. Sed id justo vulputate, dictum
    ante vehicula, feugiat sapien. Phasellus tempor nulla ac turpis semper varius.</p>
  </div>
</div>
Page Generated: Fri, Sep 10, 2021 at 10:56:44 AM