Grid System

The Cynosure grid system provides a flexible, responsive layout foundation built on a 12-column structure. It ensures consistent spacing, alignment, and breakpoint behavior across all products and interfaces.

Grid Structure

The grid system consists of three main components:

Container (o-container): Wraps content and provides max-width constraints
Row (o-row): Creates a horizontal group of columns
Columns (o-col-{number}): Defines the width of content areas

Basic Grid Settings

Number of columns: 12
Gutter width: 42px

These settings are defined in settings/_grid.scss:

SCSS

$grid-columns: 12 !default;
$grid-gutter: 42px !default;

Breakpoints

The grid system uses the following breakpoints for responsive behavior:

Breakpoint	Value	Description
`xs`	0px	Extra small devices (default, mobile-first)
`sm`	576px	Small devices (landscape phones)
`md`	769px	Medium devices (tablets)
`lg`	992px	Large devices (desktops)
`xl`	1254px	Extra large devices (large desktops)

Usage

Basic Grid Layout

HTML

<div class="o-container">
  <div class="o-row">
    <div class="o-col-12">
      <!-- Full width content -->
    </div>
  </div>
</div>

Responsive Columns

Use breakpoint-specific column classes to create responsive layouts:

HTML

<div class="o-container">
  <div class="o-row">
    <div class="o-col-12 o-col-6@md o-col-4@lg">
      <!-- Full width on mobile, half width on tablet, one-third on desktop -->
    </div>
    <div class="o-col-12 o-col-6@md o-col-4@lg">
      <!-- Same responsive behavior -->
    </div>
    <div class="o-col-12 o-col-6@md o-col-4@lg">
      <!-- Same responsive behavior -->
    </div>
  </div>
</div>

Column Classes

Column classes follow the pattern: o-col-{number} or o-col-{number}@{breakpoint}

o-col-1 through o-col-12: Column widths from 1/12 to 12/12 (full width)
o-col-{number}@{breakpoint}: Responsive column widths at specific breakpoints

Examples:

o-col-12: Full width (12/12 columns)
o-col-6: Half width (6/12 columns)
o-col-4: One-third width (4/12 columns)
o-col-3: One-quarter width (3/12 columns)
o-col-6@md: Half width starting at medium breakpoint
o-col-4@lg: One-third width starting at large breakpoint

Offsets

Use offset classes to push columns to the right, creating spacing or centering content:

Offset Classes

o-offset-{number}: Offset by number of columns (default/xs breakpoint)
o-offset-{number}@{breakpoint}: Offset at specific breakpoint

Examples:

o-offset-1: Push column 1 column to the right
o-offset-3@md: Push column 3 columns to the right starting at medium breakpoint
o-offset-4@lg: Push column 4 columns to the right starting at large breakpoint

Centering Content

HTML

<div class="o-container">
  <div class="o-row">
    <div class="o-col-8@md o-offset-2@md">
      <!-- Centered content: 8 columns wide, offset by 2 columns -->
    </div>
  </div>
</div>

Offset Implementation

Offsets are implemented using margin-inline-start to support RTL (right-to-left) languages:

SCSS

.o-offset-#{$i} {
  margin-inline-start: $column-width;
}

Best Practices

1. Always Use Container

Wrap your grid layouts in o-container to ensure consistent max-widths and horizontal padding:

HTML

<!-- Good -->
<div class="o-container">
  <div class="o-row">
    <div class="o-col-12">Content</div>
  </div>
</div>

<!-- Avoid -->
<div class="o-row">
  <div class="o-col-12">Content</div>
</div>

2. Mobile-First Approach

Start with mobile (xs) classes and progressively enhance for larger screens:

HTML

<!-- Good: Mobile-first -->
<div class="o-col-12 o-col-6@md o-col-4@lg">Content</div>

<!-- Avoid: Desktop-first -->
<div class="o-col-4 o-col-12@sm">Content</div>

3. Column Totals Should Equal 12

Within a row, column widths should add up to 12 (or less, leaving empty space):

HTML

<!-- Good: Columns total 12 -->
<div class="o-row">
  <div class="o-col-6">6 columns</div>
  <div class="o-col-6">6 columns</div>
</div>

<!-- Also valid: Columns total less than 12 -->
<div class="o-row">
  <div class="o-col-4">4 columns</div>
  <div class="o-col-4">4 columns</div>
  <!-- 4 columns of empty space -->
</div>

4. Use Responsive Classes Appropriately

Apply breakpoint-specific classes only when layout changes are needed:

HTML

<!-- Good: Clear responsive behavior -->
<div class="o-col-12 o-col-6@md o-col-4@lg">Content</div>

<!-- Avoid: Unnecessary classes -->
<div class="o-col-12 o-col-12@md o-col-12@lg">Content</div>

5. Combine with Spacing Utilities

Use spacing utilities (u-mb-*, u-pt-*, etc.) for vertical spacing between grid sections:

HTML

<div class="o-container u-pt-5 u-pb-5">
  <div class="o-row">
    <div class="o-col-12">Content</div>
  </div>
</div>

Common Layout Patterns

Two-Column Layout

HTML

<div class="o-container">
  <div class="o-row">
    <div class="o-col-12 o-col-6@md">
      <!-- Left column -->
    </div>
    <div class="o-col-12 o-col-6@md">
      <!-- Right column -->
    </div>
  </div>
</div>

Three-Column Layout

HTML

<div class="o-container">
  <div class="o-row">
    <div class="o-col-12 o-col-4@md">
      <!-- Column 1 -->
    </div>
    <div class="o-col-12 o-col-4@md">
      <!-- Column 2 -->
    </div>
    <div class="o-col-12 o-col-4@md">
      <!-- Column 3 -->
    </div>
  </div>
</div>

Four-Column Layout

HTML

<div class="o-container">
  <div class="o-row">
    <div class="o-col-12 o-col-6@md o-col-3@lg">
      <!-- Column 1 -->
    </div>
    <div class="o-col-12 o-col-6@md o-col-3@lg">
      <!-- Column 2 -->
    </div>
    <div class="o-col-12 o-col-6@md o-col-3@lg">
      <!-- Column 3 -->
    </div>
    <div class="o-col-12 o-col-6@md o-col-3@lg">
      <!-- Column 4 -->
    </div>
  </div>
</div>

Asymmetric Layout

HTML

<div class="o-container">
  <div class="o-row">
    <div class="o-col-12 o-col-8@md">
      <!-- Main content (8 columns) -->
    </div>
    <div class="o-col-12 o-col-4@md">
      <!-- Sidebar (4 columns) -->
    </div>
  </div>
</div>

Grid Variables

When working with SCSS, you can reference grid variables:

SCSS

// Number of columns
$grid-columns: 12;

// Gutter width
$grid-gutter: 42px;

// Calculate column width
$column-width: (100% / $grid-columns) * $i;

Accessibility Considerations

Ensure grid layouts remain readable and functional when content is zoomed or text is resized
Test layouts with screen readers to ensure logical content order
Maintain semantic HTML structure within grid columns (use appropriate heading levels, landmarks, etc.)
Ensure sufficient color contrast and spacing for touch targets on mobile devices

References

By following these grid system guidelines, Cynosure ensures consistent, responsive layouts that work seamlessly across all devices and screen sizes.