default-browser-font-size

$default-browser-font-size: 16 !default;

Description

Type

Number

Used by

• [function] _px-to-rem
• [function] _rem-to-px
• [function] _percent-to-px
• [function] _px-to-percent
• [function] _line-height

Author

• Jared Howland

breakpoints

$breakpoints: (
  bp-0: (
    breakpoint: 0, // Mobile first
    font-size: 16px 18px,
    line-height: 1.5,
    modular-scale: golden
  ),
  bp-1: (
    breakpoint: 480px, // ~ Extra small screen up
    font-size: 18px 20px,
    line-height: 1.5,
    modular-scale: golden
  ),
  bp-2: (
    breakpoint: 768px, // ~ Small screen/tablet up
    font-size: 20px 22px,
    modular-scale: golden // no line-height specified so scale is used
  ),
  bp-3: (
    breakpoint: 992px, // ~ Medium screen up
    font-size: 22px 24px,
    modular-scale: golden // no line-height specified so modular-scale is used
  ),
  bp-4: (
    breakpoint: 1200px, // ~ Desktop up
    font-size: 24px 26px,
    modular-scale: golden // no line-height specified so modular-scale is used
  )
) !default;

Description

Type

Map

Map structure

Used by

• [function] _line-height
• [mixin] _breakpoint
• [mixin] _height
• [mixin] _padding-margin
• [mixin] _padding-margin-individual
• [function] _get-bp-names
• [function] _get-bp-data
• [mixin] rhythm

Author

• Jared Howland

modular-scales

$modular-scales: () !default;

Description

Type

Map

Map structure

Example

$modular-scales: (
  my-scale-1: 1.1,
  my-scale-2: 1.3
);

Used by

• [function] _modular-scale-value

Author

• Jared Howland

background-color

$background-color: #f5f5f5 !default;

Description

Type

Color

Author

• Jared Howland

code-background-color

$code-background-color: darken($background-color, 7%) !default;

Description

Type

Color

Author

• Jared Howland

heading-color

$heading-color: #2e2e2e !default;

Description

Type

Color

Author

• Jared Howland

body-color

$body-color: #444 !default;

Description

Type

Color

Author

• Jared Howland

body-color-muted

$body-color-muted: #ccc !default;

Description

Type

Color

Author

• Jared Howland

link-color

$link-color: #265c83 !default;

Description

Type

Color

Author

• Jared Howland

link-hover-color

$link-hover-color: lighten($link-color, 10%) !default;

Description

Type

Color

Author

• Jared Howland

link-background-color

$link-background-color: transparent !default;

Description

Type

Color

Author

• Jared Howland

serif-font-family

$serif-font-family: Georgia, serif !default;

Description

Type

List

Author

• Jared Howland

sans-serif-font-family

$sans-serif-font-family: Helvetica, sans-serif !default;

Description

Type

List

Author

• Jared Howland

monospace-font-family

$monospace-font-family: Menlo, monospace !default;

Description

Type

List

Author

• Jared Howland

body-font

$body-font: $serif-font-family !default;

Description

Type

List

Author

• Jared Howland

heading-font

$heading-font: $sans-serif-font-family !default;

Description

Type

List

Author

• Jared Howland

code-font

$code-font: $monospace-font-family !default;

Description

Type

List

Author

• Jared Howland

indent-value

$indent-value: 1rem !default;

Description

Type

Number

Author

• Jared Howland

dropcap-float-position

$dropcap-float-position: left !default;

Description

Type

String

Author

• Jared Howland

dropcap-font-size

$dropcap-font-size: 4em !default;

Description

Type

Number

Author

• Jared Howland

dropcap-font-family

$dropcap-font-family: inherit !default;

Description

Type

List

Author

• Jared Howland

dropcap-txt-indent

$dropcap-txt-indent: 0 !default;

Description

Type

Number

Author

• Jared Howland

dropcap-margin

$dropcap-margin: 10px 10px 0 0 !default;

Description

Type

Number or List

Author

• Jared Howland

dropcap-padding

$dropcap-padding: 0 20px !default;

Description

Type

Number or List

Author

• Jared Howland

dropcap-color

$dropcap-color: inherit !default;

