States for Responsive Design

The Core styles are set up to allow layouts to change with the size of the display (or more accurately, the browser window). You have a number of tools at your disposal to make your layouts behave differently on small devices than on larger ones and vice versa.

To accomplish this, we have defined three so-called “states”. These states are based on the width of the user's viewport.

  1. The Three States
  2. Breakpoints
  3. Usage

The Three States

The three states are called palm, lap, and desk.

Since the electronics market is constantly changing, the states are not named after device categories (such as “smartphone” or “tablet”), but rather after the body posture in which a device of a certain width is most likely going to be used.

palm
A small device most likely held in the palm of your hand
lap
A medium-sized device most likely placed in your lap
desk
A large device most likely placed on a table or desk top

Breakpoints

The breakpoints, or thresholds, between the states are at 669px and 1014px. That is, if a user has a device whose display width ranges between 0 and 668px, he will get to see the smallest state (palm). If he has a display width between 669px and 1013px, he will get to see the medium state (lap). And if he has a display that is 1014px or wider, he will get to see the large state (desk).

Approximization of the three states
0 669 px 1014 px
palm –
lap –
desk –

Usage

On classes that support state-specific declarations, use the respective state name as a prefix to make the style apply to only that state.
Example: one-half makes an element 50% wide on all devices, while palm-one-half will apply the style only on palm-sized devices.

Please see the respective sections to find out more about specific usage instructions.