README

SpaceFramework

The SpaceFramework is a SCSS framework build for front-end professionals and can be used to align elements pixel perfect on a virtual raster grid. The framework helps you with centralizing typography and the preserving of equivalent spaces between elements.

One of the key features is the vertical alignment of typography. You can align text and elements on the baseline, capline and median. This is done by defining x-height and cap-heights of each font. Another large key feature is the measurement unit called 'Space-Unit'. Which is used to define equal steps of space between everything.

Knowledge of typography and grids

Extensive knowledge of typography, grids and alignments is required to use the framework optimally. Therefor a good collaboration between UX/UI designers and Front-end developers is advised.

How the SpaceFramework differs from common frameworks

Most front-end frameworks like Bootstrap and ZURB Foundation focus mostly on the horizontal grid, instead the SpaceFramework does focus on the vertical grid and the vertical rhythms. The SpaceFramework uses advanced methods based on theories from typography and grids to create vertical patterns. As result websites and applications become extremely well aligned and feel pixel perfect balanced.

The core of the framework lays in the use of the so called Space-Units and defining the x-height and cap-heights of fonts. With Space-Units, a virtual grid is created on which every element in the website is aligned.

Features

• Fixed units of measurement called 'space-units'
• Real vertical text alignment such as align-baseline, align-capline and align-median
• Grid
• Flex
• Centralized typography
• Centralized spacing
• Trim, Fit and Force utility classes

Recommended to use

• SpaceFramework is build on top of Foundation. However we made SpaceFramework to work without Foundation as well, but full power can be unlocked by combining them. (https://foundation.zurb.com/)

Installation

NPM:

npm install spaceframework

Ecosystem

Official website & Examples

https://spaceframework.harwin.nl

Documentation

https://docs.spaceframework.harwin.nl

Calculate X-Height and Capheight

https://fonts.spaceframework.harwin.nl

Changelog

https://github.com/HarwinBorger/SpaceFramework/blob/master/changelog.md

Thank you for using the SpaceFramwork

Made with 👽 from the Netherlands — Harwin

Supported by