Notation

How we notate

We have made everything as simple as possible when it comes to class names and notation. Most of the utilities you will encounter start with the letter of the utility, p for position for example, followed by a dash - then followed by the property. Here is a taster, but please see the indiviudal pages on the left for more details.

• Columns - col-12 col-mob-6 col-tab-4 col-desk-3 col-hd-1
• Order - order-6
• Display - d-none d-desk-flex
• Spacing - my-0 mt-tab-4 py-0 py-desk-5
• Position - p-relative p-desk-absolute
• Sizing - w-40 w-desk-100
• Colors - c-primary bg-primary
• Float - f-right

!important

Using !important with CSS can be a logistical nightmare, usually it's best avoided at all costs. While we have gone to every effort to avoid it, we have decided that our utility classes should have final say in the cascade.
This is why we have has to add the !important property to our utility classes to override specificity.