📒Spacing Theory
1.0 Spacing
Spacing in web development is a hotly debated topic, with each system tackling it differently. Some use individual margin classes, others rely on spacing blocks with empty divs, and some go for complex combo-classes. There's no one-size-fits-all solution, and developers often have their own preferences.
In the Base System, we use a wrap system with flex-gap for spacing. This means that if you want a 16px gap between an H1 and a paragraph, you wrap both elements in one of our wrapper classes, and the 16px spacing is automatically applied.
We believe the flex-gap spacing method is the most effective solution for several reasons:
Familiarity with Figma: The flex-gap method closely mirrors how spacing is handled in Figma, where designers use Frames and auto-layout to apply gap spacing. In our system, columns act as frames, and the specific spacing is applied as a gap through the class name. This makes it intuitive for designers familiar with Figma to transition to our system.
Grouping of Elements: The flex-gap method helps create clear hierarchy in your projects by grouping related elements. This makes it easy to understand the spacing of elements when viewing the layers panel, as paired and related items are grouped together.
Minimal Classes: This method requires fewer classes to achieve desired layouts. For example, if you're creating a list of features with 8px spacing between each, a single "Column Small" wrapper can provide that spacing. In contrast, other methods might require individual spacing elements or multiple spacing blocks.
No Deep Combo Stacking: The flex-gap method is user-friendly for both beginners and experts. It offers flexibility without the need for complex combo-classes, making it simpler and more efficient to manage.
PX vs REM and other values
By default the Base System uses pixels (px) and not rem based units. We
We use pixels (px) - not rem based units. Simplifies the integration across other platforms (Figma, Framer, Illustrator etc). Default webflow unit - do not need to specify which unit everywhere.
We recognize that REM provides a benefit for accessibility, and If you prefer to work with REM you are encouraged to use it. Additional, if you would like to use rem, we have a base style guide that is built using rem units to get you started faster.
Naming Colors
Chalk projects follow a simple in web design are another way to group and organize content on a web page. Similar to containers, sections are used to create distinct areas within a page, but they are typically larger and more visually prominent. The base system uses a 24px base for our sections, and their size is determined by top & bottom padding.
Sections are often used to divide a web page into meaningful chunks, such as different topics or sections of content. All sections include a defined top & bottom padding as well as the page left and right padding.
For unique sections don’t be afraid to create a new class. Simply duplicate the class from a root section and give it a name that describes the section, for example, Section Header.
Recommended: Keep the keyword ‘Section’ in this class name so we can easily reuse these for your future pages.
Last updated