Space
Framework

V1.2.0

A powerful responsive SCSS framework
build with typography standards in mind.

Do you want 100% control over every pixel you place? The SpaceFramework is the only front-end framework on the world wide web at which you can align every single pixel perfectly on a virtual raster grid.

Perfectly aligned.
✓ No components. Ever.
✓ Only awesome utilities and raw power!

Typography.

One special thing about the SpaceFramework, is typography. By defining the x-height and cap-height of each font we can create endless alignment possibilities. This gives you a free hand in realizing your designs exactly how it originally was intended.

Vertical alignment

When you apply vertical alignment on your text you can decide how your text is vertical aligned and create a nice vertical rhythm / pattern.

A reason you want to do this is to have exactly the right amount of spacing between each heading, paragraph, images e.t.c.

Default text

Compare the other alignment types with this default one. This is how the browser renders your text by default.

Align baseline

With baseline alignment you focus on aligning a text on the bottom of the character. This is called the baseline.

Align capline

With capline alignment you focus on aligning a text on the top of a uppercase character. This is called the capline

Align median

With median alignment you focus on aligning a text on the top of a lowercase character. This is called the median

Fit

Fit removes whitespace from the first text line of the first element. This can be used to have text exactly aligned to your padding.

Fit has to be combined with align-baseline

Default text

Compare the other alignment types with this default one. This is how the browser renders your text by default. Notice the space between the text and the blue marked padding. We want to get rid of this!

Fit

Default fit removes all white space at the first line of the first element. No longer your text will be aligned on the virtual grid. But your paddings are exact.

Fit up

Fit up removes all white space at the first line of the first element but makes sure everything stays on the virtual grid, it will go up to the next virtual line

Fit down

Fit down removes all white space at the first line of the first element but makes sure everything stays on the virtual grid, it will go down to the next virtual line

Trim

By using trim you no longer need to remove margins manually from the first- and last-child. Trim does it all.

Trim makes the way free to build modular components without the need to worry about those extra margins. They simply get removed. This way you can just add margins at the top and bottom of each component so they always end up nicely in a modular way and use margins the way it was intended

Default text

This is a default text, notice the default margins at the top and the bottom.

Trim

With trim the top- and the bottom-margin are removed from the first- and last-child

Trim top

With trim-top the top margin of the first child is removed.

Trim bottom

With trim-bottom the bottom margin of the last child is removed.

Text presets

By centralizing all typography at one place, you never have to maintain text styles at different places or write down the same CSS code all over again. All you need to do is choose the right text style at the right place.

You can use classes or the SCSS mixin to apply the right text style. This way you can say for example:

  • i want to apply the heading-1 text-preset too all h1 elements
  • and i want to apply the link text-preset to all a elements.
  • This specific h1 element need to have hero text-preset

Especially when working together with Designers using text-presets are very useful. This is because you can match the text-presets exactly with the styles created in for example Sketch or AdobeXD. Resulting in a workflow where you can synchronize front-end with the design at all times.

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.

This red block has a width and height of 1 space-unit

This red block has a width and height of 2 space-units

This red block has a width and height of 3 space-units

Padding

The paddings in the examples are defined with space-units

Notice how the padding matches the raster grid.

Padding of 1 space unit
Padding of 2 space units
Padding of 3 space units
Padding of 4 space units
Vertical padding of 2 space unit
Horizontal padding of 2 space units
Top padding of 1 space units
Right padding of 1 space units
Bottom padding of 1 space units
Left padding of 1 space units

Margin

The margins in the examples are defined with space-units

Notice how the margin matches the raster grid.

Margin of 1 space unit
Margin of 2 space units
Margin of 3 space units
Margin of 4 space units
Vertical margin of 2 space unit
Horizontal margin of 2 space units
Top margin of 1 space units
Right margin of 1 space units
Bottom margin of 1 space units
Left margin of 1 space units

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

Spacing types

A layout-preset has different types of spacing:

  • Padding
  • Margin
  • Position

Directions

A layout-preset has different space directions:

  • All sides
  • Vertical and >Horizontal
  • Top, Right, Bottom and Left

Viewports

A layout-preset can be applied on a certain viewport:

  • Small
  • Medium
  • Large

Negative

Margins and positions can be negative values

  • Negative

Site layout-preset

site layout-preset with padding
site layout-preset with margin

Section layout-preset

section layout-preset with padding
section layout-preset with margin

Block layout-preset

block layout-preset with padding
block layout-preset with margin

Grid.

Grid. Simply. Easy.

The SpaceFramework grid is made with mobile development in mind. It adds auto gap space between the columns both horizontal and vertical.

Grid comes with SpaceFramework 1.2

Grid Columns

Grid columns exist by default out of 12 columns

Span

span-12
span-1
span-11
span-2
span-10
span-3
span-9
span-4
span-8
span-5
span-7
span-6
span-6

Row span

span-2
auto
row-span-2
row-span-2
span-2
auto
span-2

Start

start-1
start-2
start-3
start-4
start-5
start-6
start-7
start-8
start-9
start-10
start-11
start-12

Grid-[]

Grid-4

auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto

Grid-3

auto
auto
auto
auto
auto
auto
auto
auto
auto

Grid-2

auto
auto
auto
auto
auto
auto

Grid-1

auto
auto
auto

Order

order-3 (1th child)
order-2 (2nd child)
order-1 (3rd child)

Gap

gap-0

span-4
span-4
span-4
span-4
span-4
span-4

gap-1

span-4
span-4
span-4
span-4
span-4
span-4

gap-2

span-4
span-4
span-4
span-4
span-4
span-4

row-gap-0

span-4
span-4
span-4
span-4
span-4
span-4

col-gap-0

span-4
span-4
span-4
span-4
span-4
span-4
© 2021, Spaceframework.dev

Build with Gatsby and hosted by Netlify