General

variables

sgl-base-font-size

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

Description

Base font size.

Type

Number

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

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

sgl-extra

$sgl-extra: 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 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;
}

mixins

sgl-html

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

Description

To use on <html>.

Outputs font-size and line-height.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$font-size

Root font size

Number$sgl-base-font-size

Example

html {
    @include sgl-html(16);
}
html {
    font-size: 16px;
    line-height: 19px;
}

Requires

sgl-body

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

Description

To use on <body>.

Outputs font-size and line-height.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$unit

Unit to output (px, em, rem, pxrem)

String$sgl-base-unit

Example

body {
	@include sgl-body("pxrem");
}
body {
    font-size: 16px;
    line-height: 19px;
    font-size: 1rem;
    line-height: 1.1875rem;
}

Requires

sgl-heading

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

Description

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

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$step

<h1>$step: 3

<h2>$step: 2

<h3>$step: 1

<h4>$step: 0

<h5>$step: 0

<h6>$step: 0

Number none
$unit

Unit to output (px, em, rem, pxrem)

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

Requires

sgl-margins

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

Description

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

Outputs margin-bottom and margin-top.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default 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 {
    position: relative;
    margin-bottom: 19px;
    margin-top: 0;
    margin-bottom: 1.1875rem;
    margin-top: 0;
}

Requires