General

variables

sgl-base-font-size

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

Description

Base font size.

Type

Number

sgl-base-line-height

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

Description

Base line height.

Type

Number

Used by

[mixin] sgl-html
[mixin] sgl-body
[mixin] sgl-heading
[mixin] sgl-margins

sgl-base-unit

$sgl-base-unit: "em" !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

[mixin] sgl-heading

sgl-debug-mode

$sgl-debug-mode: false !default;

Description

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

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: 19px 19px;
}

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

Used by

[mixin] sgl-html
[mixin] sgl-body
[mixin] sgl-heading
[mixin] sgl-margins

sgl-debug-mode-max-width

$sgl-debug-mode-max-width: 560 !default;

Description

Sets a maximum width to center the text when debug mode is true.

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

Type

Number

Example

$sgl-debug-mode-max-width: 1024

body {
    margin: 0 auto;
    max-width: 1024px;
}

Used by

[mixin] sgl-body

sgl-extras

$sgl-extras: false !default;

Description

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

Type

Boolean

Example

$sgl-extras: true;

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;
}

Used by

[mixin] sgl-html

mixins

sgl-html

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

Description

To use on <html>.

This mixin is mandatory for the all the other mixins to work.

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$font-size`	Root font size.	`Number`	`$sgl-base-font-size`

Example

html {
    @include sgl-html(18);
}

html {
    font-size: 18px;
    line-height: 23px;
}

Requires

[variable] sgl-base-line-height
[variable] sgl-debug-mode
[variable] sgl-extras

sgl-body

@mixin sgl-body($line-height-step: 0, $unit: $sgl-base-unit) { ... }

Description

To use on <body>.

Outputs font-size and line-height.

Parameters

parameter Name	parameter Description	parameter Type	parameter 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`

Example

body {
	@include sgl-body;
}

body {
    font-size: 18px;
    line-height: 23px;
    font-size: 1rem;
    line-height: 1.27778rem;
}

Requires

[variable] sgl-base-line-height
[variable] sgl-debug-mode
[variable] sgl-debug-mode-max-width

sgl-heading

@mixin sgl-heading($font-size-step, $line-height-step, $margin-top-step, $margin-bottom-step, $unit: $sgl-base-unit, $base-value: $sgl-base-font-size) { ... }

Description

To use on headings <h1> - <h6>.

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

Parameters

parameter Name	parameter Description	parameter Type	parameter 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`	— none
`$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`	— none
`$margin-top-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	— none
`$margin-bottom-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	— none
`$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`

Example

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);
}

h1 {
    font-size: 76px;
    line-height: 92px;
    margin-top: 23px;
    margin-bottom: 46px;
    font-size: 4.22223rem;
    line-height: 5.11112rem;
    margin-top: 1.27778rem;
    margin-bottom: 2.55556rem;
}

h2 {
    font-size: 47px;
    line-height: 69px;
    margin-top: 23px;
    margin-bottom: 23px;
    font-size: 2.61112rem;
    line-height: 3.83334rem;
    margin-top: 1.27778rem;
    margin-bottom: 1.27778rem;
}

h3 {
    font-size: 29px;
    line-height: 46px;
    margin-top: 23px;
    margin-bottom: 0px;
    font-size: 1.61112rem;
    line-height: 2.55556rem;
    margin-top: 1.27778rem;
    margin-bottom: 0rem;
}

h4 {
    font-size: 18px;
    line-height: 23px;
    margin-top: 23px;
    margin-bottom: 0px;
    font-size: 1rem;
    line-height: 1.27778rem;
    margin-top: 1.27778rem;
    margin-bottom: 0rem;
}

h5 {
    font-size: 18px;
    line-height: 23px;
    margin-top: 23px;
    margin-bottom: 0px;
    font-size: 1rem;
    line-height: 1.27778rem;
    margin-top: 1.27778rem;
    margin-bottom: 0rem;
}

Requires

[variable] sgl-scale-factor
[variable] sgl-base-line-height
[variable] sgl-debug-mode

sgl-margins

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

Description

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

Outputs margin-top and margin-bottom.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin-top-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	— none
`$margin-bottom-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	— none
`$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`

Example

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

ul ul,
ol ol,
ul ol,
ol ul {
    @include sgl-margins(0, 0);
}

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

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

Requires

[variable] sgl-base-line-height
[variable] sgl-debug-mode