Base

Installation

There are two imports to choose from. The default scss/base comes with
un-prefixed versions of the core API functions.
If you want Base to be name-spaced, import scss/base-prefix instead.

// un-prefixed functions
@import '<path-to>/base/scss/base';
// susy-prefixed functions
@import '<path-to>/base/scss/base-prefix';

Starting guide using base

@import "path-to-base";
$base: (
    cap-height: .7 // cap-height of your font
)
h1 {
    $font-size: 4rem;
    font-size: $font-size;
    line-height: line-height($font-size);
    margin-top: top($font-size) + row(); // top offset + extra row of white space
    margin-bottom: bottom($font-size);
}

See the full documentation

Credits

• Susy - Lots of code is based on their internal structure and I reused lots of their comments.

Todo

• add advise for margin collapsing
• add more tests
• create more debug-image options
• allow calculation with a different vertical-align