WebflowWebflow Enterprise Partner
08Utility Classes

A standardized library of utility classes can go a long way toward jump starting a build and keeping team members on the same page. Below is list of what a utility class library might look like, and a description of each class's function.

Tip: Webflow will delete unused classes when using the Clean Up function in the Style Manager panel. In order to avoid having pre-defined but unused utility classes deleted, its important to maintain a symbol with each and every utility class applied. This will mark the classes as "in use," and will keep them from disappearing.

Element Behavior

Section The Section class eliminates unintended horizontal scroll bars caused by negative margins on the left and right.

overflow: hidden;

Section - With Overflow The Section class does not change the default behavior, but prevents a normal .section class from being added. This is typically needed when animation requires elements escape the top or bottom of a section.

n/a

Container The Container class allows us to hack the max-width of the container element, and also allows us to define consistent padding across different viewports. The default max-width (940px) precludes extra large viewports (up to 1440px wide), so the .container class opens up the container element to use on larger screens. And declaring these gutters at the container element level eliminates the need to have to do it over and over again with interior margins, and makes updating those gutters easier.

Trick: Because the max-width style property is disabled by default, this style needs to be defined and edited on a standard div, then applied to the container element to overwrite the default styles.

position: relative;
padding-left: 10px;
padding-right: 10px;
max-width: 1440px;

Columns Adding the Columns class overrules the columns wrapper’s default negative margins. These negative margins are intended to offset the interior padding of the column, preventing the content from being offset from the grid. These negative margin values will need to be adjusted according to the interior padding of the columns (half of the gutter width).

margin-left: -10px; /* customizable */
margin-right: -10px; /* customizable */

Column Adding the Column class adjusts the left and right padding of columns to create custom column gutter widths. This must align with the negative margins set to Columns.

padding-left: 10px; /* customizable */
padding-right: 10px; /* customizable */

Rich Text Block The Rich Text Block is a reference class used to identify elements within a rich text block in custom CSS code. There might be a case where you’d like to style a quote block differently within a blog layout than you would within a standard page layout, so this class gives you a way to style elements despite not having access to apply classes within rich text blocks.

n/a
Positioning

Center The Center class horizontally centers an element’s contents.

text-align: center;

Center - Tablet - Mobile

@media(max-width: 991px) {
  text-align: center;
}

Center -  Mobile

@media(max-width: 767px) {
  text-align: center;
}

Vertical Center The Vertical Center class vertically centers an element within its parent element.

Note: This requires a containing element with relative positioning.

position: relative;
top: 50%;
transform: translate(0px, -50%);

Spacing - Large Spacers add bottom margin to an element. Having a set of these ensures consistent vertical spacing across pages.

Tip: These may need to be adjusted on a project-by-project basis to capture the design language.

margin-bottom: 8.33vw;

Spacing - Medium

margin-bottom: 4.165vw;

Spacing - Small

margin-bottom: 2.08vw;

Spacing - Extra Small

margin-bottom: 10px;

Margin - Top - 0 The Margin - Top - 0 class removes the top margin for element. This is useful when a section of content begins with a headline whose top margin is creating inconsistent spacing.

margin-top: 0px;

Margin - Bottom - 0

margin-bottom: 0px;

Margin - Top - Auto The Margin - Top - Auto class will align an element to the bottom of its containing element when the containing element’s parent is set as a vertical flex layout.

margin-top: auto;

Margin - Bottom - Auto

margin-top: auto;

Margin - Bottom - Mobile Spacer When a row of columns stacks at the Mobile viewport, they need bottom margins at that viewport in order to avoid sitting directly on top of one another. This class will add the margin to any stacking column.

@media(max-width: 767px) {
  margin-bottom: 4.165vw; /* Customizable */
}

Flex Wrap - Mobile A parent div set to Flex will, by default, divide horizontal real estate equally among its children elements. Enabling wrap will defer to the element's width declaration.

@media(max-width: 767px) {
  display: flex;
  flex-wrap: wrap;
}

Position - Relative Relative positioning is needed when an element with fixed position needs to be positioned relative to its parent element. Without relative positioning, a child element with fixed positioning will display relative to the page. With relative positioning, that same child element will display relative to the parent element.

