Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
sassdoc
sassy-gridlover
test
.editorconfig
.gitattributes
.gitignore
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
ISSUE_TEMPLATE.md
LICENSE
PULL_REQUEST_TEMPLATE.md
README.md
bower.json
config.json
package.json
sache.json

README.md

Sassy-Gridlover Build Status

Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.

Gridlover gives you adjustable CSS for font sizes, line heights and margins. The default CSS output is for html, body, h1-h6, p, ul, ol, etc. but you can of course apply your adjusted values to any element by editing the CSS later.

First of all

Go play around with the awesome Gridlover app!

It's so much fun! 😄

Installation

Install Sassy-Gridlover via bower.

$ bower install sassy-gridlover

Install Sassy-Gridlover via npm.

$ npm install sassy-gridlover

or Download the repository and include the sassy-gridlover folder to your Sass directory.

Getting started

Sassy-Gridlover consists of 6 configurable variables:

$sgl-base-font-size;
$sgl-base-line-height;
$sgl-base-unit;
$sgl-scale-factor;
$sgl-debug-mode;
$sgl-extras;

and 4 mixins:

@mixin sgl-html();
@mixin sgl-body();
@mixin sgl-heading();
@mixin sgl-margins();

These are the 4 functionalities of the Gridlover app that you (should) have been playing with ;)

Setup

Import _sassy-gridlover.scss to your main style sheet.

@import "sassy-gridlover";

Change the configurable variables values in _config.scss to your liking.

I would encourage you not to change them directly here, though. It would be better to declare them in your _variables.scss, _config.scss or the like.

_config.scss

// Scale factor constants.
// Don't change them ever!
$MINOR_SECOND: 1.067;
$MAJOR_SECOND: 1.125;
$MINOR_THIRD: 1.2;
$MAJOR_THIRD: 1.25;
$PERFECT_FOURTH: 1.333;
$AUGMENTED_FOURTH: 1.414;
$PERFECT_FIFTH: 1.5;
$MINOR_SIXTH: 1.6;
$GOLDEN_SECTION: 1.618;
$MAJOR_SIXTH: 1.667;
$MINOR_SEVENTH: 1.778;
$MAJOR_SEVENTH: 1.875;
$OCTAVE: 2;
$MAJOR_TENTH: 2.5;
$MAJOR_ELEVENTH: 2.667;
$MAJOR_TWELFTH: 3;
$DOUBLE_OCTAVE: 4;

// Default font size.
// Don't change it ever!
$SGL_DEFAULT_FONT_SIZE: 16;

// Configurable variables.
// Ok... You can change these variables! :D
// I would encourage you **not to change them directly here**, though.
// It would be better to declare them in your `_variables.scss`, `_config.scss` or the like.

/// Base font size.
///
/// @type number
$sgl-base-font-size: $SGL_DEFAULT_FONT_SIZE !default;

/// Base line height.
///
/// @type number
$sgl-base-line-height: 1.2 !default;

/// Base unit (`px`, `em`, `rem`, `pxrem`).
///
/// @type string
$sgl-base-unit: "pxrem" !default;

/// Scale factor.
///
/// @type number
$sgl-scale-factor: $GOLDEN_SECTION !default;

/// Enables/disables **debug mode**.
///
/// Outputs background lines imitating a notebook's sheet.
///
/// Declare it in your own `_variables.scss`, `_config.scss` or the like.
///
/// Basically, **it must be declared before the** `@import "sassy-gridlover"`.
///
/// @example scss
/// sgl-debug-mode: true;
///
/// @example css
/// html {
///     background-image: linear-gradient(rgba(0, 170, 255, 0.3) 1px, transparent 1px);
///     background-position: left top;
///     background-size: 19px 19px;
/// }
///
/// html body {
///     box-shadow: 1px 0px 0px rgba(0, 170, 255, 0.3), -1px 0px 0px rgba(0, 170, 255, 0.3);
/// }
///
/// @type boolean
$sgl-debug-mode: false !default;

/// Styles to make sure everything is aligned.
///
/// Outputs extra **reset styles**.
///
/// Declare it in your own `_variables.scss`, `_config.scss` or the like.
///
/// Basically, **it must be declared before the** `@import "sassy-gridlover"`.
///
/// @example scss
/// $sgl-extras: true;
///
/// @example css
/// html ul ul,
/// html ol ol,
/// html ul ol,
/// html ol ul {
///   margin-bottom: 0;
///   margin-top: 0;
/// }
/// html hr,
/// html .hr {
///   border: 1px solid;
///   margin: -1px 0;
/// }
/// html a,
/// html b,
/// html i,
/// html strong,
/// html em,
/// html small,
/// html code {
///   line-height: 0;
/// }
/// html sub,
/// html sup {
///   line-height: 0;
///   position: relative;
///   vertical-align: baseline;
/// }
/// html sup {
///   top: -0.5em;
/// }
/// html sub {
///   bottom: -0.25em;
/// }
/// @type boolean
$sgl-extras: false !default;

