#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 any of the col-xs-'i' classes.
Elements inside of level will also be stacked vertically on mobile devices. Again, the col-xs-'i' classes 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.

Type	Min (px)	Max (px)
xs	`0`	`640`
sm	`641`	`768`
md	`769`	`1023`
lg	`1024`	`1279`
xl	`1280`	-

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-none`	Hide content for all widths.
`u-none-sm`	Hide content for widths `641px` and above.
`u-none-md`	Hide content for widths `768px` and above.
`u-none-lg`	Hide content for widths `1024px` and `1279px`.
`u-none-xl`	Hide 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
);

Cirrus