Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
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.
Go play around with the awesome Gridlover app!
It's so much fun! 😄
Install Sassy-Gridlover via bower.
$ bower install sassy-gridlover
Install Sassy-Gridlover via npm.
$ npm install sassy-gridlover
Install Sassy-Gridlover via yarn.
$ yarn add sassy-gridlover
or Download the repository and include the sassy-gridlover
folder to your Sass directory.
Sassy-Gridlover consists of 7 configurable variables:
$sgl-base-font-size;
$sgl-base-line-height;
$sgl-base-unit;
$sgl-scale-factor;
$sgl-debug-mode;
$sgl-debug-mode-max-width;
$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 ;)
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.
By default, all the mixins (except sgl-html
) will output em
. But you can also choose to output px
, rem
or pxrem
.
sgl-html()
This mixin is mandatory for the all the other mixins to work.
To use on <html>
.
Outputs font-size
and line-height
always in px
.
html {
@include sgl-html($font-size: $sgl-base-font-size);
}
Name | Description | Type | Default value |
---|---|---|---|
$font-size |
Root font size. | Number |
$sgl-base-font-size |
sgl-body()
To use on <body>
.
Outputs font-size
and line-height
.
body {
@include sgl-body($line-height-step: 0, $unit: $sgl-base-unit);
}
Name | Description | Type | Default value |
---|---|---|---|
$line-height-step |
Multiplies the step number by the base line-height (from sgl-html ). If 0 is set, it will actually multiply by 1 . |
Number |
0 |
$unit |
Unit to output (px , em , rem , pxrem ). |
String |
$sgl-base-unit |
sgl-heading()
To use on headings <h1> - <h6>
.
Outputs font-size
, line-height
, margin-top
and margin-bottom
.
@include sgl-heading($font-size-step, $line-height-step, $margin-top-step, $margin-bottom-step, $unit: $sgl-base-unit, $base-value: $sgl-base-font-size)
Name | Description | Type | Default value |
---|---|---|---|
$font-size-step |
Creates an exponent of the base font-size (from sgl-html ) in conjunction with sgl-scale-factor . 0 is the base font-size . |
Number |
- |
$line-height-step |
Multiplies the step number by the base line-height (from sgl-html ). If 0 is set, the line-height will grow with the font-size accordingly. |
Number |
- |
$margin-top-step |
Multiplies the step number by the base line-height (from sgl-html ). |
Number |
- |
$margin-bottom-step |
Multiplies the step number by the base line-height (from sgl-html ). |
Number |
- |
$unit |
Unit to output (px , em , rem , pxrem ). |
String |
$sgl-base-unit |
$base-value |
Optional parameter for a different base font size when using em . |
Number |
$sgl-base-font-size |
sgl-margins()
To use on <p>
, <ul>
, <ol>
, <pre>
, <table>
, <blockquote>
, etc.
Outputs margin-bottom
and margin-top
.
@include sgl-margins($margin-top-step, $margin-bottom-step, $unit: $sgl-base-unit, $base-value: $sgl-base-font-size)
Name | Description | Type | Default value |
---|---|---|---|
$margin-top-step |
Multiplies the step number by the base line-height (from sgl-html ). |
Number |
- |
$margin-bottom-step |
Multiplies the step number by the base line-height (from sgl-html ). |
Number |
- |
$unit |
Unit to output (px , em , rem , pxrem ). |
String |
$sgl-base-unit |
$base-value |
Optional parameter for a different base font size when using em . |
Number |
$sgl-base-font-size |
Enables/disables debug mode.
Outputs background lines imitating a notebook's sheet.
Name | Description | Type | Default value |
---|---|---|---|
$sgl-debug-mode |
Enables/disables debug mode. | Boolean |
false |
Declare it in your own _variables.scss
, _config.scss
or the like.
Basically, it must be declared before the @import "sassy-gridlover"
.
Styles to make sure everything is aligned.
Outputs extra reset styles.
Name | Description | Type | Default value |
---|---|---|---|
$sgl-extras |
Outputs styles to make sure everything is aligned. | Boolean |
false |
Declare it in your own _variables.scss
, _config.scss
or the like.
Basically, it must be declared before the @import "sassy-gridlover"
.
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;
}
$sgl-debug-mode: false;
// $sgl-debug-mode-max-width: 1024; // Only needed if `$sgl-debug-mode` is `true`.
$sgl-extras: false;
@import "../../sassy-gridlover/sassy-gridlover";
html {
@include sgl-html;
}
body {
@include sgl-body;
}
h1 {
@include sgl-heading(3, 0, 1, 2);
}
h2 {
@include sgl-heading(2, 0, 1, 1);
}
h3 {
@include sgl-heading(1, 0, 1, 0);
}
h4 {
@include sgl-heading(0, 0, 1, 0);
}
h5 {
@include sgl-heading(0, 0, 1, 0);
}
p,
ul,
ol,
pre,
table,
blockquote {
@include sgl-margins(0, 1);
}
ul ul,
ol ol,
ul ol,
ol ul {
@include sgl-margins(0, 0);
}
html {
font-size: 18px;
line-height: 23px;
}
body {
font-size: 1em;
line-height: 1.27778em;
}
h1 {
font-size: 4.22223em;
line-height: 1.21053em;
margin-top: 0.30264em;
margin-bottom: 0.60527em;
}
h2 {
font-size: 2.61112em;
line-height: 1.46809em;
margin-top: 0.48937em;
margin-bottom: 0.48937em;
}
h3 {
font-size: 1.61112em;
line-height: 1.58621em;
margin-top: 0.79311em;
margin-bottom: 0em;
}
h4 {
font-size: 1em;
line-height: 1.27778em;
margin-top: 1.27778em;
margin-bottom: 0em;
}
h5 {
font-size: 1em;
line-height: 1.27778em;
margin-top: 1.27778em;
margin-bottom: 0em;
}
p,
ul,
ol,
pre,
table,
blockquote {
margin-top: 0em;
margin-bottom: 1.27778em;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-top: 0em;
margin-bottom: 0em;
}
See CHANGELOG.
See CONTRIBUTING.
Thanks to:
@function exponent()
. Created by Sam Richard, Mario Valencia and Scott Kellum.@function decimal-xxx
.sgl-extras
variable.