Build by The Wall.
Class Strategy
A methodical holistic approach to how to use, create and overlook classes.
Class Types
Build Classes
- Element type: global class
- Purpose: use across whole project
- Usability: quick stylising and building
- Styling: via variables, styles and custom properties
Examples:
sidebar
nav-bar
footer
shop_front
Utility Classes
- Element type: global class (doesn't use underscore in class names)
- Purpose: commonly used classes for development inside of Webflow
- Usability: quick stylising and building
- Styling: via variables, styles and custom properties
Examples:
heading-style-h1
container-large
flex-horizontal
gap-is-xxxsmall
Combo Classes
- Element type: class
- Purpose: to create certain style, by adding up to two classes
- Usability: quick changes to either utility or build classes
- Styling: has a combo styling of used classes
Examples:
text-size-medium
text-color-brand-primary
flex-horizontal
is-tablet-vertical
info-block
is-sticky
Custom Classes
- Element type: global class (uses underscore in class names)
- Purpose: to be used inside of a specific component, page, grouping of elements, or single element
- Usability: create a fully custom styling for a specific element, without any limits
- Styling: custom stylised
Examples:
testimonial_block
testimonial_block-heading
profile_avatar
dashboard_sidebar_content-block