To help streamline the design and development of this website, helper classes (classes that can be reused very very often) were installed to reduce the amount of time writing custom code when putting together a design from the team.
The classes listed in this section are not meant to be targeted with CSS to alter their styling or functionality. Instead, these classes already perform a specified action and are meant to be used with various elements when needed.
This is a quick rundown of the most used Utility & Helper Classes:
SPACING HELPERS
In order for pages to be structured properly, all elements must receive some type of margin or padding for adequate spacing. While this spacing is beneficial in most cases, it might be something you wish to remove or modify at other times. We have provided plenty of helper classes to use in these instances. These helper classes allow you to modify the margin and padding of elements by removing the spacing completely, or adding a small, medium, or large amount of spacing. These classes are an acronym built from three different parameters:
- Margin (m) or padding (p).
- Top (t), left (l), right (r), bottom (b), vertical (v), horizontal (h), or all (a).
- None (n), small (s), medium (m), or large (l).
For example, if you wanted to add a class that removed all of the margin from the top of an element you would use mtn, which stands for margin top none. Alternately, if you wanted to add a small amount of padding to both sides of an element you would use phm, which stands for padding horizontal medium.
To figure out where the spacing on an element is coming from, you can easily do this in Chrome. Simply right click on any element and select Inspect Element from the dropdown. This will reveal a popup at the bottom of your window, which will display HTML on the left and CSS on the right. You can hover over the HTML in the popup and select elements to see where any margin or padding is coming from. Margin is designated by a reddish/orange color and padding is designated by green.
MARGINS
• mtn – margin top none
• mts – margin top small
• mtm – margin top medium
• mtl – margin top large
• mrn – margin right none
• mrs – margin right small
• mrm – margin right medium
• mrl – margin right large
• mbn – margin bottom none
• mbs – margin bottom small
• mbm – margin bottom medium
• mbl – margin bottom large
• mln – margin left none
• mls – margin left small
• mlm – margin left medium
• mll – margin left large
• mvn – margin vertical none
• mvs – margin vertical small
• mvm – margin vertical medium
• mvl – margin vertical large
• mhn – margin horizontal none
• mhs – margin horizontal small
• mhm – margin horizontal medium
• mhl – margin horizontal large
• man – margin all none
• mas – margin all small
• mam – margin all medium
• mal – margin all large
PADDING
• ptn – padding top none
• pts – padding top small
• ptm – padding top medium
• ptl – padding top large
• prn – padding right none
• prs – padding right small
• prm – padding right medium
• prl – padding right large
• pbn – padding bottom none
• pbs – padding bottom small
• pbm – padding bottom medium
• pbl – padding bottom large
• pln – padding left none
• pls – padding left small
• plm – padding left medium
• pll – padding left large
• pvn – padding vertical none
• pvs – padding vertical small
• pvm – padding vertical medium
• pvl – padding vertical large
• phn – padding horizontal none
• phs – padding horizontal small
• phm – padding horizontal medium
• phl – padding horizontal large
• pan – padding all none
• pas – padding all small
• pam – padding all medium
• pal – padding all large
TYPOGRAPHY
FONT WEIGHTS
• w-100 – font weight 100
• w-200 – font weight 200
• w-300 – font weight 300
• w-400 – font weight 400
• w-500 – font weight 500
• w-600 – font weight 600
• w-700 – font weight 700
• w-800 – font weight 800
• w-900 – font weight 900
TEXT TRANSFORMATION
• tt-upper – text transform uppercase
• tt-lower – text transform lowercase
• tt-none – text transform none
TEXT ALIGN
• center-text – center align text
• right-text – right align text
• left-text – left align text
MISCELLANEOUS
• cf – Clearfix
• hide-text – hides text
• right – floats right
• left – floats left
• center-block – center block level elements
• center-list – center lists
• hidden – hide from both screenreaders and browsers
• invisible – hide visually from screenreaders but maintain layout
• visually-hidden – hide only visually, but have it available to screenreaders
