Docs :: Helpers

Helpers are classes for very targeted “one-off” local overrides. Every helper declaration uses !important, and because they live in an mCSS cascade layer, that beats everything: all framework layers, your own unlayered CSS, even normal inline styles. Think of a helper as inline styling for a single element. That power is exactly why they should be used as little as possible, but they’re useful for things like:

• Designer’s request to “make an exception”
• Quick fix until refactor
• Temporary test/design

Let’s say the request is: “This component just doesn’t look right in that context, can we just increase the top and bottom padding?” You would use the spacing helper this way:

<div class="myComponent pt-lg3 pb-lg3">
  <p>Content goes here.</p>
</div>

Using helpers is optional and mCSS will work just fine without them. None of the mCSS components rely on them. If you do use them in your project, it’s recommended to use PurgeCSS to keep your CSS size to a minimum. For Astro users, the astro-purgecss integration does everything for you out of the box once you install it.

Below is a list of all the available helpers. mCSS doesn’t include every single CSS property like utility classes frameworks do. It only includes the ones you actually need in those “one-off” situations. I’ve never needed more than that, but I’m open to add anything that would be useful. Just open an issue on Github with your use case and I’ll add it in.

width, height, margin, and padding

You can combine these properties with any dimension token as well as 0:

Both directional sets exist on purpose. Use the logical helpers (mis, mie, pis, pie) when the spacing follows the reading direction: an icon gap, a list indent, anything that should flip in a right-to-left layout. Use the physical helpers (ml, mr, pl, pr) when the offset is a purely visual choice that should stay on the same side no matter the script direction. In a left-to-right layout they resolve identically.

Examples

<div class="component mb-lg3">
  A component with an extra bottom margin of 48px.
</div>

<div class="component p-md1">
  A component with an extra padding of 28px.
</div>

color, background-color, and border-color

You can combine this properties with any color token:

Examples

<div class="c-base-0 bgc-primary-600">
  <p>A block with custom colors.</p>
</div>

overflow

position

Helper classes for the position property.

visibility

Helper classes for the visibility property.

z-index

Helper classes for the z-index property. See also the z-index token docs.

font-family

See the font stack tokens for details.

font-style

font-weight

See the font weight tokens for details.

font-size

See the font size tokens for details.

line-height

See the line height tokens for details.

text-align

Same split as the spacing helpers: .text-start and .text-end follow the reading direction (they flip in a right-to-left layout), .text-left and .text-right always mean the visual side.

text-transform