CGU Core implements a wide array of utility classes intended to provide some of the most common styles applied to elements. This allows complex pages to be assembled quickly and efficiently without having to create new sets of style declarations for new elements.

 

Employing Utility Classes

Utility classes are always prepended with “u-“. They can be used in markup as well as in SASS via @extend.

Example: Use the u-text-center class to center text in the article.

<article class="u-text-center">
  <h3>Article text is centered.</h3><br>
</article>

Alternatively, @extend the u-text-center class to the article.

article {
  @extend .u-text-center;
}