Utility classes (Addon stack)

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. Download project file

Still puzzling over something?