Utility classes (Base)


By Stuart Marshall

updated 9 months ago

Source makes use of a number of utility classes that are loaded via the Source Base stack. All of the Source stacks make use of this common code (e.g. for all the alignment options etc). If you are using third-party stacks (or the Source Coder stack) then you may wish to apply these classes manually.

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.

NOTE: You can see a list of the more commonly required class names within RapidWeaver Edit mode by toggling the 'Show available classes' switch in the Source Base stack. Doing this will reveal the class names for most Source colours and also for any Container Base stacks that have been added to the page. There is also a Knowledge Base page specifically relating to using Source colours.

Source utility classes reference list (General)

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

DescriptionClass name
Base max width valuestripped-base-width
Align text leftu-align-left
Align text centreu-align-center
Align text rightu-align-right
Clear floatu-cf
Set full width (100%)w-100
Set max-width 100%u-max-full-width
Float leftu-pull-left
Float rightu-pull-right
Create flex container (column)s-flex
Set flex-wrap as 'nowrap' (to switch how overflowing content is positioned in a flex container e.g. a grid item)

Source utility classes reference list (Responsive text alignment)

Here are all the classes that you can add to apply responsive alignment options to a div. Add one or more of these to any div to control alignment at the different breakpoints.

Small (Max-width: 600px)Medium (Min-width: 600px)Large (Min-width: 900px)
XL (Min-width: 1200px)

Source utility classes reference list (Effects)

Adding these classes will add (or cancel) an effect.

DescriptionClass name
UPPERCASE textu-case
Cancel 'raise on hover' effect (if using global setting in a grid etc)s-no-lift
Raise on hover (lift by 5px)s-lift
Lower on hover (by 5px)s-drop
Zoom on hover (scale by 1.05)s-zoom
Zoom on hover (scale by 1.1)s-zoom-big
Child image zoom on parent hover (scale by 1.05)s-zoom-img
Child image zoom on parent hover (scale by 1.1)s-zoom-img-big
Brighten on hover (from 80% to 100%)s-bright
Darken on hovers-dark
Blur on hover (from 0 to 4px)s-blur
Unblur on hover (from 4px to 0)s-unblur
Blur effect**s-blur-bg
Frost effect**s-frost
Set 'mix-blend-mode' to screens-screen
Set 'mix-blend-mode' to multiplys-multiply
Set 'mix-blend-mode' to exclusions-exclusion
No pointer events / allow click-throughss-no-pointer
Drop shadow *s-shad
Drop shadow (on hover) *s-shad-hov
Remove drop shadow *s-shad-none
Rotate text *text-rotate
Rotate text (Upwards) *text-rotate-up
Rotate 180deg *s-flip
Reveal content on hover (works with the hide classes below)s-reveal
Hide content *s-hide
Hide content (Non-touch devices only)s-hide-nt
Hide content on reveals-hide-on-reveal

* Also available to target only on medium+ devices (>600px) by adding the modifier -m (e.g. text-rotate-m), large devices by adding -l and extra large devices by adding -xl
** These effects use 'backdrop-filter' which is supported in over 90% of global browser usage (though not in Firefox yet).

See demo of using Hide/Reveal classes

Source utility classes reference list (Visibility)

Hide content on touch deviceshide-touch
Hide content on non-touch deviceshide-non-touch

Did this answer your question?