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.
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.
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.
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.
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.
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.
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).
Going with the bottom side as the spacing direction takes into account the default stacking direction in the HTML box model.
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.
This is the Base Scale in our Vertical Spacing System.
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 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.
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.
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.
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.
Let's illustrate the logic of these increments.
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.
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:
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
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:
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.
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.
For the tablet breakpoint our values are
In this case, the logic behind this numbers goes as follows:
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.
For Webflow's mobile landscape and portrait breakpoints our values are
In this case, the responsive values for the mobile breakpoint, the same increment is applied to four consecutive steps.
In the following image you can see the Vertical Spacing System on its whole, showing how the values update for Tablet and Mobile
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.
The values on the Tablet Override Scale are the same as the default values on this breakpoint.
As you can see, the values of this classes are the same as the default responsive ones but are declared in the Tablet breakpoint.
Here is the list of our mobile specific classes and their values.
As you can see, the values of this classes are the same as the default ones but are declare in the Mobile breakpoint.
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.
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.
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.
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.