Space
Framework
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.
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
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
Section layout-preset
Block layout-preset
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