Grid

Report an Issue 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 created shorthand variables for common breakpoints in the following chart.

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
<style>
  .ucla.campus div {
    background: #757575;
    outline: 1px dotted #fff;
    outline-offset: -1px;
    text-align: center;
    color: #fff;
    padding: 5px 0;
  }
</style>

<div class="ucla campus">
  <div class="col span_12_of_12">
    1 of 1
  </div>
</div>

// Two Columns
<div class="ucla campus">
    <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">
    <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">
    <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>

You can place columns within columns.

// Body Layout
<div class="ucla campus">

  <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>