A Vertical Spacing System for scalable and maintainable Webflow sites

Once you have a few Webflow projects behind your back, you start realizing there are basic CSS properties and values that you keep using all the time. If you had them ready to use, you could improve your workflow and reduce the inherent decision-making in the class creation process.

Matias Pitters the Master Flowmaker
Matias Pitters
Master Flowmaker

One of the first needs that constantly arise when creating our layouts in Webflow are those related to vertical spacing. We find different ways of approaching it. The most common is to use margin on its bottom or top side. Although padding gives a similar result. Other way is to create empty divs and use the height property to create vertical spacing. There are people even considering one column grid for this purpose (but this is a whole new story that will be addressed in the future). The reality is that vertical spacing is a fundamental web design principle that have a tremendous impact in the readability of our sites. That's why is crucial to nail it by the time we start working on a blank canvas in the Webflow Designer.

We must not forget that spacing is a design decision and not a front-end one. That being said, I know there are multiple times when designs are handed off without a clear spacing structure. In other words, a spacing mess. With a spacing system in place, we can look after those randomly chosen spacing values without much effort. In addition, having a defined spacing system, can approach this design conversation prior to any design work and establish spacing right from the beginning.

On this article you will find the following information.

  • Why we need a Vertical Spacing System
  • Prior concepts to keep in mind before defining the system.
  • How to build the spacing system: scale definition, values, naming convention, usage, scalability and responsiveness.
  • A clonable project to start bringing logic and structure to your vertical spacing in Webflow.

Why the need of a Vertical Spacing System

The foremost reason we need a spacing system comes from a workflow optimization perspective. Having a set of predefined classes to space elements, alleviates the decision-making that comes with creating and naming classes. Given that almost every element needs to be vertically spaced from its siblings, having a VSS in place is a huge time-saver.

The next reason is to set visual expectations. As humans, we are constantly looking for patterns, with our sight as our fastest sense on assimilating them. Patterns make us feel comfortable, they assure us what's next. By using a VSS we create a welcoming visual environment where the user can focus on the content without investing mental energy deciphering unpredictable structures.

The last reason is harmony. A spacing system is comprised by one or more scales. The definition of scale implies relationship between the elements that conform it. Behind every scale, there are a set of numeric rules or formulas that create a deep sense of unity and wholeness over randomly chosen values. As in musical scales, visual scales create an environment we can play with. How to play on this environment is up to each composer.

Prior considerations to building the Vertical Spacing System

The 8pt grid

We are using the widespread 8pt grid to base our system on. If you are one of those people that, strangely enough, haven't heard of it, the 8 point grid is, as it names states, a grid where the different spacing dimensions are set as multiple of 8.

The reason we are using the 8pt grid as our base is because it has become a standard when designing and implementing for the web. Why it became that popular in the first place? I will let that Google task for you as I haven't find any defining answer. This article on the 8pt grid from Vitsky will give you pointers as well.

Desktop-first scale

Not much to say here as the title is self explanatory. Given that Webflow is a "desktop" first platform, the scale will be defined for larger screens and then adapted to hand-held and narrower displays.

Mobile breakpoint

As I go through the responsive part of  the system, I don't differentiate between the native Landscape and Portrait breakpoints. I treat both as the same and call it Mobile breakpoint. There isn't much people accessing the web from viewport widths within Webflow's Landscape breakpoint.

Choosing margin as the vertical spacing property and bottom as the vertical spacing direction.

