Helper Classes
We have a number of helper classes that allow us to quickly style elements throughout the application without adding unnecessary bloat and complexity to our CSS. This also allows us to keep our CSS specificity low.
Spacing
For consistent spacing and to maintain a vertical rhythm, we use a level system for both margin and padding. Padding can be applied by using the classes padding--lv1 through padding--lv8, while margin uses the margin--lv1 through margin--lv8 scale. Use padding--lv0 or margin--lv0 to completely remove any margin or padding from the element.
The ! prefix is a way to indicate !important on the style.
Note
To fine tune the padding and margin for an element, supplement the padding level with the following classes:
- I am changing this to common classes
- I am changing this to common classes
- I am changing this to common classes
- I am changing this to common classes
- I am changing this to common classes
Margin Helpers
- I am changing this to common classes
- I am changing this to common classes
- I am changing this to common classes
- I am changing this to common classes
- I am changing this to common classes
Typography
| Class Name | Description |
|---|---|
| d_flex | Display two elements side by side with space between |
Additional classes related to white space and word wrapping are available such as: white-space--normal, white-space--nowrap, white-space--preline, word-wrap--break-all, and word-wrap--break-word.
Display and visibility
| Class Name | Description |
|---|---|
| nav | Create a navigation with insticthub image |
| button | Create a button including when button is disabled |
| .default-btn | Create a button with a gray background |
| .important-btn | Create a button CTA button for instincthub |
| .danger-btn | Create a button with a red background |