Columns

The Design System includes a 12 column grid system.

It has a variable margin and gutter size dependent on the screen/viewport width:

• 1rem (16px) - breakpoint uol-media-xs
• 1.5rem (24px) - breakpoint uol-media-l
• 2rem (32px) - breakpoint uol-media-xl

<div class="uol-col-container">
  <div class="uol-col-12">
    <div class="uol-example-col-item">
      <p>uol-col-12</p>
    </div>
  </div>
  <div class="uol-col-6">
    <div class="uol-example-col-item">
      <p>uol-col-6</p>
    </div>
  </div>
  <div class="uol-col-6">
    <div class="uol-example-col-item">
      <p>uol-col-6</p>
    </div>
  </div>
</div>

Usage

To reduce maintenance overhead it is recommended that the .uol-col-x classes are not used directly. Instead components should use BEM style classes. This will allow designs to be changed in future without requiring changes to component markup.

Example usage

Markup

<div class="example-widgets">
  <div class="example-widget__outer">
    <div class="example-widget">
      <p>Widget</p>
    </div>
  </div>
  <div class="example-widget__outer">
    <div class="example-widget">
      <p>Widget</p>
    </div>
  </div>
</div>

SCSS

.example-widgets {
  // Extend colum container
  @extend .uol-col-container;

  background: #efefef;
}

  .example-widget__outer {
    // Extend column classes
    @extend .uol-col;
    @extend .uol-col-6;
  }

  .example-widget {
    // Example styling
    position: relative;
    background: hotpink;
    box-sizing: border-box;
    height: 4rem;

    p {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      color: #fff;
    }
  }

Output

Inheritance

Because the Design System is mobile-first, any layout defined for small screens is automatically inherited by larger screens. If you want to change the layout on larger screens, you can make use of additional breakpoint based classes.

• Columns: Medium
• Columns: Large
• Columns: Extra Large

Markup

<div class="uol-col-container">
  <div class="uol-col-6 uol-col-l-4">
    <div class="uol-example-col-item">
      <p>uol-col-6<br> uol-col-l-4</p>
    </div>
  </div>
  <div class="uol-col-6 uol-col-l-4">
    <div class="uol-example-col-item">
      <p>uol-col-6<br> uol-col-l-4</p>
    </div>
  </div>
  <div class="uol-col-6 uol-col-l-4">
    <div class="uol-example-col-item">
      <p>uol-col-6<br> uol-col-l-4</p>
    </div>
  </div>
  <div class="uol-col-6 uol-col-l-4">
    <div class="uol-example-col-item">
      <p>uol-col-6<br> uol-col-l-4</p>
    </div>
  </div>
  <div class="uol-col-6 uol-col-l-4">
    <div class="uol-example-col-item">
      <p>uol-col-6<br> uol-col-l-4</p>
    </div>
  </div>
  <div class="uol-col-6 uol-col-l-4">
    <div class="uol-example-col-item">
      <p>uol-col-6<br> uol-col-l-4</p>
    </div>
  </div>
</div>

Output