CSS Utilities

Mainsail comes with a few utility classes for working within the Mainsail design specs.

Why Utility Classes?

Adding bespoke CSS per component for things that are constantly repeated adds to the "append-only" nature and unnecessary size of our CSS footprint.

Applying the 80/20 principle, having these classes available helps us to get the 80% done with 20% of the code. (Where the 80% is common use cases for positioning, layout and style ... and the 20% can likely be reused throughout the app.)

Eww, how are these better than inline styles?

Utility classes are a fairly common styling pattern that offers many benefits over inline styles.

The utilities listed on this page are modeled after the very popular Tailwind CSS. There are a number of differences, however. For example, not everything has responsive class designations baked-in. Mainsail only includes a small subset of the abilities of Tailwind to save on bundle size.