UCLA Web Components

Grid

bitbucket Report an Issue Slack Join the Slack Discussion

Our fully responsive grid for UCLA digital properties has 12 columns and 5 breakpoints. It has been designed to easily adapt to different screen sizes and to ensure consistent layouts across devices.

The grid has three main parts: columns, gutters and margins

  • Columns
    • Columns contain the content.
    • They act as invisible guides while setting typography and aligning elements to establish a visual rhythm.
  • Gutters
    • Gutters are the spaces between columns.
    • They provide breathing room around elements so your content can be easily consumed.
  • Margins
    • Margins are the spaces between the 1) content area and 2) the left and right edges of the screen. (We do not use top and bottom margins for our grids.)
    • Margins define the content area from within the viewable area.

Viewports and Breakpoints

We have defined commonly used breakpoints to make development for all screen sizes more efficient. These variables are used through our grid and spacing class names.

We created shorthand variables for common breakpoints in the following chart.

Viewports Viewport Width SCSS Breakpoint Variable
n/a 0px “na”
Extra Small / Mobile Devices 480px “xs”
Small / Mobile Devices 600px “sm”
Medium / Tablet Devices 768px “md”
Large / Desktop or Laptop Devices 1024px “lg”
Extra Large / Presentation Mode 1280px “xl”

Breakpoint Examples

// CSS Example Breakpoint Usage
@media (min-width: 768px) {
  display: inline-block;
}

// SCSS Example Breakpoint Usage
@media (min-width: breakpoint-min(md)) {
  display: inline-block;
}

Columns

In order to use the column grid you must wrap the page area with the “ucla campus” class.

  • The “ucla” class splits the page horizontally. It will help you break up rows of content or can be used as your main content wrapper. It has no padding or margins.
  • The “campus” class forces the element to self-clear its children, a.k.a the Clearfix hack. This is used to support older browser versions.
  • The “col” class divides the row into columns. All columns except the first child have a margin-left of 1.6%.
  • The “span_x_of_x” class defines the width of the column using percentages. The second “x” has a maximum of 12. This allows the grid to be fluid at all breakpoints.
// Full Width
<div class="ucla campus example">
    <div class="col span_1_of_2">
      1 of 2
    </div>
    <div class="col span_1_of_2">
      2 of 2
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_3">
        1 of 3
    </div>
    <div class="col span_1_of_3">
        2 of 3
    </div>
    <div class="col span_1_of_3">
        3 of 3
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_4">
    1 of 4
    </div>
    <div class="col span_1_of_4">
    2 of 4
    </div>
    <div class="col span_1_of_4">
    3 of 4
    </div>
  <div class="col span_1_of_4">
    4 of 4
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_5">
    1 of 5
    </div>
    <div class="col span_1_of_5">
    2 of 5
    </div>
    <div class="col span_1_of_5">
    3 of 5
    </div>
  <div class="col span_1_of_5">
    4 of 5
    </div>
  <div class="col span_1_of_5">
    5 of 5
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_6">
    1 of 6
    </div>
    <div class="col span_1_of_6">
    2 of 6
    </div>
    <div class="col span_1_of_6">
    3 of 6
    </div>
  <div class="col span_1_of_6">
    4 of 6
    </div>
  <div class="col span_1_of_6">
    5 of 6
    </div>
  <div class="col span_1_of_6">
    6 of 6
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_7">
    1 of 7
    </div>
    <div class="col span_1_of_7">
    2 of 7
    </div>
    <div class="col span_1_of_7">
    3 of 7
    </div>
  <div class="col span_1_of_7">
    4 of 7
    </div>
  <div class="col span_1_of_7">
    5 of 7
    </div>
  <div class="col span_1_of_7">
    6 of 7
    </div>
  <div class="col span_1_of_7">
    7 of 7
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_8">
    1 of 8
    </div>
    <div class="col span_1_of_8">
    2 of 8
    </div>
    <div class="col span_1_of_8">
    3 of 8
    </div>
  <div class="col span_1_of_8">
    4 of 8
    </div>
  <div class="col span_1_of_8">
    5 of 8
    </div>
  <div class="col span_1_of_8">
    6 of 8
    </div>
  <div class="col span_1_of_8">
    7 of 8
    </div>
  <div class="col span_1_of_8">
    8 of 8
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_9">
    1 of 9
    </div>
    <div class="col span_1_of_9">
    2 of 9
    </div>
    <div class="col span_1_of_9">
    3 of 9
    </div>
  <div class="col span_1_of_9">
    4 of 9
    </div>
  <div class="col span_1_of_9">
    5 of 9
    </div>
  <div class="col span_1_of_9">
    6 of 9
    </div>
  <div class="col span_1_of_9">
    7 of 9
    </div>
  <div class="col span_1_of_9">
    8 of 9
    </div>
  <div class="col span_1_of_9">
    9 of 9
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_10">
    1 of 10
    </div>
    <div class="col span_1_of_10">
    2 of 10
    </div>
    <div class="col span_1_of_10">
    3 of 10
    </div>
  <div class="col span_1_of_10">
    4 of 10
    </div>
  <div class="col span_1_of_10">
    5 of 10
    </div>
  <div class="col span_1_of_10">
    6 of 10
    </div>
  <div class="col span_1_of_10">
    7 of 10
    </div>
  <div class="col span_1_of_10">
    8 of 10
    </div>
  <div class="col span_1_of_10">
    9 of 10
    </div>
  <div class="col span_1_of_10">
    10 of 10
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_11">
    1 of 11
    </div>
    <div class="col span_1_of_11">
    2 of 11
    </div>
    <div class="col span_1_of_11">
    3 of 11
    </div>
  <div class="col span_1_of_11">
    4 of 11
    </div>
  <div class="col span_1_of_11">
    5 of 11
    </div>
  <div class="col span_1_of_11">
    6 of 11
    </div>
  <div class="col span_1_of_11">
    7 of 11
    </div>
  <div class="col span_1_of_11">
    8 of 11
    </div>
  <div class="col span_1_of_11">
    9 of 11
    </div>
  <div class="col span_1_of_11">
    10 of 11
    </div>
  <div class="col span_1_of_11">
    11 of 11
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_12">
    1 of 12
    </div>
    <div class="col span_1_of_12">
    2 of 12
    </div>
    <div class="col span_1_of_12">
    3 of 12
    </div>
  <div class="col span_1_of_12">
    4 of 12
    </div>
  <div class="col span_1_of_12">
    5 of 12
    </div>
  <div class="col span_1_of_12">
    6 of 12
    </div>
  <div class="col span_1_of_12">
    7 of 12
    </div>
  <div class="col span_1_of_12">
    8 of 12
    </div>
  <div class="col span_1_of_12">
    9 of 12
    </div>
  <div class="col span_1_of_12">
    10 of 12
    </div>
  <div class="col span_1_of_12">
    11 of 12
    </div>
  <div class="col span_1_of_12">
    12 of 12
    </div>