This class can also be used to overrule a position style property set to auto, absolute or fixed in a complex class.

Example: An icon needs to be positioned in the top left corner of a card. When applying fixed position to the element and positioning it to the top left, it shows up in the top left corner of the page. Adding the Relative class to the card div will contain the positioning of the icon to the card, achieving the desired display.

position: relative;

Position - Absolute Absolute positioning is used to break an element out of sequential display, and to display it relative to its parent container or the page. It can be used to overrule a complex class with position set to auto, relative or fixed.

position: absolute;

Z - Top This class sets the object's position to relative and the z-index to 9999.

Example: Content with a section is set to fixed to achieve a parallax effect. If that content has a z-index set, it may persist over the top of other sections as the user scrolls down the page. To prevent this, adding Z - Top to the other sections of the site will force the fixed content to scroll beneath the other content.

Tip: Utility classes can also be created to enable z-index tiers (9999, 999, 99, 9) and different position declarations. Z - Middle Z - Bottom Z - Negative Z Absolute - Top Z Absolute - Middle Z Absolute - Bottom Z Absolute - Negative Z Fixed - Top Z Fixed - Middle Z Fixed - Bottom Z Fixed - Negative

position: relative;
z-index: 9999;

Hide This class can be used to temporarily hide an element while working in the Designer, or to hide an element that will later be revealed using interactions or custom javascript.

Tip: Hide is useful for hiding interactive elements that impede editing of content inside the Webflow Designer. This can be overridden with the Initial State in the Interactions 2.0 display.

Note: This should not be used to permanently hide an unused element within a page. Unused elements should be discarded from the page.

display: none;

Desktop Only Desktop Only is used to declare that an element displaying on Desktop and Tablet viewports does not display on Mobile viewports.

Example: A large, multicolumn table may make sense on Desktop or Tablet, but may be better replaced by a more concise display of the data on Mobile. In such a case, the Hide - Mobile class would hide the large, multicolumn table on Mobile viewports.

@media(max-width: 767px) {
  display: none;
}

Tablet Only

display: none;
@media
(max-width: 991px) {
  display: block;
}
@media(max-width: 767px) {
  display: none;
}

Mobile Only

display: none;

@media
(max-width: 767px) {
  display: block;
}

Hide - Desktop

display: none;

@media
(max-width: 991px) {
  display: block;
}

Hide - Mobile

display: block;

@media
(max-width: 767px) {
  display: none;
}

Flex Flip - Mobile The Flex - Flip - Mobile class reverses the display order of sibling elements on Mobile viewports.

Use: Content that appears side-by-side in columns may not appear in the ideal order when stacked. An image that appears in the right column, for instance, may appear below its associated text by default when stacked at the Mobile viewport. So the Flex - Flip - Mobile class would reverse the display order of the stacked columns.

@media(max-width: 767px) {
  display: flex;
  flex-direction: row-reverse;
}

Flex Flip - Tablet

@media(max-width: 991px) {
  display: flex;
  flex-direction: row-reverse;
}

Horizontal Rule Because Webflow does not currently support the horizontal rule HTML element, this class can be added to a div to display a 1 pixel tall line that behaves like the HTML element would.

Tip: This should be adjusted on a project-by-project basis to suit the design language.

height: 2px; /* Customizable */
background-color: #000; /* Customizable */
Sizing

Full Height Sets full height to an object.

Tip: Safari doesn't recognize a 100% height declaration on an object inside a flex parent. Nested flex objects should be used instead.

height: 100%;

Height - Auto Auto height defines an object's height based on its contents. This is often used in concert with an animation, where an object might grow from 0px to auto, for instance,

height: auto;

Full Width Full width is often used to make an object set to inline-block display behave as if it is set to block display. It's often useful when an object is set to fixed or absolute position, which removes the block behavior despite the display setting.

width: 100%;

Width - Auto Auto width defines an object's width based on its contents. This is often used in concert with an animation, where an object might grow from 0px to auto, for instance.

width: auto;

Flex Parent Flex is used to equalize the height of two sibling elements. This is most often attached to a row element to equalize the height of its columns.

display: flex;

Flex Child

display: flex;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

Flex Child - Vertical Center

