Layout - CGU Brand

Clearings

Containers of floated elements need to be clearfixed. Use the u-clear utility class for this.

<div class="u-clear">
  <div class="u-span-6 u-bg-dark-gray u-pad u-nudge">my parent is clearfixed</div>
  <div class="u-span-6 u-bg-dark-gray u-pad u-nudge">my parent is clearfixed</div>
</div>

<div class="u-clear">
  <div class="u-span-6 u-bg-dark-gray u-pad u-nudge">.u-span-6</div>
  <div class="u-span-6 u-clear-both u-bg-dark-gray u-pad u-nudge">.u-span-6.u-clear-both</div>
  <div class="u-span-6 u-bg-dark-gray u-pad u-nudge">.u-span-6</div>
</div>

Containers

The u-container class possibly the most widely used utility class. It’s used to confine content to the width of the page. It employs the outer-container mixin and $container_padding variable.

.u-container {
  @include outer-container;
  @extend .u-clear;
  position: relative;
  padding-left: $container_padding;
  padding-right: $container_padding;
  width: 100%;
}

<div class="u-container u-bg-light-gray u-text-center">
  <div class="u-push">
    <strong>.u-container</strong>
  </div>
  <div class="u-bg-dark-gray u-push u-pad">
    <span>inner content</span>
  </div>
  <br/>
</div>

Flexbox

Flex wrap and flex align utilities are available to compliment the u-display-flex class.

.u-flex-wrap {
  @include flex-wrap(wrap);
}
.u-align-items-flex-start {
  @include align-items(flex-start);
}
.u-align-items-flex-end {
 @include align-items(flex-end);
}
.u-align-items-center {
 @include align-items(center);
}

Centering Elements

Horizontally center an element with a fixed width.

<img class="u-center" src="//unsplash.it/350/200" width="350" height="200" alt="centered image"/>

You can also use .u-position-center to center an element both horizontally AND vertically within a container. The container must have position: relative.

<div style="position:relative; height:400px">
  <img class="u-position-center" src="//unsplash.it/350/200" width="350" height="200" alt="centered image"/>
</div>

Floats

<div class="u-clear">
  <div class="u-float-left u-bg-lighter-gray u-pad">.u-float-left</div>
  <div class="u-float-right u-bg-lighter-gray u-pad">.u-float-right</div>
</div>

Margins & Padding

$leading: 1.5rem;
//
.u-hug     { margin-top: 0; }
.u-nudge   { margin-top: $leading / 2; }
.u-push    { margin-top: $leading; }
.u-push-2x { margin-top: $leading * 2; }
.u-push-3x { margin-top: $leading * 3; }
.u-push-4x { margin-top: $leading * 4; }
.u-push-5x { margin-top: $leading * 5; }
.u-push-6x { margin-top: $leading * 6; }
//
.u-pad     { padding: $leading; }