</div>

<h2 class="mt-24">Column Span</h2>
<div class="ucla campus example">
    <div class="col span_6_of_12">
      This is column 1, that spans 6 columns of 12.
    </div>
    <div class="col span_3_of_12">
      This is column 2, that spans 3 columns of 12.
    </div>
    <div class="col span_3_of_12">
      This is column 3, that spans 3 columns of 12.
    </div>
</div>

<h2 class="mt-24">Nested Columns</h2>
<div class="ucla campus example">

  <div class="col span_9_of_12">

    <div class="ucla campus">
      <div class="col span_12_of_12">
        Body Content 12 of 12
      </div>
    </div>

    <div class="ucla campus">
      <div class="col span_6_of_12">
        Body Content 6 of 6
      </div>
      <div class="col span_6_of_12">
        Body Content 6 of 6
      </div>
    </div>

  </div>

  <div class="col span_3_of_12">
    Menu content
  </div>

</div>

// Two Columns
<div class="ucla campus example">
    <div class="col span_1_of_2">
      1 of 2
    </div>
    <div class="col span_1_of_2">
      2 of 2
    </div>
</div>

// Three Columns
<div class="ucla campus example">
    <div class="col span_1_of_3">
        1 of 3
    </div>
    <div class="col span_1_of_3">
        2 of 3
    </div>
    <div class="col span_1_of_3">
        3 of 3
    </div>
</div>

// Twelve Columns Responsive EXAMPLE
<div class="ucla campus example">
    <div class="col span_1_of_12">
    1 of 12
    </div>
    <div class="col span_1_of_12">
    2 of 12
    </div>
    <div class="col span_1_of_12">
    3 of 12
    </div>
  <div class="col span_1_of_12">
    4 of 12
    </div>
  <div class="col span_1_of_12">
    5 of 12
    </div>
  <div class="col span_1_of_12">
    6 of 12
    </div>
  <div class="col span_1_of_12">
    7 of 12
    </div>
  <div class="col span_1_of_12">
    8 of 12
    </div>
  <div class="col span_1_of_12">
    9 of 12
    </div>
  <div class="col span_1_of_12">
    10 of 12
    </div>
  <div class="col span_1_of_12">
    11 of 12
    </div>
  <div class="col span_1_of_12">
    12 of 12
    </div>
</div>

You can place columns within columns.

// Body Layout
<h2 class="mt-24">Nested Columns</h2>
<div class="ucla campus example">

  <div class="col span_9_of_12">

    <div class="ucla campus">
      <div class="col span_12_of_12">
        Body Content 12 of 12
      </div>
    </div>

    <div class="ucla campus">
      <div class="col span_6_of_12">
        Body Content 6 of 6
      </div>
      <div class="col span_6_of_12">
        Body Content 6 of 6
      </div>
    </div>

  </div>

  <div class="col span_3_of_12">
    Menu content
  </div>

</div>