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

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

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 {
  3 |     background-image: linear-gradient(rgba(0, 170, 255, 0.3) 1px, transparent 1px);
  4 |     background-position: left top;
  5 |     background-size: 19px 19px;
  6 | }
  7 | 
  8 | html body {
  9 |     box-shadow: 1px 0px 0px rgba(0, 170, 255, 0.3), -1px 0px 0px rgba(0, 170, 255, 0.3);
 10 | }

Used by

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 {
 11 |     margin: 0 auto;
 12 |     max-width: 1024px;
 13 | }

Used by

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,
 14 | html .hr {
 15 |   border: 1px solid;
 16 |   margin: -1px 0;
 17 | }
 18 | 
 19 | html a,
 20 | html b,
 21 | html i,
 22 | html strong,
 23 | html em,
 24 | html small,
 25 | html code {
 26 |   line-height: 0;
 27 | }
 28 | 
 29 | html sub,
 30 | html sup {
 31 |   line-height: 0;
 32 |   position: relative;
 33 |   vertical-align: baseline;
 34 | }
 35 | 
 36 | html sup {
 37 |   top: -0.5em;
 38 | }
 39 | 
 40 | html sub {
 41 |   bottom: -0.25em;
 42 | }

Used by

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