Space.

The main goal of the SpaceFramework is to create Consistency in space. This is done by creating equal groups of space between each and every component.

The SpaceFramework aims to create equal amounts of space between each and every component in the website. By doing so the webpage looks calmer, you feel the consistency and you can create vertical rhythms and patterns. This affects Interaction / UX Design, graphic design and the way developers develop their websites.

Equal space is created in two ways:

• Using a common unit. In the SpaceFramework we call this the Space-Unit.
• Creating groups of spaces. This we call Layout-Presets.

Space Units

The whole SpaceFramework is based on one single unit: the space-unit.

Thespace-unit represents a virtual grid and is nothing more and nothing less then a unit to calculate all paddings, margins, widths, height, positions etc.

The size of the space-unit can different for different viewport sizes. This way you can make everything look more narrow on mobile and more broad on desktop. The default size is 16px but you could also work with a 8px grid or anything else you like.

Padding

The paddings in the examples are defined with space-units

Notice how the padding matches the raster grid.

Margin

The margins in the examples are defined with space-units

Notice how the margin matches the raster grid.

Layout presets

By centralizing all spacings at one place, you can easily apply common spacings patterns. The spacings can be different on different viewport sizes. You find the centralized spacings at layout-presets

Default layout-presets

The SpaceFramework includes 3 default layout-presets. Which can be overwritten by name and values to match your needs:

• Site
• Section
• Block

Site layout-preset

Section layout-preset

Block layout-preset