Description

Type

Color

Author

• Jared Howland

dropcap-line-height

$dropcap-line-height: 1 !default;

Description

Type

Number

Author

• Jared Howland

dropcap-bg

$dropcap-bg: transparent !default;

Description

Type

String

Author

• Jared Howland

rhythm

@mixin rhythm() { ... }

Description

Parameters

None.

Output

Requires

• [mixin] _set-sizes
• [mixin] _breakpoint
• [function] _bp-name
• [function] _bp-scale-values
• [variable] breakpoints

font-size

@mixin font-size($font-sizes, $line-height: true) { ... }

Description

Parameters

Output

Example

section {
  @include font-size(16px);
}
//-> section {
//->   font-size: 1rem;
//->   line-height: 1.5rem;
//-> }
//-> @media screen and (min-width: 30rem) {
//->   section {
//->     font-size: 1.125rem;
//-<     line-height: 1.6875rem;
//->   }
//-> }
//-> … for each breakpoint

Throws

• You have used #{length($font-sizes)} font-sizes. You have defined #{length($breakpoints)} breakpoints. You can only use 1 font-size or the same number of font-sizes as there are breakpoints (#{length($breakpoints)}).

Requires

• [mixin] _breakpoint
• [function] _to-rem
• [function] _line-height
• [function] _bp-name

line-height

@mixin line-height($font-sizes, $scale: 1) { ... }

Description

Parameters

Output

Requires

• [mixin] _height

max-height

@mixin max-height($font-sizes, $scale) { ... }

Description

Parameters

Output

Requires

• [mixin] _height

padding

