A Vertical-Spacing Solution that CSS Frameworks Don’t Give You

If you’ve created a web page within the last 10 years, then odds are you have at some point used a grid system. Grid systems give us a reusable (modular), solution to controlling horizontal layouts. There are dozens of excellent grid systems, such as Flexbox Grid. In fact, practically every CSS framework includes a grid system to help manage horizontal spacing.

So why is it then that so few frameworks consider vertical spacing from the same modular perspective? I can’t answer that, but I can detail the approach we’ve used for our brands such as World Nomads or TID, to handle this issue.

Why might we need this solution?

When we create our pages or UI, we want to be able to create vertical spacing between sections, content or components, that is consistent, reusable, customisable and easily maintained. This is valuable for a number of reasons:

1. We won’t have to write custom CSS each time we need to vertically space sections, content or modules, thus reducing total CSS size and development time.
2. Our UI will be more consistent because practically all spacing is defined from a small set of modular classes, improving the sites UX.
3. We can globally alter the spacing or aesthetic of all sections by adjusting a few CSS properties.

When combined with a grid system, we can handle practically every layout scenario and never need to write custom CSS to position content again.

Fundamentals to consider

• If you write CSS and the concept of modular CSS is new to you, then do yourself a favour and start up-skilling (we’re use SMACSS). The principles in this article rely heavily on modular CSS practices.
• All of the margins in the code below are margin-bottom. This is to avoid collapsing margins. Read Single-direction margin declarations to understand why. We apply the same concept to all margins.
• All CSS examples are using SASS and feature a breakpoint solution borrowed from Bootstrap.

Introducing the section component

When creating vertical spacing of content or components in a page or UI, it’s best to do do so with consistent consistent measures. Consistency is critical to good design; a consistent UI results in better UX.

As such we want to have a set of classes we can choose from that’s gives us consistent spacing. Below I have started with a default section class and added one size variation. Keeping the variations limited improves consistency, though you may want more than one. I have also accounted for a stylistic variation, in this instance a line break that separates content:

• I’ve only included one breakpoint for simplicity, you may need more. By using rem units we could also scale via the html font-size.

Example usage: 1 class=”section” 2 class=”section — large” 3 class=”section section — break”

Adding variations for different use cases

The above CSS will work fairly well if our sections are all a single background colour. But what if we want to have different background colours, background images or other variations? We can separate these out to account for those use cases as well:

Example usage: 1 class=”section — dark section — padding” 2 class=”section section — image section-padding”

In conclusion

This approach holds true to the principle of separation of concerns. It separates the spacing of sections into individual classes, that are responsive and easy to maintain. It separates commonly recurring aesthetic requirements into classes that are handled in the same way. It also allows us to mix and match the classes to suit a much broader set of requirements. Combine this with a grid and extend on it to suit your requirements.

Here’s the full SASS file.