Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
main
attribute to package.json
so it's easier to import Sassy Gridlover when using bundlers #21
NOTE: This release contains breaking changes!
$sgl-base-font-size: $SGL_DEFAULT_FONT_SIZE
.$sgl-base-font-size: 18
.$sgl-base-line-height: 1.2
.$sgl-base-line-height: 1.3
.$sgl-base-unit: "pxrem"
.$sgl-base-unit: "em"
.sgl-body()
sgl-heading()
and sgl-margins()
mixins:
@mixin sgl-body($unit: $sgl-base-unit)
.sgl-body()
now accepts 2 arguments:
$line-height-step: 0
$unit: $sgl-base-unit
@mixin sgl-body($line-height-step: 0, $unit: $sgl-base-unit)
.@mixin sgl-heading($step, $unit: $sgl-base-unit, $base-value: $sgl-root-font-size)
.sgl-heading()
now accepts 6 arguments (the first 4 are mandatory):
$font-size-step
$line-height-step
$margin-top-step
$margin-bottom-step
$unit: $sgl-base-unit
$base-value: $sgl-root-font-size
@mixin sgl-heading($font-size-step, $line-height-step, $margin-top-step, $margin-bottom-step, $unit: $sgl-base-unit, $base-value: $sgl-root-font-size)
.@mixin sgl-margins($unit: $sgl-base-unit, $base-value: $sgl-root-font-size)
.sgl-margins()
now accepts 4 arguments (the first 2 are mandatory):
$margin-top-step
$margin-bottom-step
$unit: $sgl-base-unit
$base-value: $sgl-root-font-size
@mixin sgl-margins($margin-top-step, $margin-bottom-step, $unit: $sgl-base-unit, $base-value: $sgl-root-font-size)
.$sgl-debug-mode-max-width
to center the text when debug mode is true
._extras.scss
to main.scss
.sgl-extras
variable)..editorconfig
.npm
and bower
packages.