Utility classes (Addon stack)

Avatar

By Stuart Marshall

updated 3 months ago

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:

DescriptionClass name
Position staticposition-static
Relative positionposition-relative
Absolute positionposition-absolute
Fixed positionposition-fixed
Fix to top of the screenfixed-top
Fix to bottom of the screenfixed-bottom

z-index

Here are all the classes that are available to you to use in this way:

DescriptionClass name
z-index -1z-1
z-index 0z0
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:

DescriptionClass name
Overflow visibleof-visible
Overflow hiddenof-hidden
Overflow scrollof-scroll
Overflow x visibleofx-visible
Overflow y visibleofy-visible

Display

Here are all the classes that are available to you to use in this way:

DescriptionClass name
Do not display (display none)d-none
Display as inlined-inline
Display as inline blockd-inline-block
Display as blockd-block
Display as tabled-table
Display as table celld-table-cell
Display as flexd-flex
Display as inline flexd-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:

DescriptionClass name
Width 25%w-25
Width 50%w-50
Width 75%w-75
Width 100%w-100
Width autow-auto
Height 25%h-25
Height 50%h-50
Height 75%h-75
Height 100%h-100
Height autoh-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 100vwvw-100
Height 100vhvh-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.

DescriptionClass name
No margin (margin: 0)m-0
No top marginmt-0
No bottom marginmb-0
No right marginmr-0
No left marginml-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 topmt-1
Apply margin value 1 to bottommb-1
Apply margin value 1 to rightmr-1
Apply margin value 1 to leftml-1
Apply margin value 1 to left and rightmx-1
Apply margin value 1 to top and bottommy-1
Margin autom-auto
Margin top automt-auto
Margin bottom automb-auto
Margin left automl-auto
Margin right automr-auto
Margin left and right automx-auto
Margin top and bottom automy-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).

DescriptionClass name
No padding (margin: 0)p-0
No top paddingpt-0
No bottom paddingpb-0
No right paddingpr-0
No left paddingpl-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 toppt-1
Apply padding value 1 to bottompb-1
Apply padding value 1 to rightpr-1
Apply padding value 1 to leftpl-1
Apply padding value 1 to left and rightpx-1
Apply padding value 1 to top and bottompy-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. 

DescriptionClass name
Border value 1 at all sides (or 2*)b-1
Border value 1 at topbt-1
Border value 1 at bottombb-1
Border value 1 at leftbl-1
Border value 1 at rightbr-1
No borderb-0
No border at topbt-0
No border at bottombb-0
No border at leftbl-0
No border at rightbr-0
Rounded borderrounded
Rounded right borderrounded-right
Rounded left borderrounded-left
Rounded top borderrounded-top
Rounded bottom borderrounded-bottom
No roundingrounded-0
Rounded circlerounded-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. 

DescriptionClass name
Flex direction rowflex-row
Flex direction columnflex-column
Flex row reverseflex-row-reverse
Flex column reverseflex-column-reverse
Flex wrapflex-wrap
Flex no wrapflex-nowrap
Flex wrap reverseflex-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.

Download project file

Did this answer your question?