How to use Utility Classes to standardise your next Webflow project

In the case that we want to override default values of the global class we’re adding combo classes.

Padding

‍

All projects need to have global padding pre defined. As we’re using a 4px system it will be easy to fall under:

From Top and Bottom

• Padding XXS
• Padding XS
• Padding S
• Padding M
• Padding L
• Padding XL
• Padding XXL‍
• Padding 3XL
  

One Sided (Created Per Project Basis)

• Padding Top None
• Padding Bottom None
• Padding Top S
• Padding Top XL
• Padding Bottom XXL

*For the one sided paddings, we’re usually creating these on a per project basis. This way we can use them only in projects that need them the most.

All Paddings are scaling to Tablet, Mobile Landscape and Mobile accordingly.

Removing Padding

• No Padding

*Removes all padding from top and bottom

Margin

‍

All projects come with global Margins that can be applied on Global Classes:

For Bottom

• Margin Bot XXS
• Margin Bot XS
• Margin Bot S
• Margin Bot M
• Margin Bot L
• Margin Bot XL
• Margin Bot XXL
• Margin Bot 3XL
  

For Top, Left Right

• Margin Top L
• Margin Top S
• Margin Right XL
• Margin Left XXL

Removing Margin

• No Margin

*Removes margin from all sides from the element.

All Margins are scaling to Tablet, Mobile Landscape and Mobile accordingly.

Max Width

In order to standardise the project and not end up in the state where we have 124 Max Width elements (Max Width 923, Max Width 945, Max Width 966 and on..)

We are using utility classes:

• Max Width S
• Max Width M
• Max Width L
• Max Width XL
• Max Width XXL
• Max Width 3XL
  

These are defined by default, and we try to design the pages with these in mind.

All Max Width classes are scaling to Tablet, Mobile Landscape and Mobile accordingly.

Background Color

The greatest use-case for this is when we are applying it to section elements. In the case of adding a Section Element to the page we can also apply → Section BG White

All projects come with:

‍

Neutral Colors

• BG Neutral → Usually White
• BG Neutral 100 → Usually Light Grey
• BG Neutral 200 → Usually Grey
• BG Neutral 300 → Usually Darker Grey
• BG Neutral 400 → Usually Close to Black
• BG Neutral 500 → Usually Really Close to Black
• BG Neutral 600 → Usually Black

Naming convention like this for colors allows avoiding having classes like BG Grayish and BG Almost Gray. It is easier to follow design, and you know that if you’ve missed the color you only need to go 100 shades up or down.

‍

Project Specific Colors

After having the neutral colors that each project has set, we have specific colors that are added per project basis like:

For the main brand color:

• BG Blue 100
• BG Blue 200
• BG Blue 300
  

For the secondary brand color:

• BG Green 100
• BG Green 200
• BG Green 300
  

Some Unique Colors:

• BG Sand 100
• BG Sand 200
• BG Sand 300
  

And the list goes on and on. Good thing about this is that you don’t have to have 6 different shades of each color. You can only add amount of shades you actually need and work from those.

Text Colors

There are many instances where the global text color won’t work for you. So we are using a similar set up to background colors:

‍

‍Neutrals applied to all projects

• Text Neutral → Usually White
• Text Neutral 200 → Usually Grey
• Text Neutral 400 → Usually Close to Black
• Text Neutral 600 → Usually Black
  

And after that specific text overrides

• Text Blue 100

Usually texts will have much less global classes for colors. So we’re creating them per project basis to not cause confusion.

‍

Misc Utility

In some instances there are specific classes we want to use to override defaults like:

Overflow None

Removes overflow from the element

• Overflow None

‍

Relative

Sets the element to relative

• Relative

‍

Z Index

Adds a Z index to the element usually used like:

• Z Index 1
• Z Index 99
  

‍

Flex

For the ease of positioning elements in the Container or Column, we can use Flex Classes:

• Flex Left
• Flex Right
• Flex Center

Text Alignment

Text alignment is applied only on the text element it self. We’ve tried applying it to parent classes but it doesn’t play out so well in the end as then we need to override text positioning for the Component Classes

• Text Left
• Text Right
• Text Center

*As described later on we often use these with the addition of Tablet or Mobile specific use cases

Tablet Specific

When we need to have some tablet specific classes, we are adding a pre fix of Tablet to any of the above.

So it would be:

• Tablet Margin Right L
• Tablet Padding S
• Tablet Max Width L
• Tablet Overflow None
• Tablet No Margin
• Tablet Flex Center
• Tablet Text Center

*These are used when an element doesn’t have a max width on desktop but has it on Tablet.

Mobile Landscape & Mobile Specific

When we need to have some tablet specific classes, we are adding a pre fix of Mobile to any of the above.

So it would be:

• Mobile Margin Right L
• Mobile Padding S
• Mobile Max Width L
• Mobile Overflow None
• Mobile No Margin
• Mobile Text Center
• Mobile Flex Center

*These are used when an element doesn’t have a max width on desktop and tablet but has it on Mobile Landscape & Mobile.