search

🍰Spacing System

hashtag
Spacing System

Every designer knows how important spacing is. Every web designer knows how difficult it can be to maintain more or less equal spacing when your site grows and constantly changes.

A spacing system has been implemented to maintain consistency between padding and margins, facilitate easier maintenance, and make it easier to create responsive websites.

LogoGitHub - skywardpro/spacing-system: A simple SCSS tool for easily generating consistent spacing and responsive breakpoints in web projects.GitHubchevron-right

The idea of spacing system is to have some values which will describe at least 99% of all spacings. For easier understanding let’s take some “m”(medium) size which would be normal/regular value. So “l” (large) would be bigger than “m”, “xl” bigger than “l”, “2xl” bigger than “xl” and so one. The same logic in another side (s, xs, 2xs, 3xs etc.). The logic is familiar for anyone cause we all wearing clothing :)

Using “p” (padding) and “m” (margin) we can easily define the CSS property and the direction we define by adding letter (or without it - all sides).

But what if we want different spacing for different resolution? Well we just need to add “__query” to the end of class.

A quick example:

Such a method allows you to quickly create flexible paddings and margins for any element at any resolution.

hashtag
Default Values

hashtag
Build Spacing System

Generate Spacing System partial .css file /assets/css/src/spacing-system/_spacing-system.css.

PreviousCustom MediaNextFramework

Last updated