I choose margin over padding because it goes along with the idea of separating elements instead of separating the content from its containing box. Although using either property will give the same result (almost every time, as overlaying margins overlap while paddings don't).

Margin and padding for vertical spacing
Using margin or padding for vertical spacing gives the same result

Going with the bottom side as the spacing direction takes into account the default stacking direction in the HTML box model.

The Non-Linear Responsive Downsizing Principle

Wait, wait, wait, Non-Linear Responsive... WHAT!?!?

Let me explain. As the name might sound complex, the idea behind it is simple.

After years of delivering responsive sites I've realized, as many of you, that dimensions set for desktop screens don't scale by the same factor for mobile devices. In other words, an H1 heading on desktop might be half its size on mobile while the 16px body copy doesn't suffer any size changes at all.

How this translates to the scale in our Vertical Spacing System? Sizes on the greater side of the scale will reduce a good portion of their original size when on mobile viewports. Sizes from the middle of the scale will have a lesser reduction. And smaller sizes won't change across breakpoints.

Defining the Base Scale

This is the Base Scale in our Vertical Spacing System.

Vertical spacing scale
Vertical Spacing Scale with twelve values based on the 8pt grid
  • 4 px — (.25 rem)
  • 8 px — (.50 rem)
  • 12 px — (.75 rem)
  • 16 px — (1 rem)
  • 24 px — (1.5 rem)
  • 32 px — (2 rem)
  • 48 px — (3 rem)
  • 64 px — (4 rem)
  • 96 px — (6 rem)
  • 128 px— (8 rem)
  • 192 px— (12 rem)
  • 256 px — (16 rem)

The scale has 12 values. This allows for a flexible gamut without going wide or short in the value spectrum. Too many values would blur the idea of creating visual expectations, making it difficult to establish patterns. Going short in the spacing options would affect the ability to use white space as a key visual device to build harmonious layouts. 12 is a solid number.

At first sight, this is a plain set of values, but there is logic behind this numbers. Let's dive into it.

16 as our base value

16 as the base number serves as the differentiator of two types of progression happening in the scale.

The values to the left of our base number, those in the lowest side of the spectrum, aren't part of the 8pt grid but part of the 4pt grid.

Left side of the vertical spacing scale
Left side of the scale are based on the 4pt grid

The 8pt grid works great for medium and greater values but comes short when we're dealing with micro-spacing. Here is where the 4pt grid comes handy, allowing to set values as multiple of 4. We can say that the 4pt grid is the 8pt grid's little sibling. This way, 16 is the base number from which both sides of the scale start.

Vertical scale base number
16 is the base number of the scale

There is another complementary reason. Taking to account that the majority of browsers set their default font size to 16px, makes it a natural move to set the body copy of a given site to 16px. If that's the case, your spacing and typography systems will be tied together by this number.

Bigger values, bigger contrast

If we focus on the right side of the scale, we can see how values increase, where increments near to the base are small and as we move away from it, increments are bigger.

Visual weights of the scale
Visual weights of the Vertical Spacing Scale

Let's illustrate the logic of these increments.

  • 24 and 32 are set with 8px (.50 rem) increments.
  • 48 and 64 are set with 16px (1 rem) increments.
  • 96 and 128 are set with 32px (2 rem) increments.
  • 192 and 256 are set with 64px (4 rem)increments.
Steps increments
Incrementes in the scale

Here is where the beauty of the numbers starts to flourish. As you may notice, increments double their size for each group, creating a solid non-linear progression.

Naming convention

With utility-first in mind, we will have one class per each value in our scale. Each of the classes are composed by two parts. The first one tells us what the utility-like class does. The second one defines the value.

A class in our Vertical Spacing System looks like this: "Gap B XL"

Where "Gap B" tells us we are creating a gap in the bottom side of the element and "XL" defines the size of the gap.

From a utility-first perspective in Webflow, where multiple classes are used on the same element, short class names improve readability in the selector box. In addition, short names facilitates the scan of the recommended classes shown in the search classes dropdown. That's why everything on this naming convention is tailored to have a minimum length class name:

  • Use the word "Gap" instead of the full property name as other utility-first framework opt to.
  • Replacing the word "Bottom" for its initial letter.
  • Choose a reduced way of defining values with size abbreviations (XS, S, M, L, XL, ...)

Furthermore, size abbreviations prepare the scale towards scalability, allowing for new values if needed.

Here is the list of classes that define the Base Scale in our Vertical Spacing System in Webflow

Class name convention
The classes representing each of the values of the Vertical Spacing System
  • Gap B 2XS — 4 px — (.25rem)
  • Gap B XS — 8 px— (.50rem)
  • Gap B S — 12 px— (.75rem)
  • Gap B M — 16 px— (1rem)
  • Gap B L — 24 px— (1.5rem)
  • Gap B XL — 32 px— (2rem)
  • Gap B 2XL — 48 px— (3 rem)
  • Gap B 3XL — 64 px— (4 rem)
  • Gap B 4XL — 96 px— (6 rem)
  • Gap B 5XL — 128 px— (8 rem)
  • Gap B 6XL — 192 px— (12 rem)
  • Gap B 7XL — 256 px— (16 rem)

Two ways of applying the vertical spacing classes

With the HTML structure in mind, the one reflected on the Navigator panel in the Webflow Designer, there are two ways of working with the vertical spacing classes:

  • Add a wrapper to the element you are working with and apply the vertical spacing class to it.
  • Add the vertical spacing class directly to the element you are working with.

If you don't like the idea of combining two or more global classes on a single element, you should go with the first option. You'll end up with a few extra divs.

On the other hand, if you are leaning towards or using a utility-first approach, the second option is your friend. You will benefit on how fast is to build with this type of class structure. Be aware you will be combining global classes in the same element and, if you aren't used to this way of working, you can start feeling dizzy quickly. An important reminder here is to not set CSS properties to the combo-classes created as a result of combining two or more global classes.

Making the Vertical Spacing System responsive

Following the NLRD (Non-Linear Responsive Downsizing) principle, bigger values on the scale, have greater reduction ratios as we get to smaller viewports. Here is how the Vertical Spacing System base values downsize for Tablet and Mobile breakpoints.

Tablet

For the tablet breakpoint our values are

Scale values for Webflow's Tablet breakpoint
Responsive values of the scale in Tablet breakpoint
  • 4 px — (.25 rem)
  • 8 px — (.50 rem)
  • 12 px — (.75 rem)
  • 16 px — (1 rem)
  • 24 px — (1.5 rem)
  • 32 px — (2 rem)
  • 40 px — (2.5 rem)
  • 56 px — (3.5 rem)
  • 72 px — (4.5 rem)
  • 88 px— (5.5 rem)
  • 120 px— (7.5 rem)
  • 152 px — (9.5 rem)

In this case, the logic behind this numbers goes as follows:

  • 24, 32, and 40 are set with 8px (.50 rem) increments.
  • 56, 72, and 88 are set with 16px (1 rem) increments.
  • 120 and 152 are set with 32px (2 rem) increments.

Remember how the in base values, the same increment was applied to two consecutive steps in the scale. In this case, the responsive values for the tablet breakpoint, the same increment is applied to three consecutive steps.

Mobile

For Webflow's mobile landscape and portrait breakpoints our values are

Scale values for Webflow's Landscape and Portrait breakpoints
Responsive values of the scale in Mobile (Landscape + Portrait breakpoints)
  • 4 px — (.25 rem)
  • 8 px — (.50 rem)
  • 12 px — (.75 rem)
  • 16 px — (1 rem)
  • 24 px — (1.5 rem)
  • 32 px — (2 rem)
  • 40 px — (2.5 rem)
  • 48 px — (3 rem)
  • 64 px — (4 rem)
  • 80 px— (5 rem)
  • 96 px— (6 rem)
  • 112 px — (7 rem)

In this case, the responsive values for the mobile breakpoint, the same increment is applied to four consecutive steps.

  • 24, 32, 40 and 48 are set with 8px (.50 rem) increments.
  • 64, 80, 96 and 112 are set with 16px (1 rem) increments.

In the following image you can see the Vertical Spacing System on its whole, showing how the values update for Tablet and Mobile

Scale responsive values
Base, Tablet and Mobile values together

Override Scales

There are two complementary scales to our Base Scale. These are related to the smaller breakpoints, Tablet and Mobile. They are use to override the default responsive values from the Base Scale. We call these Override Scales.

Let's go into detail to explain the use of the Override Scales.

The majority of the times, the responsive reduction of the Base Scale values will work, but there will be cases where we want to override the default behavior.

Let's say we need to carry the 128px spacing applied with "Gap B 5XL" from desktop through tablet. ¿How do we accomplish that? Remember this class' value defaults to 88px in Tablet. The way to do is with the Override Scales. They allow us to give a different value than the default responsive reduction.

Values on the Override Scales are the same as the default responsive values from the Base Scale but declared on each of the two smaller breakpoints.

Here is how the override values and classes look like. Pay attention to the new name element describing the breakpoint where the class is applied.

Tablet override scale

The values on the Tablet Override Scale are the same as the default values on this breakpoint.

The classes representing each of the values of the tablet Override Scale
  • Gap B Tab 2XS — 4 px — (.25rem)
  • Gap B Tab XS — 8 px— (.50rem)
  • Gap B Tab S — 12 px— (.75rem)
  • Gap B Tab M — 16 px— (1rem)
  • Gap B Tab L — 24 px— (1.5rem)
  • Gap B Tab XL — 32 px— (2rem)
  • Gap B Tab 2XL — 40 px— (2.5 rem)
  • Gap B Tab 3XL — 56 px— (3.5 rem)
  • Gap B Tab 4XL — 72 px— (4.5 rem)
  • Gap B Tab 5XL — 88 px— (5.5 rem)
  • Gap B Tab 6XL — 120 px— (7.5 rem)
  • Gap B Tab 7XL — 152 px— (9.5 rem)

As you can see, the values of this classes are the same as the default responsive ones but are declared in the Tablet breakpoint.

Mobile override scale

Here is the list of our mobile specific classes and their values.

The classes representing each of the values of the mobile Override Scale
  • Gap B Mob 2XS — 4 px — (.25rem)
  • Gap B Mob XS — 8 px— (.50rem)
  • Gap B Mob S — 12 px— (.75rem)
  • Gap B Mob M — 16 px— (1rem)
  • Gap B Mob L — 24 px— (1.5rem)
  • Gap B Mob XL — 32 px— (2rem)
  • Gap B Mob 2XL — 40 px— (2.5 rem)
  • Gap B Mob 3XL — 48 px— (3 rem)
  • Gap B Mob 4XL — 64 px— (4 rem)
  • Gap B Mob 5XL — 80 px— (5 rem)
  • Gap B Mob 6XL — 96 px— (6 rem)
  • Gap B Mob 7XL — 112 px— (7 rem)

As you can see, the values of this classes are the same as the default ones but are declare in the Mobile breakpoint.

Applying overrides

Going back to our example, we want the element with the "Gap B 5XL" applied, to carry the 128px spacing through Tablet. If we look at our Tablet specific classes, there is no class with the value of 128px. On this cases, where we don't have the exact value, we will go with the nearest one. This help us keep the spacing "on scale", respecting the numeric rules behind the numbers. Following the nearest rule, we need to add the "Gap B Tab 6XL" class to override the 88px default value that comes from "Gap B 5XL" in Tablet view.

This way, our updated element, has a 128px vertical space in Desktop and 120px vertical space in Tablet.

It is worth mentioning that classes from the Tablet Override Scale don't reduce their values for mobile view by default. This means that, on the example below, the 120px will carry on to the Mobile breakpoint. If needed, a Mobile override can be applied.

Add a reset class

We are missing an important class in our scales, and that is a class that set the margin-bottom property to its default value, zero. We name it "Gap B 0". This class comes handy when we need to override any native Webflow element that includes a margin bottom: a paragraph, the form wrapper element, input fields...

On the other side, we have "Gap B Tab 0" and "Gap B Mob 0" that help setting to zero any margins set in Desktop that aren't needed in Tablet or Mobile.

A scalable system

The Vertical Spacing System is built with scalability in mind. If we want to add new values to the system, there are two main possibilities that can arise.

The first one is the need of bigger spacing values. In that case we define the new value or values following the numeric progression, and create the classes that will hold those values. Here is where it comes easy to create new class names with size abbreviations: 9XL, 10XL...

The second possibility is the need for an intermediate value, where the number we are after sits between two existing ones. Defining the value isn't a problem as long as it is a multiple of 8. The hard part is to name the class that holds this value. At first, it looks like this intermediate value will make us rename the classes to keep the size abbreviations consistent. But there is a simple way of solving it.

Let's say that this new value sits between the classes "Gap B 2XL" and "Gap B 3XL", we then name the new class as "Gap B 2.5XL".

In both cases we will need to go an update our responsive values for the Base Scale and create the related classes on the Override Scales.

Scalable system
A scalable system

Put the Vertical Spacing System for Webflow in practice with this clonable.

Everything I've defined and described on this article, it's live and ready to use in the following clonables. Choose between px or rem based units.

Please take a look, copy and start improving the scalability and maintainability of your Webflow sites.

Subscribe to get notified with new Webflow Insights

Thank you! You will receive an email every time an article is freshly written.
Oops! Something went wrong while submitting the form.