Modules

A square-based module system for creating flexible, proportional layouts. Modules are sized using a WxH notation relative to a base unit, creating visually consistent grids.

How Modules Work

Modules are placed inside a .ug-modules container and sized using classes like .ug-module--2x1 (2 units wide, 1 unit tall). The base unit is calculated as a fraction of the viewport width, ensuring proportional scaling across screen sizes.

The container uses flexbox with wrapping, and modules flow naturally from left to right. Gaps between modules are built into the system using viewport-relative spacing.

Basic Modules

Square modules (1x1)

1x1

<div class="ug-modules">
  <div class="ug-module ug-module--1x1" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">1x1</div>
  <div class="ug-module ug-module--1x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">1x1</div>
  <div class="ug-module ug-module--1x1" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">1x1</div>
</div>

Wide Modules

Horizontal span modules

2x1

1x1

<div class="ug-modules">
  <div class="ug-module ug-module--2x1" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">2x1</div>
  <div class="ug-module ug-module--1x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">1x1</div>
</div>

Larger wide modules

3x1

4x1

<div class="ug-modules">
  <div class="ug-module ug-module--3x1" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">3x1</div>
  <div class="ug-module ug-module--4x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">4x1</div>
</div>

Tall Modules

Vertical span modules

1x2

1x1

<div class="ug-modules">
  <div class="ug-module ug-module--1x2" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">1x2</div>
  <div class="ug-module ug-module--1x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">1x1</div>
  <div class="ug-module ug-module--1x1" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">1x1</div>
</div>

Large Rectangular Modules

2x2 and 3x2 modules

2x2

3x2

<div class="ug-modules">
  <div class="ug-module ug-module--2x2" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">2x2</div>
  <div class="ug-module ug-module--3x2" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">3x2</div>
</div>

Mixed Layout

Combined module sizes

2x2

1x1

3x1

<div class="ug-modules">
  <div class="ug-module ug-module--2x2" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">2x2</div>
  <div class="ug-module ug-module--1x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">1x1</div>
  <div class="ug-module ug-module--1x1" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">1x1</div>
  <div class="ug-module ug-module--3x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">3x1</div>
</div>

Flush Modules

Remove the outer padding from the modules container for edge-to-edge layouts.

Flush variant

2x1

1x1

<div class="ug-modules ug-modules--flush">
  <div class="ug-module ug-module--2x1" style="background:#e8e5e0;display:flex;align-items:center;justify-content:center">2x1</div>
  <div class="ug-module ug-module--1x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">1x1</div>
</div>

Auto Height

Use .ug-module--auto-height to let the module height be determined by its content instead of the square ratio.

Auto height module

Auto Height

This module grows to fit its content rather than maintaining a fixed aspect ratio.

1x1

<div class="ug-modules">
  <div class="ug-module ug-module--2x1 ug-module--auto-height" style="background:#e8e5e0;padding:1rem">
    <h3>Auto Height</h3>
    <p>This module grows to fit its content rather than maintaining a fixed aspect ratio.</p>
  </div>
  <div class="ug-module ug-module--1x1" style="background:#d5d0c8;display:flex;align-items:center;justify-content:center">1x1</div>
</div>

Available Sizes

Width x Height	1 tall	2 tall	3 tall
1 wide	`1x1`	`1x2`	`1x3`
2 wide	`2x1`	`2x2`	`2x3`
3 wide	`3x1`	`3x2`	`3x3`
4 wide	`4x1`	`4x2`	`4x3`
5 wide	`5x1`	`5x2`	`5x3`
6 wide	`6x1`	`6x2`	`6x3`

Class Reference

Class	Description
`.ug-modules`	Module container (flexbox with viewport-relative gaps)
`.ug-modules--flush`	Remove outer padding
`.ug-module`	Base module element
`.ug-module--WxH (e.g. 2x1)`	Module size: width x height in base units
`.ug-module--auto-height`	Content-driven height instead of fixed ratio
`.ug-module--no-margin`	Remove module margin
`.ug-module--sm-WxH`	Responsive module size at small breakpoint