#Viewports

Cirrus by default is a framework designed to make developing mobile optimized sites easier. Most styles for layouts and elements adapt to changes in screen size and orientation.

#Default Behavior

Some default behavior to expect when elements get resized are:

  • Text elements such as h1 will shrink for mobile devices to remain in the right proportion.
  • Navigation items inside of header-nav will be tucked away in a dropdown menu for mobile devices.
  • Columns inside of a row start out as vertically stacked elements on mobile devices. This can be ignored using the ignore-screen class.
  • Elements inside of level willa slo be stacked vertically on mobile devices. Again, the ignore-screen class can be used to override this behavior.

#Breakpoints

Updated
0.6.2

The standard breakpoints used in Cirrus are xs, sm, md, and lg. This replaces the mobile, tablet, and desktop designations used in older versions.

TypeMin (px)Max (px)
xs0640
sm641768
md7691023
lg10241279
xl1280-

From that, the class designations in Cirrus follow this guideline:

xs
Below and including 640px
sm
Between 641px and 768px
md
Between 769px and 1023px
lg
Between 1024px and 1279px
xl
1280px and above

Regular class (eg. u-none)

-

*-sm

-

*-md

-

*-lg

-

*-xl

An example of style that follows this convention is the u-none-* class.

u-noneHide content for all widths.
u-none-smHide content for widths 641px and above.
u-none-mdHide content for widths 768px and above.
u-none-lgHide content for widths 1024px and 1279px.
u-none-xlHide content for 1280px and above.

#Usage

New
0.6.2

When applying classes viewport supported classes, note that the framework assumes you are designing for a mobile device first. This means that applying u-none on some given div will apply for all screen sizes.

Design For Mobile First

If you then set u-flex-md on the div, it will then apply a flexbox layout starting at the md breakpoint and higher.

<div class="u-none u-flex-md">
    <!-- ... -->
/>
Modify Specific Viewport

To apply a class for a specific screen size, we can easily set this behavior using multiple declarations of the classes we need for each viewport.

As an example, let's say we want to position a sticky div to be relative only for sm to md. We can use achieve this with the class declarations shown above.

<div class="u-sticky u-relative-sm u-sticky-md">
    <!-- ... -->
/>

Note that not all classes support application by viewport. You can see if a given group of classes support this by checking if the documentation contains a 'Responsive' section detailing how to use the classes with different viewports.

#Customization

Updated
0.6.0

You can now modify the breakpoints used in Cirrus within the new configuration file for sizing. Just edit the values stored inside _size.scss.

$breakpoints: (
    'xs': 640px,
    'sm': 768px,
    'md': 1024px,
    'lg': 1280px
);