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:
| Description | Class name |
| Base max width value | source-base-width |
| Base max width value (Alt) | source-base-width-alt |
| Align text left | u-align-left |
| Align text centre | u-align-center |
| Align text right | u-align-right |
| Clear float | u-cf |
| Set full width (100%) | w-100 |
| Set max-width 100% | u-max-full-width |
| Float left | u-pull-left |
| Float right | u-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) | |
| Left | s-align-left | m-align-left | l-align-left | xl-align-left |
| Center | s-align-center | m-align-center | l-align-center | xl-align-center |
| Right | s-align-right | m-align-right | l-align-right | xl-align-right |
Source utility classes reference list (Effects)
Adding these classes will add (or cancel) an effect.
| Description | Class name |
| UPPERCASE text | u-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 hover | s-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 screen | s-screen |
| Set 'mix-blend-mode' to multiply | s-multiply |
| Set 'mix-blend-mode' to exclusion | s-exclusion |
| Set stack content to fade at top and/or bottom | s-fade PLUS s-fade-t and/or s-fade-b |
| No pointer events / allow click-throughs | s-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 reveal | s-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 devices | hide-touch |
| Hide content on non-touch devices | hide-non-touch |
