A small number of utility classes are available as default via the Source Base stack. By adding the Utility classes (Source) stack though you can have access to many more useful classes.
When you add the Utility classes stack to the page some general classes relating to position, size and display are added automatically. There are a number of additional class groups that can optionally be added for Padding, Margins, Flexbox and Borders. Even if you opt to add all of the optional class groups the total size of the utility classes is only 30KB.
This page contains a list of most of the available classes - along with a description where required. To apply these you would simply add the name of the desired class (or classes) into the Stacks 4 CSS classes box - or the equivalent box in certain specialist stacks. You may find these especially useful alongside our Coder stack.
Note: Using classes is an advanced option in Source and no additional support is available with their use. There is a downloadable project file available at the bottom of this page with a few worked examples of these classes in use.
Source utility classes reference list (General)
Position
Here are all the classes that are available to you to use in this way:
| Description | Class name |
| Position static | position-static |
| Relative position | position-relative |
| Absolute position | position-absolute |
| Fixed position | position-fixed |
| Fix to top of the screen | fixed-top |
| Fix to bottom of the screen | fixed-bottom |
| Absolute top left | pos-tl |
| Absolute top right | pos-tr |
| Absolute bottom left | pos-bl |
| Absolute bottom right | pos-br |
| Absolute center | pos-center |
See demo of using these absolute position classes
z-index
Here are all the classes that are available to you to use in this way:
| Description | Class name |
| z-index -1 | z-1 |
| z-index 0 | z0 |
| z-index 1* | z1 |
* Additional values available are 2, 3, 4, 5, 10, 20, 30, 40, 50, 99, 999, 9999.
Overflow
Here are all the classes that are available to you to use in this way:
| Description | Class name |
| Overflow visible | of-visible |
| Overflow hidden | of-hidden |
| Overflow scroll | of-scroll |
| Overflow x visible | ofx-visible |
| Overflow y visible | ofy-visible |
Display
Here are all the classes that are available to you to use in this way:
| Description | Class name |
| Do not display (display none) | d-none |
| Display as inline | d-inline |
| Display as inline block | d-inline-block |
| Display as block | d-block |
| Display as table | d-table |
| Display as table cell | d-table-cell |
| Display as flex | d-flex |
| Display as grid | d-grid |
| Display as inline flex | d-inline-flex |
Display - responsive modifiers
In addition, if you wish to apply different display options to larger devices then you can add in a modifier. For example, to set a medium+ device (>600px) to display as flex you would use the class d-m-flex. Where the 'm' represents 'medium'. You can do the same with 'l' (large >900px) and 'xl' (x-large >1200px).
Size
Here are all the classes that are available to you to use in this way:
| Description | Class name |
| Width 25% | w-25 |
| Width 50% | w-50 |
| Width 75% | w-75 |
| Width 100% | w-100 |
| Width auto | w-auto |
| Height 25% | h-25 |
| Height 50% | h-50 |
| Height 75% | h-75 |
| Height 100% | h-100 |
| Height auto | h-auto |
| Max-width 100% | mw-100 |
| Max height 100% | mh100 |
| Min width 100vw (viewport width) | min-vw-100 |
| Min height 100vh (viewport height) | min-vh-100 |
| Width 100vw | vw-100 |
| Height 100vh | vh-100 |
Source utility classes reference list (optional)
Margins
If you opt to add margin classes then you will be presented with 4 input boxes where you can set 4 margin values. These 4 sizes can then be referenced via the use of modifiers in the class names (more information below the table.
| Description | Class name |
| No margin (margin: 0) | m-0 |
| No top margin | mt-0 |
| No bottom margin | mb-0 |
| No right margin | mr-0 |
| No left margin | ml-0 |
| No left or right margin (x-axis) | mx-0 |
| No top or bottom margin (y-axis) | my-0 |
| Apply margin value 1 to all sides (or 2, 3 or 4*) | m-1 |
| Apply margin value 1 to top | mt-1 |
| Apply margin value 1 to bottom | mb-1 |
| Apply margin value 1 to right | mr-1 |
| Apply margin value 1 to left | ml-1 |
| Apply margin value 1 to left and right | mx-1 |
| Apply margin value 1 to top and bottom | my-1 |
| Margin auto | m-auto |
| Margin top auto | mt-auto |
| Margin bottom auto | mb-auto |
| Margin left auto | ml-auto |
| Margin right auto | mr-auto |
| Margin left and right auto | mx-auto |
| Margin top and bottom auto | my-auto |
| Remove the margin: auto setting from child stacks (useful for when using flex alignment) | stacks-margin-0 |
* Simply replace the 1 for the desired value (2, 3 or 4).
Margins - responsive modifiers
In addition, if you wish to apply different margins to larger devices then you can add in a modifier. For example, to set a medium+ device (>600px) to use margin value 2 for all sides you would use the class m-m-2. Where the middle 'm' represents 'medium'. You can do the same with 'l' (large >900px) and 'xl' (x-large >1200px).
Margins - negative margins
Additonally there is the option to add a modifier to create negative margins. To do this you simply need to add the letter 'n' (for negative) before the margin value. For example to add a negative left margin of value 2 to medium and above devices you would use ml-m-n2.
Padding
If you opt to add padding classes then you will be presented with 4 input boxes where you can set 4 padding values. These 4 sizes can then be referenced via the use of modifiers in the class names (more information below the table).
| Description | Class name |
| No padding (margin: 0) | p-0 |
| No top padding | pt-0 |
| No bottom padding | pb-0 |
| No right padding | pr-0 |
| No left padding | pl-0 |
| No left or right padding (x-axis) | px-0 |
| No top or bottom padding (y-axis) | py-0 |
| Apply padding value 1 to all sides (or 2, 3 or 4*) | p-1 |
| Apply padding value 1 to top | pt-1 |
| Apply padding value 1 to bottom | pb-1 |
| Apply padding value 1 to right | pr-1 |
| Apply padding value 1 to left | pl-1 |
| Apply padding value 1 to left and right | px-1 |
| Apply padding value 1 to top and bottom | py-1 |
* Simply replace the 1 for the desired value (2, 3 or 4).
Padding - responsive modifiers
In addition, if you wish to apply different padding to larger devices then you can add in a modifier. For example, to set a medium+ device (>600px) to use padding value 3 for the top you would use the class pt-m-3. Where the middle 'm' represents 'medium'. You can do the same with 'l' (large >900px) and 'xl' (x-large >1200px).
Border
If you opt to add border classes then you will be presented with 3 input boxes where you can set 2 width values and also a border radius value.
| Description | Class name |
| Border value 1 at all sides (or 2*) | b-1 |
| Border value 1 at top | bt-1 |
| Border value 1 at bottom | bb-1 |
| Border value 1 at left | bl-1 |
| Border value 1 at right | br-1 |
| No border | b-0 |
| No border at top | bt-0 |
| No border at bottom | bb-0 |
| No border at left | bl-0 |
| No border at right | br-0 |
| Rounded border | rounded |
| Rounded right border | rounded-right |
| Rounded left border | rounded-left |
| Rounded top border | rounded-top |
| Rounded bottom border | rounded-bottom |
| No rounding | rounded-0 |
| Rounded circle | rounded-circle |
* Simply replace the 1 for a 2 to use the alternative width value.
Border - responsive modifiers
In addition, if you wish to apply different borders to larger devices then you can add in a modifier. For example, to set a medium+ device (>600px) to not have a right border you would use the class border-m-right-0. Where the 'm' represents 'medium'. You can do the same with 'l' (large >900px) and 'xl' (x-large >1200px).
Flex
You can also opt to add in classes that can be used to apply flexbox settings to items.
| Description | Class name |
| Flex direction row | flex-row |
| Flex direction column | flex-column |
| Flex row reverse | flex-row-reverse |
| Flex column reverse | flex-column-reverse |
| Flex wrap | flex-wrap |
| Flex no wrap | flex-nowrap |
| Flex wrap reverse | flex-wrap-reverse |
| Justify content start (or end, center, space between, space around) | justify-content-start (or end, center, between, around) |
| Align items start (or end, center, baseline, stretch) | align-items-start(or end, center, baseline, stretch) |
| Align content start (or end, center, space between, space around, stretch) | align-content-start (or end, center, between, around, stretch) |
Flex - responsive modifiers
In addition, if you wish to apply different flexbox settings to larger devices then you can add in a modifier. For example, to set a medium+ device (>600px) to justify content as space between you would use the class justify-content-m-between. Where the 'm' represents 'medium'. You can do the same with 'l' (large >900px) and 'xl' (x-large >1200px).
Downloadable project file
Here is a project file with a few worked examples of using several of these classes.
