Themes

Text and colour combinations that divide up sections of the site.


How we design them

We have 5 themes to pick from:

  • White background with black text
  • Black background with white text
  • Light blue background with black text
  • Wild sand background with black text (note: this also has a background texture)
  • Light pink background with black text

Note: All combinations meet the AA accessibility standard.

How to use them

Using utility classes

  • .gg-t-white
  • .gg-t-black
  • .gg-t-light-blue
  • .gg-t-light-pink
  • .gg-t-wild-sand

Using the mixins

.el {
  @include theme(black);
}

.el {
  @include theme(white);
}

.el {
  @include theme(light-blue);
}

.el {
  @include theme(light-pink);
}

.el {
  @include theme(wild-sand);
}

How they look

View demo Open in new window
320 x 568
View code
<div class="gg-t-white">
  <section class="gg-o-page-section">
    <p>white theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-light-blue">
  <section class="gg-o-page-section">
    <p>light-blue theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-wild-sand">
  <section class="gg-o-page-section">
    <p>wild-sand theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-black">
  <section class="gg-o-page-section">
    <p>black theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-light-pink">
  <section class="gg-o-page-section">
    <p>light-pink theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>