Texture

How the surface quality of our backgrounds look.


How we design it

  • Texture can be used with background colours.

How it looks

To change to a different texture, include the getTexture mixin and define the texture you require, or use a utility class.

Add a gritty background texture

View demo Open in new window
320 x 568
View code
<div class="gg-u-texture-gritty gg-t-light-blue">
  <section class="gg-o-page-section">
    <p class="gg-u-text-speak-up">Gritty background texture</p>
  </section>
</div>
  .el {
    @include getTexture(gritty);
  }

Add a softer background texture

View demo Open in new window
320 x 568
View code
<div class="gg-u-texture-softer gg-t-light-blue">
  <section class="gg-o-page-section">
    <p class="gg-u-text-speak-up">Softer background texture</p>
  </section>
</div>
  .el {
    @include getTexture(softer);
  }