Utility classes (Base)

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) s-flow-down 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)

Still puzzling over something?