Introduction

Any prop alias is considered a responsive prop when its name is suffixed with a breakpoint name. Responsive props may also have an optional behavior specified.

Declaration

To declare a responsive prop follow the next schema:

Prop name

Any Prop alias can be used as a responsive prop. Not all props are allowed as responsive props to preserve the ideological approach of layout composition.

Breakpoint name

An optional name of the configured breakpoint.

Behavior

• up (Default) — Applies the given value from the specified breakpoint and up,

• down — Applies the given value from the specified breakpoint and down,

• only — Applies the given value only for the specified breakpoint.

Defaults

• Default breakpoint behavior is up,

• Default measurement unit for numeric prop values is px,

• When not suffixed, any prop value is applied for xs breakpoint and up.

Examples

• gutter — Sets grid-gap for all breakpoints (from xs and all the way up),

• marginVerticalMd — Applies margin-top and margin-bottom for md breakpoint and up,

• placeItemsLgOnly — Places the child items for lg breakpoint only.