@mixin padding($scale: 1 0, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin

Used by

• [mixin] _padding-margin

padding-top

@mixin padding-top($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

padding-right

@mixin padding-right($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

padding-bottom

@mixin padding-bottom($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

padding-left

@mixin padding-left($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

margin

@mixin margin($scale: 1 0, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin

Used by

• [mixin] _padding-margin

margin-top

@mixin margin-top($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

margin-right

@mixin margin-right($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

margin-bottom

@mixin margin-bottom($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

margin-left

@mixin margin-left($scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Requires

• [mixin] _padding-margin-individual

dropcap

@mixin dropcap($float-position: left, $font-size: 4em, $font-family: inherit, $txt-indent: 0, $margin: 10px 10px 0 0, $padding: 0 20px, $color: inherit, $line-height: 1, $bg: transparent) { ... }

Description

Parameters

Output

[private] _to-rem

@function _to-rem($value) { ... }

Description

Parameters

Returns

Example

_to-rem(1)
// -> 1rem

_to-rem(16px)
// -> 1rem

_to-rem(100%)
// -> 1rem

Throws

• #{$value} is an invalid value for function to-rem. Use rem, px, %, or an unitless number instead.

Requires

• [function] _px-to-rem
• [function] _percent-to-rem

Used by

• [function] _to-unitless
• [mixin] _set-sizes
• [mixin] _breakpoint
• [function] _bp-size
• [mixin] font-size

Author

• Jared Howland

[private] _to-px

@function _to-px($value) { ... }

Description

Parameters

Returns

Example

_to-px(1)
// -> 16px

_to-px(1rem)
// -> 16px

_to-px(100%)
// -> 16px

Throws

• #{$value} is an invalid value for function to-px. Use rem, px, %, or an unitless number instead.

Requires

• [function] _rem-to-px
• [function] _percent-to-px

Used by

• [function] _line-height
• [function] _max-line-width
• [mixin] _set-sizes
• [function] _bp-base-font-size
• [function] _create-scale

Author

• Jared Howland

[private] _to-percent

@function _to-percent($value) { ... }

Description

Parameters

Returns

Example

_to-percent(1)
// -> 100%

_to-percent(1rem)
// -> 100%

_to-percent(16px)
// -> 100%

Throws

• #{$value} is an invalid value for function to-percent. Use rem, px, %, or an unitless number instead.

Requires

• [function] _percent-to-px
• [function] _rem-to-percent

Author

• Jared Howland

[private] _to-unitless

@function _to-unitless($value) { ... }

Description

Parameters

Returns

Example

_to-unitless(100%)
// -> 1

_to-unitless(1rem)
// -> 1

_to-unitless(16px)
// -> 1

Requires

• [function] _strip-units
• [function] _to-rem

Used by

• [function] _bp-line-height
• [function] _modular-scale-value

Author

• Jared Howland

[private] _px-to-rem

@function _px-to-rem($value) { ... }

Description

Parameters

Returns

Example

_px-to-rem(16px)
// -> 1rem

Requires

• [function] _strip-units
• [variable] default-browser-font-size

Used by

• [function] _to-rem

Author

• Jared Howland

[private] _percent-to-rem

@function _percent-to-rem($value) { ... }

Description

Parameters

Returns

Example

_percent-to-rem(100%)
// -> 1rem

Requires

• [function] _strip-units

Used by

• [function] _to-rem

Author

• Jared Howland

[private] _rem-to-px

@function _rem-to-px($value) { ... }

Description

Parameters

Returns

Example

_rem-to-px(1rem)
// -> 16px

Requires

• [function] _strip-units
• [variable] default-browser-font-size

Used by

• [function] _to-px

Author

• Jared Howland

[private] _percent-to-px

@function _percent-to-px($value) { ... }

Description

Parameters

Returns

Example

_percent-to-px(100%)
// -> 16px

Requires

• [function] _strip-units
• [variable] default-browser-font-size

Used by

• [function] _to-px
• [function] _to-percent

Author

• Jared Howland

[private] _rem-to-percent

@function _rem-to-percent($value) { ... }

Description

Parameters

Returns

Example

_rem-to-percent(1rem)
// -> 100%

Requires

• [function] _strip-units

Used by

• [function] _to-percent

Author

• Jared Howland

[private] _px-to-percent

@function _px-to-percent($value) { ... }

Description

Parameters

Returns

Example

_px-to-percent(16px)
// -> 100%

Requires

• [function] _strip-units
• [variable] default-browser-font-size

Author

• Jared Howland

[private] _strip-units

@function _strip-units($value) { ... }

Description

Parameters

Returns

Example

_strip-units(1rem)
// -> 1

_strip-units(16px)
// -> 16

Used by

• [function] _to-unitless
• [function] _px-to-rem
• [function] _percent-to-rem
• [function] _rem-to-px
• [function] _percent-to-px
• [function] _rem-to-percent
• [function] _px-to-percent
• [function] _line-height
• [function] _max-line-width
• [function] _bp-base-line-height-ratio

Author

• Jared Howland

[private] _line-height

@function _line-height($font-size, $i: 1) { ... }

Description

Parameters

Returns

Throws

• There is no breakpoint #{$i}. Enter a valid number (1-#{length($breakpoints)}).

Requires

• [function] _to-px
• [function] _bp-base-font-size
• [function] _bp-base-line-height-ratio
• [function] _strip-units
• [variable] breakpoints
• [variable] default-browser-font-size

Used by

• [mixin] _set-sizes
• [mixin] _height
• [mixin] _padding-margin
• [mixin] _padding-margin-individual
• [mixin] font-size

Author

• Jared Howland

[private] _max-line-width

@function _max-line-width($font-size, $line-height) { ... }

Description

Parameters

Returns

Requires

• [function] _strip-units
• [function] _to-px

Used by

• [mixin] _set-sizes

Links

• http://www.pearsonified.com/2011/12/golden-ratio-typography.php

Author

• Jared Howland

[private] _pow

@function _pow($base, $exponent) { ... }

Description

Parameters

Returns

Example

_pow(2, 4)
// -> 16

Used by

• [function] _create-scale-values

Author

• Jared Howland

[private] _set-sizes

@mixin _set-sizes($i) { ... }

Description

Parameters

Output

Example

body {
  @include rhythm();
}
// -> body {
// ->   font-size: 1rem;
// ->   line-height: 1.5rem;
// -> }
// -> .tera {
// ->   font-size: 4.25rem;
// ->   line-height: 4.5rem
// -> }
// ->
// -> .giga {
// ->   font-size: 2.9375rem;
// ->   line-height: 3rem
// -> }
// ->
// -> .mega {
// ->   font-size: 2.625rem;
// ->   line-height: 3rem
// -> }
// ->
// -> h1, .h1, .alpha {
// ->   font-size: 1.8125rem;
// ->   line-height: 3rem
// -> }
// ->
// -> h2, .h2, .beta {
// ->   font-size: 1.625rem;
// ->   line-height: 3rem
// -> }
// ->
// -> h3, .h3, .gamma {
// ->   font-size: 1.125rem;
// ->   line-height: 1.5rem
// -> }
// ->
// -> h4, .h4, .delta {
// ->   font-size: 1rem;
// ->   line-height: 1.5rem
// -> }
// ->
// -> h5, .h5, .epsilon, small, .caption {
// ->   font-size: 0.6875rem;
// ->   line-height: 1.5rem
// -> }
// ->
// -> h6, .h6, .zeta {
// ->   font-size: 0.625rem;
// ->   line-height: 1.5rem
// -> }
// ->
// -> section, .section {
// ->   margin: 0 auto;
// ->   max-width: 36rem
// -> }
// -> … for each breakpoint (`rhythm` mixin uses `_set_sizes` and loops through the breakpoints)

Requires

• [function] _bp-base-font-size
• [function] _bp-base-line-height
• [function] _bp-base-line-height-ratio
• [function] _bp-scale-values
• [function] _to-rem
• [function] _to-px
• [function] _line-height
• [function] _max-line-width

Used by

• [mixin] rhythm

[private] _breakpoint

@mixin _breakpoint($breakpoint-name: all) { ... }

Description

Parameters

Content

This mixin allows extra content to be passed (through the @content directive).

Output

Example

@include _breakpoint(2) {
  body {
    color: #F5F5F5;
  }
}
//-> @media screen and (min-width: 30rem) {
//->   body {
//->     color: #F5F5F5;
//->   }
//-> }

Requires

• [function] _to-rem
• [variable] breakpoints

Used by

• [mixin] _height
• [mixin] _padding-margin
• [mixin] _padding-margin-individual
• [mixin] rhythm
• [mixin] font-size

Links

• Inspiration 1
• Inspiration 2

[private] _height

@mixin _height($value, $font-sizes, $scale: 1) { ... }

Description

Parameters

Throws

• You have used #{length($font-sizes)} font-sizes. You have defined #{length($breakpoints)} breakpoints. You can only use 1 font-size or the same number of font-sizes as there are breakpoints.

Requires

• [mixin] _breakpoint
• [function] _line-height
• [function] _bp-name
• [variable] breakpoints

Used by

• [mixin] line-height
• [mixin] max-height

[private] _padding-margin

@mixin _padding-margin($value, $scale: 1 0, $decimal: false) { ... }

Description

Parameters

Output

Throws

• Invalid number of #{$value} values. Use 1, 2, 3, or 4 values only.

Requires

• [mixin] padding
• [mixin] _breakpoint
• [mixin] margin
• [function] _line-height
• [function] _bp-base-font-size
• [function] _bp-name
• [variable] breakpoints

Used by

• [mixin] padding
• [mixin] margin

[private] _padding-margin-individual

@mixin _padding-margin-individual($value, $scale: 1, $decimal: false) { ... }

Description

Parameters

Output

Throws

• #{$value} mixin can only accept a single value.

Requires

• [mixin] _breakpoint
• [function] _line-height
• [function] _bp-base-font-size
• [function] _bp-name
• [variable] breakpoints

Used by

• [mixin] padding-top
• [mixin] padding-right
• [mixin] padding-bottom
• [mixin] padding-left
• [mixin] margin-top
• [mixin] margin-right
• [mixin] margin-bottom
• [mixin] margin-left

[private] _get-bp-names

@function _get-bp-names() { ... }

Description

Parameters

None.

Returns

Requires

• [variable] breakpoints

Used by

• [function] _bp-name

Author

• Jared Howland

[private] _bp-name

@function _bp-name($i) { ... }

Description

Parameters

Returns

Requires

• [function] _get-bp-names

Used by

• [mixin] _height
• [mixin] _padding-margin
• [mixin] _padding-margin-individual
• [mixin] rhythm
• [mixin] font-size

Author

• Jared Howland

[private] _get-bp-data

@function _get-bp-data($i) { ... }

Description

Parameters

Returns

Requires

• [variable] breakpoints

Used by

• [function] _bp-size
• [function] _bp-font-sizes
• [function] _bp-line-height
• [function] _bp-scale-name

Author

• Jared Howland

[private] _bp-size

@function _bp-size($i) { ... }

Description

Parameters

Returns

Requires

• [function] _to-rem
• [function] _get-bp-data

Author

• Jared Howland

[private] _bp-font-sizes

@function _bp-font-sizes($i) { ... }

Description

Parameters

Returns

Requires

• [function] _get-bp-data

Used by

• [function] _bp-scale-values
• [function] _bp-base-font-size

Author

• Jared Howland

[private] _bp-line-height

@function _bp-line-height($i) { ... }

Description

Parameters

Returns

Requires

• [function] _get-bp-data
• [function] _to-unitless
• [function] _modular-scale-value
• [function] _bp-scale-name

Used by

• [function] _bp-base-line-height

Author

• Jared Howland

[private] _bp-scale-name

@function _bp-scale-name($i) { ... }

Description

Parameters

Returns

Requires

• [function] _get-bp-data

Used by

• [function] _bp-line-height
• [function] _bp-scale
• [function] _bp-scale-values

Author

• Jared Howland

[private] _bp-scale

@function _bp-scale($i) { ... }

Description

Parameters

Returns

Requires

• [function] _modular-scale-value
• [function] _bp-scale-name

Author

• Jared Howland

[private] _bp-scale-values

@function _bp-scale-values($i) { ... }

Description

Parameters

Returns

Requires

• [function] _create-scale
• [function] _bp-font-sizes
• [function] _bp-scale-name

Used by

• [mixin] _set-sizes
• [mixin] rhythm

Author

• Jared Howland

[private] _bp-base-font-size

@function _bp-base-font-size($i) { ... }

Description

Parameters

Returns

Requires

• [function] _to-px
• [function] _bp-font-sizes

Used by

• [function] _line-height
• [mixin] _set-sizes
• [mixin] _padding-margin
• [mixin] _padding-margin-individual
• [function] _bp-base-line-height
• [function] _bp-base-line-height-ratio

Author

• Jared Howland

[private] _bp-base-line-height

@function _bp-base-line-height($i) { ... }

Description

Parameters

Returns

Requires

• [function] _bp-line-height
• [function] _bp-base-font-size

Used by

• [mixin] _set-sizes
• [function] _bp-base-line-height-ratio

Author

• Jared Howland

[private] _bp-base-line-height-ratio

@function _bp-base-line-height-ratio($i) { ... }

Description

Parameters

Returns

Requires

• [function] _strip-units
• [function] _bp-base-line-height
• [function] _bp-base-font-size

Used by

• [function] _line-height
• [mixin] _set-sizes
• [function] _bp-base-scale-ratio

Author

• Jared Howland

[private] _bp-base-scale-ratio

@function _bp-base-scale-ratio($i) { ... }

Description

Parameters

Returns

Requires

• [function] _bp-base-line-height-ratio

Author

• Jared Howland

[private] _modular-scale-value

@function _modular-scale-value($scale-name: golden) { ... }

Description

Parameters

Returns

Requires

• [function] _to-unitless
• [variable] modular-scales

Used by

• [function] _bp-line-height
• [function] _bp-scale
• [function] _create-scale

Author

• Jared Howland

[private] _create-scale

@function _create-scale($font-sizes, $modular-scale: golden) { ... }

Description

Parameters

Returns

Requires

• [function] _modular-scale-value
• [function] _to-px
• [function] _create-scale-values

Used by

• [function] _bp-scale-values

TODO's

• Use an arglist for font-sizes rather than a list: http://www.sitepoint.com/sass-multiple-arguments-lists-or-arglist/

Links

• http://alistapart.com/article/more-meaningful-typography

Author

• Jared Howland

[private] _create-scale-values

@function _create-scale-values($font-size, $modular-scale) { ... }

Description

Parameters

Returns

Requires

• [function] _pow

Used by

• [function] _create-scale

Author

• Jared Howland