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.
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).
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.