General

variables

sgl-debug-mode

$sgl-debug-mode: false !default;

Description

Enables/disables Debug mode (true/false).

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".

Type

Boolean

Example

$sgl-debug-mode: true;
html {
       background-image: linear-gradient(rgba(0, 170, 255, 0.3) 1px, transparent 1px);
       background-position: left top;
       background-size: 22px 22px;
}

body {
       box-shadow: 1px 0px 0px rgba(0, 170, 255, 0.3), -1px 0px 0px rgba(0, 170, 255, 0.3);
}

Used by

sgl-base-font-size

$sgl-base-font-size: 18 !default;

Description

Base font size.

Type

Number

Used by

sgl-base-line-height

$sgl-base-line-height: 1.2 !default;

Description

Base line height.

Type

Number

Used by

sgl-base-unit

$sgl-base-unit: "pxrem" !default;

Description

Base unit (px, em, rem, pxrem).

Type

String

sgl-scale-factor

$sgl-scale-factor: $GOLDEN_SECTION !default;

Description

Scale factor.

Type

Number

Used by

mixins

sgl-body

@mixin sgl-body($font-size: $sgl-base-font-size, $unit: $sgl-base-unit) { ... }

Description

To use in the <body>.

Outputs font-size and line-height.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font-size

Base font size

Number$sgl-base-font-size
$unit

Unit to output

String$sgl-base-unit

Example

body {
	@include sgl-body($sgl-base-font-size, "pxrem");
}
body {
    font-size: 18px;
    line-height: 22px;
    font-size: 1.125rem;
    line-height: 1.375rem;
}

Requires

sgl-heading

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

Description

To use in headings <h1> - <h4>.

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

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$step

<h1>$step: 3

<h2>$step: 2

<h3>$step: 1

<h4>$step: 0

Numbernone
$unit

Unit to output

String$sgl-base-unit
$base-value

Optional call with a different base font size when using em

Number$sgl-base-font-size

Example

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

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

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

h4 {
	@include sgl-heading(0);
}
h1 {
    font-size: 4.22222em;
    line-height: 1.15789em;
    margin-bottom: 0.28947em;
    margin-top: 0.57895em;
}

h2 {
    font-size: 47px;
    line-height: 66px;
    margin-bottom: 22px;
    margin-top: 44px;
}

h3 {
    font-size: 29px;
    line-height: 44px;
    margin-bottom: 22px;
    margin-top: 22px;
    font-size: 1.8125rem;
    line-height: 2.75rem;
    margin-bottom: 1.375rem;
    margin-top: 1.375rem;
}

h4 {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 22px;
    margin-top: 22px;
    font-size: 1.125rem;
    line-height: 1.375rem;
    margin-bottom: 1.375rem;
    margin-top: 1.375rem;
}

Requires

sgl-margins

@mixin sgl-margins($unit: $sgl-base-unit, $base-value: $sgl-base-font-size) { ... }

Description

To use in <p>, <ul>, <ol>, <pre>, <table>, <blockquote>, etc.

Outputs margin-bottom and margin-top.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$unit

Unit to output

String$sgl-base-unit
$base-value

Optional call with a different base font size when using em

Number$sgl-base-font-size

Example

p, ul, ol, pre, table, blockquote {
	@include sgl-margins();
}
p, ul, ol, pre, table, blockquote {
   margin-bottom: 22px;
   margin-top: 22px;
   margin-bottom: 1.375rem;
   margin-top: 1.375rem;
}

Requires