Responsive Layout

Cedar Design System’s layout tools are built with responsively-aware breakpoints. Cedar components and utility classes makes sure that your content remains consistent to the REI Digital brand expectations within each of our supported breakpoints.

Containers, rows, and columns work to achieve the same goal to provide you a consistent way to visually separate the unique content structures within your page. Note that these utilities represent a visual structure rather than a content structure.

# The Cedar Container

The Cedar container cdr-container is the foundational layout mechanism on your page. It centers your content and provides the page with a left and right gutter helping you to separate your content and the edge of the browser window. The container should be added to the root wrapping element of your template.

Unlike other deliverables from Cedar, our container breaks in its display settings for each of the breakpoints into one class. This allows all pages to begin from the same layout context as each other. The container has two variants: standard container and fluid container.

Breakpoints for REI’s responsive layout

# Standard vs. Fluid Container

The Cedar container allows flexible content width, up to a max width of 1232px. The fluid variant of the container does not have a max width. As shown below, pages can contain both fluid and standard containers.

Standard vs. Fluid container

To explore how the containers work, check out this code sandbox:

  <div>
    <div class="cdr-container">
      <div class="content">A cdr-container class</div>
    </div>

    <div class="cdr-container-fluid">
      <div class="content">A cdr-container-fluid class</div>
    </div>
  </div>

1
2
3
4
5
6
7
8
9
10

# Display Breakpoints

Cedar provides support for four layout screen widths: extra small, small, medium, and large.

These breakpoints set boundaries to be used by the media queries, providing ranges needed to ensure that your UI communicates what is most important to your customers for any screen size.

The responsive breakpoints do not provide any support for device detection, nor do they change the inherent functionality of elements at breakpoints.

# Design Tokens

The following design tokens are provided using the @rei/cdr-tokens package for breakpoint detection.

Display size Design Token Value
Extra small cdr-breakpoint-xs 0px
Small cdr-breakpoint-sm 768px
Medium cdr-breakpoint-md 992px
Large cdr-breakpoint-lg 1232px

For more information about using design tokens, visit the Design Tokens overview.

# SCSS/LESS Utilities

@rei/cdr-tokens provides the following responsive breakpoint media queries for our patterns, components, and layouts. These provide size ranges intended to help facilitate the changing of layout at various screen widths or orientations.

Display size Utility mixin Range
Extra Small & Above @include cdr-xs-mq-up {} >= 0
Extra Small Only @include cdr-xs-mq-only {} 0-767px
Below Small @include cdr-sm-mq-down {} < 768px
Small & Above @include cdr-sm-mq-up {} >= 768px
Small Only @include cdr-sm-mq-only {} 768px-991px
Below Medium @include cdr-md-mq-down {} < 992px
Medium & Above @include cdr-md-mq-up {} >= 992px
Medium Only @include cdr-md-mq-only {} 992px-1231px
Below Large @include cdr-lg-mq-down {} < 1232px
Large & Above @include cdr-lg-mq-up {} >= 1232px
Large Only @include cdr-lg-mq-only {} >= 1232px

# Targeting the Utility Media Query with Class Names

To avoid confusion between an element’s size variant and its breakpoint name, Cedar has the following naming conventions:

  • Element sizes are treated as modifiers and follow the BEM naming convention of block__element--modifier
  • Breakpoints are denoted with the @(xs, sm, md, lg) and are appended to a class name. This convention is outside of the BEM naming convention

For example, cdr-button size="small@lg" will only apply the small button variant at the large breakpoint.

# Greater Than vs. Range Values

The cdr-media queries provide both “greater than” values and “ranges” for each breakpoint.

For example, a selector may target a small variant within the small breakpoint range like this:

.cdr-example {
  @include cdr-sm-mq-only {
    &--small\@sm {
      key: value;
    }
  }
}
1
2
3
4
5
6
7

Exploding the name cdr-sm-mq-only would read “cedar-small-media-query-only

Using the range ensures that the specified key:value pairs only applies to the .cdr-example--small@sm class name when it is displayed within the range of 768px-991px.

However, if you want to apply a value to the example that only needed to know when it was greater than the small breakpoint, you must use the root value query. This example allows you to update the display of the button when the display is at least 768px wide.

.cdr-example {
  @include cdr-sm-mq-up {
    &--small\@sm {
      key: value;
    }

  }
}
1
2
3
4
5
6
7
8

# Components and breakpoints

Components allow breakpoints to be passed as unique property variants. When accepted, a breakpoint variant property will append the @(xs, sm, md, lg) to its name.

For example, to display the cdr-button-small variant at the small breakpoint:

<cdr-button size="small@sm">
  A primary button
</cdr-button>
1
2
3

Note that the Cedar components will always use the range breakpoints. If you intend a component to continue to use the breakpoint variant within a different breakpoint range, you will also need to account for it within the same property definition.

<cdr-button size="small@xs small@sm small@md">
  A primary button
</cdr-button>
1
2
3