Mixins

By default, all the mixins (except sgl-html) will output pxrem. But you can also choose to output px, em or rem.

sgl-html()

To be used on <html>.

Outputs font-size and line-height always in px.

@mixin sgl-html($font-size: $sgl-base-font-size)

Accepts 1 argument:

  • $font-size: Base font size (without unit, just a number).

sgl-body()

To be used on <body>.

Outputs font-size and line-height.

@mixin sgl-body($unit: $sgl-base-unit)

Accepts 1 argument:

  • $unit: Unit to output (px, em, rem, pxrem).

sgl-heading()

To be used on headings <h1> - <h6>.

Outputs font-size, line-height, margin-bottom and margin-top.

@mixin sgl-heading($step, $unit: $sgl-base-unit, $base-value: $sgl-root-font-size)

Accepts 3 arguments:

  • $step:
    • <h1>$step: 3
    • <h2>$step: 2
    • <h3>$step: 1
    • <h4>$step: 0
    • <h5>$step: 0
    • <h6>$step: 0
  • $unit: Unit to output (px, em, rem, pxrem).
  • $base-value: Optional call with a different base font size when using em.

sgl-margins()

To be used on <p>, <ul>, <ol>, <pre>, <table>, <blockquote>, etc.

Outputs margin-bottom and margin-top.

@mixin sgl-margins($unit: $sgl-base-unit, $base-value: $sgl-root-font-size)

Accepts 2 arguments:

  • $unit: Unit to output (px, em, rem, pxrem).
  • $base-value: Optional call with a different base font size when using em.

Debug mode

Enables/disables debug mode.

Outputs background lines imitating a notebook's sheet.

Accepts 1 argument:

  • $sgl-debug-mode: true / false.

Declare it in your own _variables.scss, _config.scss or the like. Basically, it must be declared before the @import "sassy-gridlover".

Example

Example of Sassy-Gridlover's debug mode

Extras

Styles to make sure everything is aligned.

Outputs extra reset styles.

Accepts 1 argument:

  • $sgl-extras: true / false.

Declare it in your own _variables.scss, _config.scss or the like. Basically, it must be declared before the @import "sassy-gridlover".

CSS output

html ul ul,
html ol ol,
html ul ol,
html ol ul {
    margin-bottom: 0;
    margin-top: 0;
}

html hr,
html .hr {
    border: 1px solid;
    margin: -1px 0;
}

html a,
html b,
html i,
html strong,
html em,
html small,
html code {
    line-height: 0;
}

html sub,
html sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

html sup {
    top: -0.5em;
}

html sub {
    bottom: -0.25em;
}

Example usage

SCSS

$sgl-debug-mode: false;
$sgl-extras: false;

@import "../../sassy-gridlover/sassy-gridlover";

html {
    @include sgl-html();
}

body {
    @include sgl-body("rem");
}

h1 {
    @include sgl-heading(3, "em");
}

h2 {
    @include sgl-heading(2, "px");
}

h3 {
    @include sgl-heading(1, "pxrem");
}

h4 {
    @include sgl-heading(0);
}

p,
ul,
ol,
pre,
table,
blockquote {
    @include sgl-margins();
}

CSS output

html {
    font-size: 16px;
    line-height: 19px;
}

body {
    font-size: 1rem;
    line-height: 1.1875rem;
}

h1 {
    font-size: 4.25em;
    line-height: 1.11765em;
    margin-bottom: 0.55883em;
    margin-top: 0.27942em;
}

h2 {
    font-size: 42px;
    line-height: 57px;
    margin-bottom: 19px;
    margin-top: 19px;
}

h3 {
    font-size: 26px;
    line-height: 38px;
    margin-bottom: 0px;
    margin-top: 19px;
    font-size: 1.625rem;
    line-height: 2.375rem;
    margin-bottom: 0rem;
    margin-top: 1.1875rem;
}

h4 {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 0px;
    margin-top: 19px;
    font-size: 1rem;
    line-height: 1.1875rem;
    margin-bottom: 0rem;
    margin-top: 1.1875rem;
}

p,
ul,
ol,
pre,
table,
blockquote {
    margin-bottom: 19px;
    margin-top: 0;
    margin-bottom: 1.1875rem;
    margin-top: 0;
}

Changelog

See CHANGELOG.

Contributing

See CONTRIBUTING.

Authors

Inspiration and alternatives

  • Gridlover app - The tool to establish a typographic system with modular scale and vertical rhythm.
  • Knife - Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.
  • gridlover-mixin - A mixin to generate modular scale and vertical rhythm for your typography.

Credits

Thanks to:

License

MIT License.