Class prefixes/modifiers

Class prefixes/modifiers

Wait, what's that sm: bit in the atomic classname example above? That's a new naming convention you'll see which controls at which breakpoints the style is applied.

• Unprefixed (e.g. ipsBorder_top). Applies to all devices, desktop and smaller.
• md: (e.g. md:ipsBorder_top). Applies to tablets and smaller.
• sm: (e.g. sm:ipsBorder_top). Applies to phones only.

sm and md prefixes take priority over the desktop classname. This means you provide the desktop classname but can override it for tablets and/or phones by also adding an md: or sm: classname. For example, ipsPadding_top:double sm:ipsPadding_top:half applies double top padding on desktop, but only half top padding on phones.

You'll also see modifiers on some classes (as in the example above), for example ipsPadding:half. ipsPadding is saying 'apply padding to all sides', and the ':half' modifier makes it a smaller amount.