From 88abef1e5b5150b2519a277bc3969106ca648794 Mon Sep 17 00:00:00 2001 From: Jared Howland Date: Wed, 8 Jun 2016 16:55:24 -0600 Subject: [PATCH] [FIX] Name of documentation --- src/sassdoc/index.html | 104 ++++++++++++++++++++--------------------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/src/sassdoc/index.html b/src/sassdoc/index.html index c76d73a..84a02d8 100644 --- a/src/sassdoc/index.html +++ b/src/sassdoc/index.html @@ -1,4 +1,4 @@ -SassDoc

Configuration—General

variables

default-browser-font-size

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

Description

Default browser font size in pixels

Used to calculate conversions between different units

Type

Number

Used by

Author

  • Jared Howland

breakpoints

$breakpoints: (
+Rhythm
Configuration—General
variables
default-browser-font-size
$default-browser-font-size: 16 !default;
Description
Default browser font size in pixels
Used to calculate conversions between different units
Type
Number
Used by
Author
  • Jared Howland
breakpoints
$breakpoints: (
   bp-0: (
     breakpoint: 0, // Mobile first
     font-size: 16px 18px,
@@ -29,7 +29,7 @@
 ) !default;
Description
Map of various breakpoints
Type
Map
Map structure
NameDescriptionTypeValue
<Breakpoint-Name>
Required. Name of first breakpoint.
Map—
<Breakpoint-Name>.breakpoint
Required. Minimum width at which to apply these values
Number—
<Breakpoint-Name>.font-size
Required. Space-separated list of all font-sizes to use in a multi-stranded modular scale. 1 or more values required.
List—
<Breakpoint-Name>.line-height
Required. Unitless line-height
Number—
<Breakpoint-Name>.modular-scale
Optional. Name of modular scale to use (must be defined in $modular-scales). If not defined, will default to the line-height as the scale.
String—
<Other-Breakpoints>
Other breakpoints defined just like Breakpoint-Name above
Map—
Used by
Author
  • Jared Howland
modular-scales
$modular-scales: () !default;
Description
Map of various custom scales
Creating a custom map of scales will add scales to the map structure described below rather than simply overriding them so that both the custom and built-in scales are always available for use
Type
Map
Map structure
NameDescriptionTypeValue
golden—Number1.618
minor-second—Number1.067
major-second—Number1.125
minor-third—Number1.2
major-third—Number1.25
perfect-fourth—Number1.333
augmented-fourth—Number1.414
perfect-fifth:—Number1.5
minor-sixth—Number1.6
major-sixth—Number1.667
minor-seventh—Number1.778
major-seventh—Number1.875
octave—Number2
major-tenth—Number2.5
major-eleventh—Number2.667
major-twelfth—Number3
double-octave—Number4
Example
Defining custom scale(s)
$modular-scales: (
   my-scale-1: 1.1,
   my-scale-2: 1.3
-);
Used by
Author
  • Jared Howland
Configuration—Colors
variables
background-color
$background-color: #f5f5f5 !default;
Description
Color of background for page
Type
Color
Author
  • Jared Howland
code-background-color
$code-background-color: darken($background-color, 7%) !default;
Description
Color of background for code snippets
Type
Color
Author
  • Jared Howland
heading-color
$heading-color: #2e2e2e !default;
Description
Color for text of headings
Type
Color
Author
  • Jared Howland
body-color
$body-color: #444 !default;
Description
Color for text of body
Type
Color
Author
  • Jared Howland
body-color-muted
$body-color-muted: #ccc !default;
Description
Muted color for text
Type
Color
Author
  • Jared Howland
link-color
$link-color: #265c83 !default;
Description
Color for links
Type
Color
Author
  • Jared Howland
link-hover-color
$link-hover-color: lighten($link-color, 10%) !default;
Description
Color for links when hovered
Type
Color
Author
  • Jared Howland
link-background-color
$link-background-color: transparent !default;
Description
Color for background of links
Type
Color
Author
  • Jared Howland
Configuration—Fonts
variables
serif-font-family
$serif-font-family: Georgia, serif !default;
Description
Default serif font family
Type
List
Author
  • Jared Howland
sans-serif-font-family
$sans-serif-font-family: Helvetica, sans-serif !default;
Description
Default sans-serif font family
Type
List
Author
  • Jared Howland
monospace-font-family
$monospace-font-family: Menlo, monospace !default;
Description
Default monospace font family
Type
List
Author
  • Jared Howland
body-font
$body-font: $serif-font-family !default;
Description
Default font family for body
Type
List
Author
  • Jared Howland
heading-font
$heading-font: $sans-serif-font-family !default;
Description
Default font family for headings
Type
List
Author
  • Jared Howland
code-font
$code-font: $monospace-font-family !default;
Description
Default font family for code
Type
List
Author
  • Jared Howland
Configuration—Typography
variables
indent-value
$indent-value: 1rem !default;
Description
Indent value for paragraphs
Type
Number
Author
  • Jared Howland
dropcap-float-position
$dropcap-float-position: left !default;
Description
Float position for drop caps. Valid values: none, left, right, initial, or inherit.
Type
String
Author
  • Jared Howland
dropcap-font-size
$dropcap-font-size: 4em !default;
Description
Font size for drop caps.
Type
Number
Author
  • Jared Howland
dropcap-font-family
$dropcap-font-family: inherit !default;
Description
Font family for drop caps.
Type
List
Author
  • Jared Howland
dropcap-txt-indent
$dropcap-txt-indent: 0 !default;
Description
Indent size for drop caps.
Type
Number
Author
  • Jared Howland
dropcap-margin
$dropcap-margin: 10px 10px 0 0 !default;
Description
Margin for drop caps.
Type
Number or List
Author
  • Jared Howland
dropcap-padding
$dropcap-padding: 0 20px !default;
Description
Padding for drop caps.
Type
Number or List
Author
  • Jared Howland
dropcap-color
$dropcap-color: inherit !default;
Description
Color for drop caps.
Type
Color
Author
  • Jared Howland
dropcap-line-height
$dropcap-line-height: 1 !default;
Description
Line height for drop caps.
Type
Number
Author
  • Jared Howland
dropcap-bg
$dropcap-bg: transparent !default;
Description
Background for drop caps.
Type
String
Author
  • Jared Howland
General
mixins
rhythm
Used by
Author
  • Jared Howland
Configuration—Colors
variables
background-color
$background-color: #f5f5f5 !default;
Description
Color of background for page
Type
Color
Author
  • Jared Howland
code-background-color
$code-background-color: darken($background-color, 7%) !default;
Description
Color of background for code snippets
Type
Color
Author
  • Jared Howland
heading-color
$heading-color: #2e2e2e !default;
Description
Color for text of headings
Type
Color
Author
  • Jared Howland
body-color
$body-color: #444 !default;
Description
Color for text of body
Type
Color
Author
  • Jared Howland
body-color-muted
$body-color-muted: #ccc !default;
Description
Muted color for text
Type
Color
Author
  • Jared Howland
link-color
$link-color: #265c83 !default;
Description
Color for links
Type
Color
Author
  • Jared Howland
link-hover-color
$link-hover-color: lighten($link-color, 10%) !default;
Description
Color for links when hovered
Type
Color
Author
  • Jared Howland
link-background-color
$link-background-color: transparent !default;
Description
Color for background of links
Type
Color
Author
  • Jared Howland
Configuration—Fonts
variables
serif-font-family
$serif-font-family: Georgia, serif !default;
Description
Default serif font family
Type
List
Author
  • Jared Howland
sans-serif-font-family
$sans-serif-font-family: Helvetica, sans-serif !default;
Description
Default sans-serif font family
Type
List
Author
  • Jared Howland
monospace-font-family
$monospace-font-family: Menlo, monospace !default;
Description
Default monospace font family
Type
List
Author
  • Jared Howland
body-font
$body-font: $serif-font-family !default;
Description
Default font family for body
Type
List
Author
  • Jared Howland
heading-font
$heading-font: $sans-serif-font-family !default;
Description
Default font family for headings
Type
List
Author
  • Jared Howland
code-font
$code-font: $monospace-font-family !default;
Description
Default font family for code
Type
List
Author
  • Jared Howland
Configuration—Typography
variables
indent-value
$indent-value: 1rem !default;
Description
Indent value for paragraphs
Type
Number
Author
  • Jared Howland
dropcap-float-position
$dropcap-float-position: left !default;
Description
Float position for drop caps. Valid values: none, left, right, initial, or inherit.
Type
String
Author
  • Jared Howland
dropcap-font-size
$dropcap-font-size: 4em !default;
Description
Font size for drop caps.
Type
Number
Author
  • Jared Howland
dropcap-font-family
$dropcap-font-family: inherit !default;
Description
Font family for drop caps.
Type
List
Author
  • Jared Howland
dropcap-txt-indent
$dropcap-txt-indent: 0 !default;
Description
Indent size for drop caps.
Type
Number
Author
  • Jared Howland
dropcap-margin
$dropcap-margin: 10px 10px 0 0 !default;
Description
Margin for drop caps.
Type
Number or List
Author
  • Jared Howland
dropcap-padding
$dropcap-padding: 0 20px !default;
Description
Padding for drop caps.
Type
Number or List
Author
  • Jared Howland
dropcap-color
$dropcap-color: inherit !default;
Description
Color for drop caps.
Type
Color
Author
  • Jared Howland
dropcap-line-height
$dropcap-line-height: 1 !default;
Description
Line height for drop caps.
Type
Number
Author
  • Jared Howland
dropcap-bg
$dropcap-bg: transparent !default;
Description
Background for drop caps.
Type
String
Author
  • Jared Howland
General
mixins
rhythm
@mixin rhythm() { ... }
Description
Initializes Rhythm by looping through all breakpoints and setting default classes, font-sizes, and line-heights
Parameters
None.
Output
font-sizes, line-heights, and scaled classes for all breakpoints
Requires
font-size
@mixin rhythm() { ... }
Description
Initializes Rhythm by looping through all breakpoints and setting default classes, font-sizes, and line-heights
Parameters
None.
Output
font-sizes, line-heights, and scaled classes for all breakpoints
Requires
font-size
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
line-height
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
line-height
@mixin line-height($font-sizes, $scale: 1) { ... }
Description
Sets line-height separate from font-size. If you need to scale the line-height up, use this mixin.
Parameters
NameDescriptionTypeDefault value
$font-sizes
List of font-sizes. Should be either 1 font-size or a list of font-sizes for each breakpoint
List—
$scale
Value by which to scale the line-height
Number1
Output
line-height for each value in $font-sizes
Requires
max-height
@mixin line-height($font-sizes, $scale: 1) { ... }
Description
Sets line-height separate from font-size. If you need to scale the line-height up, use this mixin.
Parameters
NameDescriptionTypeDefault value
$font-sizes
List of font-sizes. Should be either 1 font-size or a list of font-sizes for each breakpoint
List—
$scale
Value by which to scale the line-height
Number1
Output
line-height for each value in $font-sizes
Requires
max-height
@mixin max-height($font-sizes, $scale) { ... }
Description
Sets max-height for an element
Parameters
NameDescriptionTypeDefault value
$font-sizes
List of font-sizes
List—
$scale
Value by which to scale the max-height
Number—
Output
max-height for each value in $font-sizes
Requires
padding
@mixin max-height($font-sizes, $scale) { ... }
Description
Sets max-height for an element
Parameters
NameDescriptionTypeDefault value
$font-sizes
List of font-sizes
List—
$scale
Value by which to scale the max-height
Number—
Output
max-height for each value in $font-sizes
Requires
padding
@mixin padding($scale: 1 0, $decimal: false) { ... }
Description
Sets padding as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding. Accepts 1, 2, 3, or 4 values just like the CSS padding properties
List1 0
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding values for all breakpoints
Requires
Used by
padding-top
@mixin padding($scale: 1 0, $decimal: false) { ... }
Description
Sets padding as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding. Accepts 1, 2, 3, or 4 values just like the CSS padding properties
List1 0
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding values for all breakpoints
Requires
Used by
padding-top
@mixin padding-top($scale: 1, $decimal: false) { ... }
Description
Sets padding-top as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-top
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-top value for all breakpoints
Requires
padding-right
@mixin padding-top($scale: 1, $decimal: false) { ... }
Description
Sets padding-top as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-top
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-top value for all breakpoints
Requires
padding-right
@mixin padding-right($scale: 1, $decimal: false) { ... }
Description
Sets padding-right as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-right
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-right value for all breakpoints
Requires
padding-bottom
@mixin padding-right($scale: 1, $decimal: false) { ... }
Description
Sets padding-right as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-right
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-right value for all breakpoints
Requires
padding-bottom
@mixin padding-bottom($scale: 1, $decimal: false) { ... }
Description
Sets padding-bottom as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-bottom
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-bottom value for all breakpoints
Requires
padding-left
@mixin padding-bottom($scale: 1, $decimal: false) { ... }
Description
Sets padding-bottom as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-bottom
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-bottom value for all breakpoints
Requires
padding-left
@mixin padding-left($scale: 1, $decimal: false) { ... }
Description
Sets padding-left as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-left
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-left value for all breakpoints
Requires
margin
@mixin padding-left($scale: 1, $decimal: false) { ... }
Description
Sets padding-left as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for padding-left
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
padding-left value for all breakpoints
Requires
margin
@mixin margin($scale: 1 0, $decimal: false) { ... }
Description
Sets margin as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin. Accepts 1, 2, 3, or 4 values just like the CSS margin properties
List1 0
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin values for all breakpoints
Requires
Used by
margin-top
@mixin margin($scale: 1 0, $decimal: false) { ... }
Description
Sets margin as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin. Accepts 1, 2, 3, or 4 values just like the CSS margin properties
List1 0
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin values for all breakpoints
Requires
Used by
margin-top
@mixin margin-top($scale: 1, $decimal: false) { ... }
Description
Sets margin-top as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-top
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-top value for all breakpoints
Requires
margin-right
@mixin margin-top($scale: 1, $decimal: false) { ... }
Description
Sets margin-top as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-top
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-top value for all breakpoints
Requires
margin-right
@mixin margin-right($scale: 1, $decimal: false) { ... }
Description
Sets margin-right as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-right
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-right value for all breakpoints
Requires
margin-bottom
@mixin margin-right($scale: 1, $decimal: false) { ... }
Description
Sets margin-right as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-right
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-right value for all breakpoints
Requires
margin-bottom
@mixin margin-bottom($scale: 1, $decimal: false) { ... }
Description
Sets margin-bottom as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-bottom
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-bottom value for all breakpoints
Requires
margin-left
@mixin margin-bottom($scale: 1, $decimal: false) { ... }
Description
Sets margin-bottom as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-bottom
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-bottom value for all breakpoints
Requires
margin-left
@mixin margin-left($scale: 1, $decimal: false) { ... }
Description
Sets margin-left as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-left
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-left value for all breakpoints
Requires
dropcap
@mixin margin-left($scale: 1, $decimal: false) { ... }
Description
Sets margin-left as a multiple of the modular scale
Parameters
NameDescriptionTypeDefault value
$scale
Scale value for margin-left
Number1
$decimal
Allow or don't allow decimal values. Decimal values will throw off vertical scale so false is the default value.
Boolfalse
Output
margin-left value for all breakpoints
Requires
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
Make first letter a dropcap
Parameters
NameDescriptionTypeDefault value
$float-position
Float dropcap so that it does not interupt vertical rhythm of paragraph
Stringleft
$font-size
font-size for dropcap
Number4em
$font-family
font-family for dropcap
Stringinherit
$txt-indent
Text indent for dropcap
Number0
$margin
margin for dropcap
List10px 10px 0 0
$padding
padding for dropcap
List0 20px
$color
color fo dropcap
Colorinherit
$line-height
line-height for dropcap
Number1
$bg
background for dropcap
Listtransparent
Output
Properties to create a dropcap
Private Helpers—General
functions
[private] _to-rem
@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
Make first letter a dropcap
Parameters
NameDescriptionTypeDefault value
$float-position
Float dropcap so that it does not interupt vertical rhythm of paragraph
Stringleft
$font-size
font-size for dropcap
Number4em
$font-family
font-family for dropcap
Stringinherit
$txt-indent
Text indent for dropcap
Number0
$margin
margin for dropcap
List10px 10px 0 0
$padding
padding for dropcap
List0 20px
$color
color fo dropcap
Colorinherit
$line-height
line-height for dropcap
Number1
$bg
background for dropcap
Listtransparent
Output
Properties to create a dropcap
Private Helpers—General
functions
[private] _to-rem
@function _to-rem($value) { ... }
Description
Convert value to rems
Parameters
NameDescriptionTypeDefault value
$value
Value to convert to rem. Acceptable units are unitless, px, and %.
Number—
Returns
Number —
Value converted into rems
Example
unitless to rem
_to-rem(1)
 // -> 1rem
px to rem
_to-rem(16px)
 // -> 1rem
% to rem
_to-rem(100%)
-// -> 1rem
Throws
  • #{$value} is an invalid value for function to-rem. Use rem, px, %, or an unitless number instead.
Requires
Used by
Author
  • Jared Howland
[private] _to-px
Throws
  • #{$value} is an invalid value for function to-rem. Use rem, px, %, or an unitless number instead.
Requires
Used by
Author
  • Jared Howland
[private] _to-px
@function _to-px($value) { ... }
Description
Convert value to pxs
Parameters
NameDescriptionTypeDefault value
$value
Value to convert to px. Acceptable units are unitless, rem, and %.
Number—
Returns
Number —
Value converted into pxs
Example
unitless to px
_to-px(1)
 // -> 16px
rem to px
_to-px(1rem)
 // -> 16px
% to px
_to-px(100%)
-// -> 16px
Throws
  • #{$value} is an invalid value for function to-px. Use rem, px, %, or an unitless number instead.
Requires
Used by
Author
  • Jared Howland
[private] _to-percent
Throws
  • #{$value} is an invalid value for function to-px. Use rem, px, %, or an unitless number instead.
Requires
Used by
Author
  • Jared Howland
[private] _to-percent
@function _to-percent($value) { ... }
Description
Convert value to %s
Parameters
NameDescriptionTypeDefault value
$value
Value to convert to %. Acceptable units are unitless, rem, and px.
Number—
Returns
Number —
Value converted into %s
Example
unitless to %
_to-percent(1)
 // -> 100%
rem to %
_to-percent(1rem)
 // -> 100%
px to %
_to-percent(16px)
-// -> 100%
Throws
  • #{$value} is an invalid value for function to-percent. Use rem, px, %, or an unitless number instead.
Requires
Author
  • Jared Howland
[private] _to-unitless
Throws
  • #{$value} is an invalid value for function to-percent. Use rem, px, %, or an unitless number instead.
Requires
Author
  • Jared Howland
[private] _to-unitless
@function _to-unitless($value) { ... }
Description
Convert value to be unitless
Parameters
NameDescriptionTypeDefault value
$value
Value to convert to be unitless. Acceptable units are rem, px, and %.
Number—
Returns
Number —
Value converted into unitless
Example
% to unitless
_to-unitless(100%)
 // -> 1
rem to unitless
_to-unitless(1rem)
 // -> 1
px to unitless
_to-unitless(16px)
-// -> 1
Requires
Used by
Author
  • Jared Howland
[private] _px-to-rem
Requires
Used by
Author
  • Jared Howland
[private] _px-to-rem
@function _px-to-rem($value) { ... }
Description
Convert px to rem
Parameters
NameDescriptionTypeDefault value
$value
Value to be converted to rem. The only acceptable unit is px.
Number—
Returns
Number —
Value converted into rem
Example
px to rem
_px-to-rem(16px)
-// -> 1rem
Requires
Used by
Author
  • Jared Howland
[private] _percent-to-rem
Requires
Used by
Author
  • Jared Howland
[private] _percent-to-rem
@function _percent-to-rem($value) { ... }
Description
Convert % to rem
Parameters
NameDescriptionTypeDefault value
$value
Value to be converted to rem. The only acceptable unit is %.
Number—
Returns
Number —
Value converted into rem
Example
% to rem
_percent-to-rem(100%)
-// -> 1rem
Requires
Used by
Author
  • Jared Howland
[private] _rem-to-px
Requires
Used by
Author
  • Jared Howland
[private] _rem-to-px
@function _rem-to-px($value) { ... }
Description
Convert rem to px
Parameters
NameDescriptionTypeDefault value
$value
Value to be converted to px. The only acceptable unit is rem.
Number—
Returns
Number —
Value converted into px
Example
rem to px
_rem-to-px(1rem)
-// -> 16px
Requires
Used by
Author
  • Jared Howland
[private] _percent-to-px
Requires
Used by
Author
  • Jared Howland
[private] _percent-to-px
@function _percent-to-px($value) { ... }
Description
Convert % to px
Parameters
NameDescriptionTypeDefault value
$value
Value to be converted to px. The only acceptable unit is %.
Number—
Returns
Number —
Value converted into px
Example
% to px
_percent-to-px(100%)
-// -> 16px
Requires
Used by
Author
  • Jared Howland
[private] _rem-to-percent
Requires
Used by
Author
  • Jared Howland
[private] _rem-to-percent
@function _rem-to-percent($value) { ... }
Description
Convert rem to %
Parameters
NameDescriptionTypeDefault value
$value
Value to be converted to %. The only acceptable unit is rem.
Number—
Returns
Number —
Value converted into %
Example
rem to %
_rem-to-percent(1rem)
-// -> 100%
Requires
Used by
Author
  • Jared Howland
[private] _px-to-percent
Requires
Used by
Author
  • Jared Howland
[private] _px-to-percent
@function _px-to-percent($value) { ... }
Description
Convert px to %
Parameters
NameDescriptionTypeDefault value
$value
Value to be converted to %. The only acceptable unit is px.
Number—
Returns
Number —
Value converted into %
Example
px to %
_px-to-percent(16px)
-// -> 100%
Requires
Author
  • Jared Howland
[private] _strip-units
Requires
Author
  • Jared Howland
[private] _strip-units
@function _strip-units($value) { ... }
Description
Strip units from a number
Parameters
NameDescriptionTypeDefault value
$value
Value to strip unit from
Number—
Returns
Number —
Value without units
Example
Strip rem
_strip-units(1rem)
 // -> 1
Strip px
_strip-units(16px)
-// -> 16
Used by
Author
  • Jared Howland
[private] _line-height
Used by
Author
  • Jared Howland
[private] _line-height
@function _line-height($font-size, $i: 1) { ... }
Description
Line height for a given font-size and breakpoint
Mixins will pass a number to this function to represent a breakpoint
1 through the number of breakpoints
Number depends on the number of breakpoints defined in your $breakpoints map
Parameters
NameDescriptionTypeDefault value
$font-size
Font size of the line (rem, px, %, or unitless)
Number—
$i
Breakpoint number (1 through the number of breakpoints)
Number1
Returns
Number —
The line height in rems
Throws
  • There is no breakpoint #{$i}. Enter a valid number (1-#{length($breakpoints)}).
Requires
Used by
Author
  • Jared Howland
[private] _max-line-width
@function _line-height($font-size, $i: 1) { ... }
Description
Line height for a given font-size and breakpoint
Mixins will pass a number to this function to represent a breakpoint
1 through the number of breakpoints
Number depends on the number of breakpoints defined in your $breakpoints map
Parameters
NameDescriptionTypeDefault value
$font-size
Font size of the line (rem, px, %, or unitless)
Number—
$i
Breakpoint number (1 through the number of breakpoints)
Number1
Returns
Number —
The line height in rems
Throws
  • There is no breakpoint #{$i}. Enter a valid number (1-#{length($breakpoints)}).
Requires
Used by
Author
  • Jared Howland
[private] _max-line-width
@function _max-line-width($font-size, $line-height) { ... }
Description
Optimal line width
Line widths that are too short or too long make it difficult to read.
Calculate the optimal line width for a given font-size and line-height: (line-height (in px))^2
Parameters
NameDescriptionTypeDefault value
$font-size
Font size of the line (rem, px, %, or unitless)
Number—
$line-height
Line height of the line (rem, px, %, or unitless)
Number—
Returns
Number —
The optimal line width in px
Requires
Used by
Links
Author
  • Jared Howland
[private] _pow
@function _max-line-width($font-size, $line-height) { ... }
Description
Optimal line width
Line widths that are too short or too long make it difficult to read.
Calculate the optimal line width for a given font-size and line-height: (line-height (in px))^2
Parameters
NameDescriptionTypeDefault value
$font-size
Font size of the line (rem, px, %, or unitless)
Number—
$line-height
Line height of the line (rem, px, %, or unitless)
Number—
Returns
Number —
The optimal line width in px
Requires
Used by
Links
Author
  • Jared Howland
[private] _pow
@function _pow($base, $exponent) { ... }
Description
Raises a number to the nth power
Used when generating heading sizes from a modular scale
Parameters
NameDescriptionTypeDefault value
$base
Base number
Number—
$exponent
Power to raise base number to
Number—
Returns
Number —
Result of a base number raised to given power
Example
2^4
_pow(2, 4)
-// -> 16
Used by
Author
  • Jared Howland
mixins
[private] _set-sizes
Used by
Author
  • Jared Howland
mixins
[private] _set-sizes
Requires
Used by
[private] _breakpoint
Requires
Used by
[private] _breakpoint
Requires
Used by
Links
[private] _height
Requires
Used by
Links
[private] _height
@mixin _height($value, $font-sizes, $scale: 1) { ... }
Description
Sets various heights for given font-sizes as multiples of the modular scale
Parameters
NameDescriptionTypeDefault value
$value
What height to set (accepts any string but line-height and max-height are the only two used by Rhythm)
String—
$font-sizes
List of font-sizes for each breakpoint. Should be either 1 font-size or a list of font-sizes for each breakpoint
List—
$scale
Value by which to scale the line-height
Number1
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
Used by
[private] _padding-margin
@mixin _height($value, $font-sizes, $scale: 1) { ... }
Description
Sets various heights for given font-sizes as multiples of the modular scale
Parameters
NameDescriptionTypeDefault value
$value
What height to set (accepts any string but line-height and max-height are the only two used by Rhythm)
String—
$font-sizes
List of font-sizes for each breakpoint. Should be either 1 font-size or a list of font-sizes for each breakpoint
List—
$scale
Value by which to scale the line-height
Number1
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
Used by
[private] _padding-margin
@mixin _padding-margin($value, $scale: 1 0, $decimal: false) { ... }
Description
Set padding and margin using CSS shorthand method as multiples of the modular scale
Parameters
NameDescriptionTypeDefault value
$value
Setting you wish to use: padding or margin are the only valid options.
String—
$scale
List of values by which to scale the padding or margin
List1 0
$decimal
Whether or not to allow decimal values. Whole integers maintain the vertical rhythm while portions of whole integers can throw off the rhythm unless the top and bottom padding or margin sum to a whole integer
Boolfalse
Output
Sets the padding or margin based on the scale values passed to mixin
Throws
  • Invalid number of #{$value} values. Use 1, 2, 3, or 4 values only.
Requires
Used by
[private] _padding-margin-individual
@mixin _padding-margin($value, $scale: 1 0, $decimal: false) { ... }
Description
Set padding and margin using CSS shorthand method as multiples of the modular scale
Parameters
NameDescriptionTypeDefault value
$value
Setting you wish to use: padding or margin are the only valid options.
String—
$scale
List of values by which to scale the padding or margin
List1 0
$decimal
Whether or not to allow decimal values. Whole integers maintain the vertical rhythm while portions of whole integers can throw off the rhythm unless the top and bottom padding or margin sum to a whole integer
Boolfalse
Output
Sets the padding or margin based on the scale values passed to mixin
Throws
  • Invalid number of #{$value} values. Use 1, 2, 3, or 4 values only.
Requires
Used by
[private] _padding-margin-individual
@mixin _padding-margin-individual($value, $scale: 1, $decimal: false) { ... }
Description
Set padding or margin individually (padding-right, margin-bottom, etc) as multiples of modular scale
Parameters
NameDescriptionTypeDefault value
$value
Setting you wish to use: padding-top or margin-bottom for example
String—
$scale
List of values by which to scale the padding or margin
List1
$decimal
Whether or not to allow decimal values. Whole integers maintain the vertical rhythm while portions of whole integers can throw off the rhythm unless the top and bottom padding or margin sum to a whole integer
Boolfalse
Output
Sets the padding or margin based on the scale values passed to mixin
Throws
  • #{$value} mixin can only accept a single value.
Requires
Used by
Private Helpers—Breakpoints
functions
[private] _get-bp-names
@mixin _padding-margin-individual($value, $scale: 1, $decimal: false) { ... }
Description
Set padding or margin individually (padding-right, margin-bottom, etc) as multiples of modular scale
Parameters
NameDescriptionTypeDefault value
$value
Setting you wish to use: padding-top or margin-bottom for example
String—
$scale
List of values by which to scale the padding or margin
List1
$decimal
Whether or not to allow decimal values. Whole integers maintain the vertical rhythm while portions of whole integers can throw off the rhythm unless the top and bottom padding or margin sum to a whole integer
Boolfalse
Output
Sets the padding or margin based on the scale values passed to mixin
Throws
  • #{$value} mixin can only accept a single value.
Requires
Used by
Private Helpers—Breakpoints
functions
[private] _get-bp-names
@function _get-bp-names() { ... }
Description
Get all breakpoint names from $breakpoints map
Parameters
None.
Returns
List —
List of all names for breakpoints
Requires
Used by
Author
  • Jared Howland
[private] _bp-name
@function _get-bp-names() { ... }
Description
Get all breakpoint names from $breakpoints map
Parameters
None.
Returns
List —
List of all names for breakpoints
Requires
Used by
Author
  • Jared Howland
[private] _bp-name
@function _bp-name($i) { ... }
Description
Get breakpoint name for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
String —
Name of specified breakpoint
Requires
Used by
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _get-bp-data
@function _bp-name($i) { ... }
Description
Get breakpoint name for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
String —
Name of specified breakpoint
Requires
Used by
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _get-bp-data
@function _get-bp-data($i) { ... }
Description
Get all data about breakpoint $i
Breakpoint location, font-size, line-height, and name of modular scale
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Map —
Map of data for specified breakpoint
Requires
Used by
Author
  • Jared Howland
[private] _bp-size
@function _get-bp-data($i) { ... }
Description
Get all data about breakpoint $i
Breakpoint location, font-size, line-height, and name of modular scale
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Map —
Map of data for specified breakpoint
Requires
Used by
Author
  • Jared Howland
[private] _bp-size
@function _bp-size($i) { ... }
Description
Breakpoint location returned in rem for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Breakpoint location expressed as rem
Requires
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _bp-font-sizes
@function _bp-size($i) { ... }
Description
Breakpoint location returned in rem for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Breakpoint location expressed as rem
Requires
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _bp-font-sizes
@function _bp-font-sizes($i) { ... }
Description
Stranded font-sizes for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
List —
List of font-size strands for breakpoint $i
Requires
Used by
Author
  • Jared Howland
[private] _bp-line-height
@function _bp-font-sizes($i) { ... }
Description
Stranded font-sizes for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
List —
List of font-size strands for breakpoint $i
Requires
Used by
Author
  • Jared Howland
[private] _bp-line-height
@function _bp-line-height($i) { ... }
Description
Line height for the breakpoint in unitless value
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Unitless line-height value for breakpoint $i. If it doesn't exist, use the modular scale value as the line-height.
Requires
Used by
Author
  • Jared Howland
[private] _bp-scale-name
@function _bp-line-height($i) { ... }
Description
Line height for the breakpoint in unitless value
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Unitless line-height value for breakpoint $i. If it doesn't exist, use the modular scale value as the line-height.
Requires
Used by
Author
  • Jared Howland
[private] _bp-scale-name
@function _bp-scale-name($i) { ... }
Description
Name of modular scale for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
String —
Name of modular scale
Requires
Used by
Author
  • Jared Howland
[private] _bp-scale
@function _bp-scale-name($i) { ... }
Description
Name of modular scale for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
String —
Name of modular scale
Requires
Used by
Author
  • Jared Howland
[private] _bp-scale
@function _bp-scale($i) { ... }
Description
Ratio value for creating modular scales of breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Unitless ratio value of named modular scale
Requires
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _bp-scale-values
@function _bp-scale($i) { ... }
Description
Ratio value for creating modular scales of breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Unitless ratio value of named modular scale
Requires
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _bp-scale-values
@function _bp-scale-values($i) { ... }
Description
9 values derived from the modular scale and base font-size for breakpoint $i; 2 smaller than base font-size; 7 larger than or equal to base font-size
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
List —
List of values based on modular scale of breakpoint $i
Requires
Used by
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _bp-base-font-size
@function _bp-scale-values($i) { ... }
Description
9 values derived from the modular scale and base font-size for breakpoint $i; 2 smaller than base font-size; 7 larger than or equal to base font-size
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
List —
List of values based on modular scale of breakpoint $i
Requires
Used by
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
[private] _bp-base-font-size
@function _bp-base-font-size($i) { ... }
Description
Gets the first value in the font-size list for breakpoint $i
Assumes first value in list is the base font-size
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Base font-size in px
Requires
Used by
Author
  • Jared Howland
[private] _bp-base-line-height
@function _bp-base-font-size($i) { ... }
Description
Gets the first value in the font-size list for breakpoint $i
Assumes first value in list is the base font-size
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Base font-size in px
Requires
Used by
Author
  • Jared Howland
[private] _bp-base-line-height
@function _bp-base-line-height($i) { ... }
Description
Base line-height for breakpoint $i in px
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Base line-height for breakpoint $i rounded to nearest px
Requires
Used by
Author
  • Jared Howland
[private] _bp-base-line-height-ratio
@function _bp-base-line-height($i) { ... }
Description
Base line-height for breakpoint $i in px
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Base line-height for breakpoint $i rounded to nearest px
Requires
Used by
Author
  • Jared Howland
[private] _bp-base-line-height-ratio
@function _bp-base-line-height-ratio($i) { ... }
Description
Base line-height expressed as a unitless ratio for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Unitless ratio of line-height for breakpoint $i
Requires
Used by
Author
  • Jared Howland
[private] _bp-base-scale-ratio
@function _bp-base-line-height-ratio($i) { ... }
Description
Base line-height expressed as a unitless ratio for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Unitless ratio of line-height for breakpoint $i
Requires
Used by
Author
  • Jared Howland
[private] _bp-base-scale-ratio
@function _bp-base-scale-ratio($i) { ... }
Description
Base modular scale for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Untiless ratio for modular scale
Requires
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
Private Helpers—Modular Scale
functions
[private] _modular-scale-value
@function _bp-base-scale-ratio($i) { ... }
Description
Base modular scale for breakpoint $i
Parameters
NameDescriptionTypeDefault value
$i
Breakpoint number. Must be between 1 and the number of breakpoints defined in $breakpoints map variable.
Number—
Returns
Number —
Untiless ratio for modular scale
Requires
TODO's
  • Figure out if this is still used
Author
  • Jared Howland
Private Helpers—Modular Scale
functions
[private] _modular-scale-value
@function _modular-scale-value($scale-name: golden) { ... }
Description
Finds the numerical value of a named modular scale: golden, minor-second, etc.
Will return an unitless {Number} if a {Number} is passed instead of a {String}.
If $scale-name does not exist, will return 1.618 (golden ratio).
Parameters
NameDescriptionTypeDefault value
$scale-name
Name of the modular scale
Stringgolden
Returns
Number —
Unitless modular scale value
Requires
Used by
Author
  • Jared Howland
[private] _create-scale
@function _modular-scale-value($scale-name: golden) { ... }
Description
Finds the numerical value of a named modular scale: golden, minor-second, etc.
Will return an unitless {Number} if a {Number} is passed instead of a {String}.
If $scale-name does not exist, will return 1.618 (golden ratio).
Parameters
NameDescriptionTypeDefault value
$scale-name
Name of the modular scale
Stringgolden
Returns
Number —
Unitless modular scale value
Requires
Used by
Author
  • Jared Howland
[private] _create-scale
@function _create-scale($font-sizes, $modular-scale: golden) { ... }
Description
Creates modular scales for each font-size strand
Supports double-stranded modular scales
Technically, _create-scale() supports as many strands as you pass to it but 2 is the recommended maximum.
Parameters
NameDescriptionTypeDefault value
$font-sizes
List of each font-size strand in your modular scale
List—
$modular-scale
Name of modular scale you want to use as basis for scale
Stringgolden
Returns
List —
List of 9 values based on $font-sizes and $modular-scale
Requires
Used by
TODO's
Links
Author
  • Jared Howland
[private] _create-scale-values
@function _create-scale($font-sizes, $modular-scale: golden) { ... }
Description
Creates modular scales for each font-size strand
Supports double-stranded modular scales
Technically, _create-scale() supports as many strands as you pass to it but 2 is the recommended maximum.
Parameters
NameDescriptionTypeDefault value
$font-sizes
List of each font-size strand in your modular scale
List—
$modular-scale
Name of modular scale you want to use as basis for scale
Stringgolden
Returns
List —
List of 9 values based on $font-sizes and $modular-scale
Requires
Used by
TODO's
Links
Author
  • Jared Howland
[private] _create-scale-values
@function _create-scale-values($font-size, $modular-scale) { ... }
Description
Creates 9 values based on a single font-size for chosen scale value
Parameters
NameDescriptionTypeDefault value
$font-size
Font size in px
Number—
$modular-scale
Modular scale as unitless value
Number—
Returns
List —
List of 9 values based on the modular scale; 2 smaller than $font-size; 7 larger than or equal to $font-size
Requires
Used by
Author
  • Jared Howland
SassDoc
SassDoc Logo

\ No newline at end of file
+ }" data-collapsed="@function _create-scale-values($font-size, $modular-scale) { ... }">@function _create-scale-values($font-size, $modular-scale) { ... }

Description

Creates 9 values based on a single font-size for chosen scale value

Parameters

NameDescriptionTypeDefault value
$font-size

Font size in px

Number—
$modular-scale

Modular scale as unitless value

Number—

Returns

List —

List of 9 values based on the modular scale; 2 smaller than $font-size; 7 larger than or equal to $font-size

Requires

Used by

Author

  • Jared Howland

Rhythm
SassDoc Logo