2017 © Pedro Peláez
 

library spaceframework

Vertical grid system

image

harwinborger/spaceframework

Vertical grid system

  • Monday, July 9, 2018
  • by HarwinBorger
  • Repository
  • 3 Watchers
  • 8 Stars
  • 0 Installations
  • CSS
  • 0 Dependents
  • 0 Suggesters
  • 2 Forks
  • 1 Open issues
  • 28 Versions
  • 0 % Grown

The README.md

npm version Bower version Bower version NPM Downloads, (*1)

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., (*2)

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., (*3)

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., (*4)

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., (*5)

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., (*6)

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, (*7)

Documentation

https://docs.spaceframework.harwin.nl, (*8)

Calculate X-Height and Capheight

https://fonts.spaceframework.harwin.nl, (*9)

Changelog

https://github.com/HarwinBorger/SpaceFramework/blob/master/changelog.md, (*10)

Thank you for using the SpaceFramwork

Made with :alien: from the Netherlands — Harwin, (*11)

Supported by

JetBrains, (*12)

The Versions

09/07 2018

0.15.1

0.15.1.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss typography

08/07 2018

0.15.0

0.15.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss typography

08/07 2018

0.14.0

0.14.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss typography

04/07 2018

0.13.0

0.13.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss

03/07 2018

0.12.2

0.12.2.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss

03/07 2018

0.12.1

0.12.1.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss

03/07 2018

0.12.0

0.12.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss

03/07 2018

0.11.1

0.11.1.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

by Harwin Borger

grid foundation sass scss

28/06 2018

0.11.0

0.11.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

grid foundation sass scss

01/04 2018

dev-develop

dev-develop https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

21/03 2018

dev-master

9999999-dev https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

21/03 2018

0.10.0

0.10.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

15/03 2018

0.9.0

0.9.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

14/03 2018

0.8.0

0.8.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

13/03 2018

0.7.0

0.7.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

12/03 2018

0.6.0

0.6.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

11/03 2018

0.5.0

0.5.0.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

11/03 2018

dev-release/0.5.0

dev-release/0.5.0 https://github.com/HarwinBorger/SpaceFramework/

Vertical grid system

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

11/03 2018

dev-feature/space-revolution

dev-feature/space-revolution https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

04/03 2018

dev-feature/scalepoint

dev-feature/scalepoint https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

04/03 2018

0.4.0

0.4.0.0 https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

04/03 2018

dev-release/0.4

dev-release/0.4 https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

04/03 2018

dev-feature/ITCSS

dev-feature/ITCSS https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

09/07 2017

0.3.1

0.3.1.0 https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

09/07 2017

0.3.0

0.3.0.0 https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

09/07 2017

0.2.7

0.2.7.0 https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

09/07 2017

0.2.6

0.2.6.0 https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss

03/07 2017

v0.2.5

0.2.5.0 https://github.com/HarwinBorger/SpaceFramework/

Front-end development made real easy

  Sources   Download

GPL3.0

The Requires

  • foundation-sites ^6.3.0

 

by Harwin Borger

wordpress foundation scss