Responsive

Responsive design is a mobile-first approach to creating layouts that automatically respond to fit any screen size or device. To make your layout responsive, Cedar provides the option to use media-query mixins and breakpoint tokens or the container component.

Media queries are CSS rules used to change the layout at the moment the content starts to break and become less usable. Breakpoints set these boundaries, providing a range at which the layout adapts to suit a user's screen size and orientation.

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

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

Breakpoint options

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

SCSS/LESS mixins

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

Fluid

Fluid is an alternative to responsive design that does not rely on defined breakpoints. It provides smooth scaling between upper and lower boundaries by calculating the slope of a line between two points.

See the Fluid article to learn more about fluid design and typography.

Add the container to the root wrapping element of your template using the cdr-container mixin from @rei/cdr-tokens, or use the CdrContainer component as your root element.

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

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

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

    <cdr-container modifier="fluid">
      <div class="content">A cdr-container-fluid component</div>
    </cdr-container>
  </div>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss';
  .container-class {
    @include cdr-container;
  }
  .container-fluid-class {
    @include cdr-container-fluid;
  }
</style>

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

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.

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

  }
}

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>

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>