self-align: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
Padding

Padding - None Removes an object's padding on all four sides.

padding: 0px;

Padding - Large Using a consistent set of top and bottom paddings creates consistent display across the project.

Tip: This should be adjusted on a project-by-project basis to suit the design language.

padding: 12.5vw;

Padding - Medium

padding: 8.33vw;

Padding - Small

padding: 4.165vw;

Padding - Extra Small

padding: 2.08vw;

For seamless stacking, we use a system of stacking classes that overwrite top and bottom padding.

Stackable

padding-top: 0;
padding-bottom0;

Stackable - Top

padding-bottom0;

Stackable - Bottom

padding-top: 0;
Styling

H1H6 It’s helpful to disassociate the styles of headlines from the semantic headline elements for ideal accessibility. A specific visual style of a headline may appear second in the hierarchy on one page, but first on the next. For this reason, in order to maintain accessibility as well as a consistent design language, an H1 HTML object may need to be tagged with an H2 class.

Tip: These should be adjusted on a project-by-project basis to suit the design language.

n/a

Button The Button class defines a consistent button style across the site.  Certain style properties can then be overridden with classes like Background -Black or Text- White to create alternative buttons, and custom simple classes like Secondary or Tertiary can further adjust the visual presentation of buttons.

Tip: This should be adjusted on a project-by-project basis to suit the design language.

border-radius: 5px;

Background - Black This class applies a black background to an object.

Tip: This approach can be used to define all common background colors on a project.

background-color: #000;

Text - White This class applies white text to an object.

Tip: This approach can be used to define all common text colors on a project.

color: #fff;

Caps This class applies capitalization to an object's text.

text-transform: uppercase;
letter-spacing.05em;

No Border This class removes all borders from an element.

border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

Nav Link The .nav-link class styles the navigation links.

Tip: This should be adjusted on a project-by-project basis to suit the design language.

Note: This class has multiple states.

n/a

Link Block Removes the hyperlink styling from child elements of a link block.

Tip: The text color should be adjusted on a project-by-project basis to suit the design language.

text-decoration: none;
color: #333; /* Customizable */

Faux Link The Faux Link class makes regular text match the link or CTA style of the site when it’s nested inside an unstyled link block element.

Tip: This should be updated to match the link style on a project-by-project basis.

text-decoration: underline; /* Customizable */
Images

Image - 16x5 Added to a div surrounding an image in order to crop that image. (This is covered in detail in Session 09 - Responsive Images.)

Note: Also requires Object Fit Wrapper for Internet Explorer fall-back.

position: relative;
overflow: hidden;
padding-top: 31.25%;

Image - 21x9

position: relative;
overflow: hidden;
padding-top: 42.8571%;

Image - 2x1

position: relative;
overflow: hidden;
padding-top: 50%;

Image - 16x9

position: relative;
overflow: hidden;
padding-top: 56.25%;

Image - 4x3

position: relative;
overflow: hidden;
padding-top: 75%;

Image - 1x1

position: relative;
overflow: hidden;
padding-top: 100%;
Script-Related Utility Classes

Object Fit This class allows an image object to behave (when placed inside a parent element with a defined height and width) like a background image with the cover background size declared. This is preferable to using background images because that would require that a new class be created for each new background image, and it also retains the accessibility. (This is covered in detail in Session 09 - Responsive Images.)

Note: Object Fit is not supported natively by Webflow, so this CSS has to be added manually.

Note: For Internet Explorer support, the image’s parent element must include the .object-fit-wrapper class.

object-fit: cover;
height: 100%;
width: 100%;
left: 50%;
top: 50%;
transform: translate (-50%,-50%);

Object Fit Wrapper This class, when added to an image sizing div (i.e. Image - 16x5), enables a javascript Internet Explorer fall-back for object-fit behavior. The script takes the image contained by the wrapper and applies it to the background of the Object Fit Wrapper object with the cover background size property.

n/a

HTML Conversion Added to an Embed element to convert plain text back into HTML.

n/a

Up next

09 Responsive Images
Runtime: 5m 23s

It takes a little trial and error but with some custom code and patience, we found an approach for managing images across viewports that was both accessible and sustainable, allowing for control of the images across all viewports.

Take me there