Configuration
variables
rem-px-fallback
$rem-px-fallback: false !default;
View sourceDescription
Determines whether rems()
conversion includes a pixel-value fallback for older browsers like IE8.
Used by
- [mixin]
media-query
- [mixin]
media-query
- [mixin]
media-query
- [mixin]
px-to-rems
base-font-size
$base-font-size: 16px !default;
View sourceDescription
Font size all other values will use for calculation. Will be converted to rems
.
Used by
- [mixin]
init
- [mixin]
init
- [mixin]
init
- [mixin]
init
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
modular-scale
base-line-height
$base-line-height: 24px !default;
View sourceDescription
Line-height for base font-size. Essentially determines the baseline grid for alignment.
Used by
- [mixin]
init
- [function]
baseline-calc
- [function]
baseline-calc
See
- [mixin]
type-space
auto-line-height-looseness (aliased as font-looseness
)
$auto-line-height-looseness: 15% !default;
View sourceDescription
A rough estimate of how loose line-heights should be calculated against their font-sizes (when automatically generated).
Used by
- [function]
baseline-calc
type-h1-size
$type-h1-size: modular-scale(7) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-h2-size
$type-h2-size: modular-scale(5) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-h3-size
$type-h3-size: modular-scale(4) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-h4-size
$type-h4-size: modular-scale(3) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-h5-size
$type-h5-size: modular-scale(2) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-h6-size
$type-h6-size: modular-scale(1) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-p-size
$type-p-size: ($base-font-size, $base-line-height) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-small-size
$type-small-size: modular-scale(-1) !default;
View sourceType
List
or Number - should be pixel values. a single value is the font-size, while a secondary (optional) value is the line-height.
Used by
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
primary-font-stack
$primary-font-stack: $system-font-stack !default;
View sourceDescription
Reference for the project's main font-stack.
monospace-font-stack
$monospace-font-stack: 'SFMono-Regular', 'SF Mono', 'Ubuntu Mono', Consolas,
'DejaVu Sans Mono', Menlo, monospace !default;
View sourceDescription
Reference for the project's monospaced font-stack.
web-fonts (aliased as include-web-fonts
)
$web-fonts: (
'system': (
'weights': (
400,
700,
),
'italics': (
400,
700,
),
'formats': (
'woff',
),
),
) !default;
View sourceDescription
Description of weights, styles and formats for the project's web fonts. The root key value determines the name, while each inner key determines the weights, styles, and formats.
Type
Map
Map structure
map key Name | map key Description | map key Type | map key Value |
---|---|---|---|
font-name | name of the font family | Map | — none |
font-name.weights | font-weights to include | List</code> or <code>Number | — none |
font-name.italics | include italics for weights | List</code> or <code>Number | — none |
font-name.formats | file formats to include | List</code> or <code>String | — none |
web-fonts-path (aliased as font-file-location
)
$web-fonts-path: '' !default;
View sourceDescription
Relative path to fonts from CSS file
Type
String
Used by
- [mixin]
web-fonts
vertical-space
$vertical-space: $base-line-height !default;
View sourceDescription
The base vertical unit. Used in type-space
and grid functions.
Used by
- [mixin]
type-space
- [function]
type-space
See
- [mixin]
type-space
horizontal-space
$horizontal-space: $base-line-height !default;
View sourceDescription
The base horizontal unit. Used in type-space
and grid functions.
Used by
- [mixin]
type-space
- [function]
type-space
- [function]
type-space
See
- [mixin]
type-space
auto-scale-type
$auto-scale-type: false !default;
View sourceDescription
Automatically scale type values?
Type
Boolean
Used by
- [mixin]
_set-global-typography-variables
auto-scale-type-ratio (aliased as scale-ratio
)
$auto-scale-type-ratio: 1.125 !default;
View sourceDescription
Modular scale ratio
Type
Number
Used by
- [function]
modular-scale
spacing-classes (aliased as spacing-utilities-init
)
$spacing-classes: (
silent: true,
important: false,
format: (
'u-{%property%}' '{%direction%}{%amount%}' '{\\@}{%breakpoint%}',
),
properties: (
'margin': margin,
),
directions: (
'': '',
),
amounts: (
'': 1,
),
unit: 'auto',
) !default;
View sourceDescription
Utility spacing class configuration.
Type
Map
Map structure
map key Name | map key Description | map key Type | map key Value |
---|---|---|---|
$config | — none | Map | () |
$config.silent | Output silent classes? | Boolean | true |
$config.important | Make declarations important? | Boolean | false |
$config.format | Class formatting. Accepts | String | — none |
$config.directions | Names and directions to append to class names. | Map | ('-t': 'top') |
$config.amounts | Names and values to multiply by each | Map | ('-2': 2) |
$config.properties | Names for each property. | Map | ('m': margin) |
$config.unit | What unit to multiply each 'amounts'. Passed directly to | Boolean | 'auto' |
Requires
- [function]
format-class-name
display-classes (aliased as display-utilities-init
)
$display-classes: $_default-display-classes !default;
View sourceDescription
A description of class names and their associated display
value. Used for generating utility classes via display-classes
mixin.
Type
Map
Used by
- [mixin]
display-classes
- [mixin]
display-classes
debug-fonts
$debug-fonts: false !default;
View sourceDescription
Whether to show console outputs of line-heights that are automatically calculated.
Used by
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
debug-silent-classes
$debug-silent-classes: false !default;
View sourceDescription
Stores all auto-generated silent classes into a map that is then output as a comment at the end of the final css. Useful for getting an overview of values that are stored by the framework.
Used by
- [mixin]
_output-display-classes
- [mixin]
_output-display-classes
- [function]
silents-register
- [mixin]
_output-spacing-classes
- [mixin]
_output-spacing-classes
max-site-width
$max-site-width: 1360px !default;
View sourceUsed by
- [function]
px-to-vw
max-content-width
$max-content-width: 690px !default;
View sourcemax-wide-content-width
$max-wide-content-width: 910px !default;
View sourcebreakpoints
$breakpoints: (
// Mostly phones
smalls: '(max-width:#{($max-wide-content-width/16px)}em)',
// Small Phones
small: '(max-width: #{($max-content-width/16px)}em)',
// Large (Modern) phones/phablets
smallish: '(min-width: #{(($max-content-width + 1)/16px)}em)' +
' and (max-width: #{($max-wide-content-width/16px)}em)',
// Tablets, Desktops and larger
bigs: '(min-width: #{($max-wide-content-width/16px)}em)',
// Mostly Tablets and small laptops. Overrides Bigs
lap: '(min-width: #{($max-wide-content-width/16px)}em)' +
' and (max-width: #{($max-site-width/16px)}em)',
// Large Tablets and Desktops. Overrides Bigs.
desk: '(min-width: #{($max-site-width/16px)}em)'
) !default;
View sourceDescription
Breakpoint strings to use with media-query
mixin.
Used by
- [mixin]
init
- [mixin]
display-classes
- [mixin]
create-overrides
- [mixin]
spacing-classes
See
- [mixin]
media-query
grid-columns
$grid-columns: 12 !default;
View sourceDescription
Total columns to base your grid on.
Used by
- [mixin]
grid-width
- [mixin]
grid-width
grid-gutter
$grid-gutter: 32px !default;
View sourceDescription
Space between grid items.
grid-bem-naming
$grid-bem-naming: false !default;
View sourceDescription
Use BEM-style naming for grid classes?
grid-silent-classes
$grid-silent-classes: false !default;
View sourceDescription
Generate silent classes for the grid?
grid-flex
$grid-flex: true !default;
View sourceDescription
Use a flex-based grid?
Used by
- [mixin]
grid-row
- [mixin]
grid-init
- [mixin]
width-classes
- [mixin]
grid-width
grid-inline-block
$grid-inline-block: true !default;
View sourceDescription
Use an inline-block-based grid? Can be used in conjunction with flex as a fallback.
Used by
grid-floats
$grid-floats: false !default;
View sourceDescription
Use a float-based grid?
Used by
grid-letter-space-fix
$grid-letter-space-fix: -0.45em !default;
View sourceDescription
With inline-block-based grids, we need to "fix" the space between items with a negative letter-spacing value. This value might change based on your project's base font.
grid-push
$grid-push: true !default;
View sourceDescription
Include push grid classes?
Used by
- [mixin]
grid-init
grid-pull
$grid-pull: true !default;
View sourceDescription
Include pull grid classes?
Used by
- [mixin]
grid-init
grid-width-namespace
$grid-width-namespace: if($grid-bem-naming, 'w-', '') !default;
View sourceDescription
String to include before grid width classes.
breakpoint-has-widths
$breakpoint-has-widths: ('smalls', 'small', 'bigs', 'lap', 'desk') !default;
View sourceDescription
List of media-queries (as defined in $breakpoints
) that should have width utility classes.
Type
List
Used by
- [mixin]
width-classes
breakpoint-has-push
$breakpoint-has-push: ('smalls', 'small', 'bigs', 'lap', 'desk') !default;
View sourceDescription
List of media-queries (as defined in $breakpoints
) that should have grid-push utility classes.
Type
List
Used by
- [mixin]
push-classes
breakpoint-has-pull
$breakpoint-has-pull: ('smalls', 'small', 'bigs', 'lap', 'desk') !default;
View sourceDescription
List of media-queries (as defined in $breakpoints
) that should have grid-pull utility classes.
Type
List
Used by
- [mixin]
pull-classes
base-colors
$base-colors: (
'type': (
'base': #0a1c2b,
),
'links': #0d497b,
'bg': #f6f8fb,
) !default;
View sourceDescription
Index of all colors used in the project. This is the one place colors should be used from. Accessing them should be done via the colors function. Note: 'type'
, 'links'
, and 'bg'
must be defined.
Used by
See
- [function]
colors
Core API
variables
system-font-stack
$system-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
Roboto, 'Helvetica Neue', sans-serif;
View sourceDescription
Font-stack for using the user's operating system's native font.
type-base-unit
$type-base-unit: $base-line-height !global;
View sourceDescription
Abstraction of the base spacing unit used in any mixin or function that defines spacing units.
Type
Number
Used by
type-base-ratio
$type-base-ratio: ($type-base-unit / $base-font-size) !global;
View sourceDescription
Ratio used to calculate the difference between font sizes and spacing units.
Type
Number
Used by
- [mixin]
init
h1-fs
$h1-fs: nth($type-h1-size, 1) !global;
View sourceDescription
H1 font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h1-lh (aliased as type-h1-lh
)
$h1-lh: _extract-line-height($type-h1-size) !global;
View sourceDescription
H1 line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h2-fs
$h2-fs: nth($type-h2-size, 1) !global;
View sourceDescription
H2 font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h2-lh (aliased as type-h2-lh
)
$h2-lh: _extract-line-height($type-h2-size) !global;
View sourceDescription
H2 line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h3-fs
$h3-fs: nth($type-h3-size, 1) !global;
View sourceDescription
H3 font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h3-lh (aliased as type-h3-lh
)
$h3-lh: _extract-line-height($type-h3-size) !global;
View sourceDescription
h3 line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h4-fs
$h4-fs: nth($type-h4-size, 1) !global;
View sourceDescription
H4 font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h4-lh (aliased as type-h4-lh
)
$h4-lh: _extract-line-height($type-h4-size) !global;
View sourceDescription
h4 line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h5-fs
$h5-fs: nth($type-h5-size, 1) !global;
View sourceDescription
H5 font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h5-lh (aliased as type-h5-lh
)
$h5-lh: _extract-line-height($type-h5-size) !global;
View sourceDescription
h5 line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
h6-lh (aliased as type-h6-lh
)
$h6-lh: _extract-line-height($type-h6-size) !global;
View sourceDescription
h6 line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
p-fs
$p-fs: nth($type-p-size, 1) !global;
View sourceDescription
paragraph font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
p-lh (aliased as type-p-lh
)
$p-lh: _extract-line-height($type-p-size) !global;
View sourceDescription
paragraph line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
small-fs
$small-fs: nth($type-small-size, 1) !global;
View sourceDescription
small font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
small-lh (aliased as type-small-lh
)
$small-lh: _extract-line-height($type-small-size) !global;
View sourceDescription
small line-height
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
mixins
font-size (aliased as type-font-size
fs
)
@mixin font-size($font-size, $line-height: 'auto', $important: false, $base-font: $base-font-size) { ... }
View sourceDescription
Quickly generate a font-size in rems (with a pixel fallback if $rem-px-fallback = true
). Optionally calculates baseline-aligned line-height a using $base-line-height
and the baseline-calc
function.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$font-size | Pixel value to be converted. | Pixel | — none |
$line-height |
| Boolean or String or Number | 'auto' |
$important | Whether to add | Boolean | false |
$base-font | — none | Pixel | $base-font-size |
Requires
- [mixin]
px-to-rems
- [function]
baseline-calc
- [function]
cache
Used by
- [mixin]
type-font-size
- [mixin]
fs
type-space (aliased as space
)
@mixin type-space($property, $multipliers, $important: false) { ... }
View sourceDescription
Output rem
values using the typographic grid. This is the prefered method of adding padding and margins because it enforces consistent spacing around all elements.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$property | Can be any | Property | — none |
$multipliers | Accepts unitless values that get converted to | List or Number | — none |
$important |
| Boolean or String | false |
Example
// SCSS input
.foo {
@include type-space(padding, 1 .25 .5 auto, '!important');
}
// CSS output
.foo {
padding: 24px 8px 12px auto !important;
padding: 1.5rem .375rem .75rem auto !important;
}
Requires
- [mixin]
px-to-rems
- [function]
str-contains
- [function]
str-contains
- [function]
str-contains
- [variable]
horizontal-space
- [variable]
vertical-space
Used by
- [mixin]
grid-row
- [mixin]
grid-item
- [mixin]
space
- [mixin]
_output-spacing-classes
See
- [mixin]
type-space
web-fonts
@mixin web-fonts($font-map: $web-fonts) { ... }
View sourceDescription
A wrapper function for @font-face()
. Takes a configuration map and passes the keys to @font-face()
. Loops through each font-name's (root map keys) weight and style.
Font file names must be the same as their CSS font-family values. Example: arial font, 400 weight would be arial-400.ttf and the CSS value would be font-family: 'arial'; font-weight: 400.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$font-map | — none | Map | $web-fonts |
Requires
- [mixin]
_font-weights
- [mixin]
_font-weights
- [variable]
web-fonts-path
- [variable]
font-file-location
Used by
- [mixin]
include-web-fonts
See
- [variable]
web-fonts
px-to-rems
@mixin px-to-rems($property, $sizes, $important: false, $base-font: $base-font-size) { ... }
View sourceDescription
Takes a pixel value and creates a property with a rem
value. If $rem-px-fallback
is true
, a pixel fallback is also included.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$property | CSS property value to output | Property | — none |
$sizes | Pixel value(s) to be converted. A list results in a each value being processed. Can also be 'auto' or 'normal' (which avoid conversion). | List or Pixel | — none |
$important | Whether to add | Boolean | false |
$base-font | The base value at which the pixels should be calculated against. Usually not necessary to change. | Pixel | $base-font-size |
Requires
- [function]
px-to-rems
- [variable]
rem-px-fallback
Used by
- [mixin]
type-space
- [mixin]
font-size
- [mixin]
rems
spacing-classes
@mixin spacing-classes($breakpoints: $_all-breakpoints, $config: $spacing-classes) { ... }
View sourceDescription
The responsive component to _output-spacing-classes
. Invokes spacing-utilites
that loops through a set of media-queries defined in $breakpoints
. This is most useful for creating responsive spacing classes.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoints | breakpoints to loop over. | Map | $_all-breakpoints |
$config | Passed to | Map | $spacing-classes |
Requires
- [mixin]
_output-spacing-classes
- [mixin]
media-query
- [mixin]
_output-spacing-classes
- [function]
format-class-name
- [function]
format-class-name
- [variable]
breakpoints
Used by
- [mixin]
spacing-utilities-init
create-overrides
@mixin create-overrides($map, $breakpoints, $namespace: "", $separator: $breakpoint-namespace-character) { ... }
View sourceDescription
Takes a map of class names and style properties and outputs utility (override) classes over a specified number of breakpoints. Useful for creating a number of single-use classes over multiple breakpoints. Always makes property declarations !important
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | map of class names, properties and their values. | Map | — none |
$breakpoints | List of breakpoints to create classes for. | List | — none |
$namespace | Value to put before each class. | String | "" |
$separator | string to place between breakpoint names and the classes. | String | $breakpoint-namespace-character |
Example
@include creat-overrides(
(
"class-name": (
"property": "value",
),
"float-right, align_right": (
"float": "right"
)
),
('smalls', 'bigs')
);
//CSS output
.float-left {
float: left !important;
}
.float-right, .align_right {
float: right !important;
}
@media (max-width: 600px) { // "smalls"
.smalls-float-left {
float: left !important;
}
.smalls-float-right, .smalls-align_right {
float: right !important;
}
}
@media (min-width: 601px) { // "bigs"
...
}
Requires
- [mixin]
_override-output
- [mixin]
media-query
- [mixin]
_override-output
- [variable]
breakpoints
display-classes
@mixin display-classes($breakpoints: $_all-breakpoints, $namespace: '', $silent: false, $important: false) { ... }
View sourceDescription
The responsive component to _output-display-classes
. Invokes _output-display-classes
while looping through a set of media-queries defined in $breakpoints
. This is most useful for creating responsive display classes.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoints | list of breakpoint names to loop over | List | $_all-breakpoints |
$namespace | String to prepend to classes. | String | '' |
$silent | Generate silent classes? | Boolean | false |
$important | Add | Boolean | false |
Requires
- [mixin]
_output-display-classes
- [mixin]
media-query
- [mixin]
_output-display-classes
- [function]
map-extend
- [function]
format-class-list
- [function]
format-class-list
- [variable]
display-classes
- [variable]
display-classes
- [variable]
breakpoints
Used by
- [mixin]
display-utilities-init
media-query (aliased as media
mq
breakpoint
bp
)
@mixin media-query($mq...) { ... }
View sourceDescription
Enclose a block of code with a media query as named in $breakpoints
. To create more consolodated code, most (if not all) media queries should be called through this mixin. Multiple media-queries can be defined, separated by a comma. This will place your content into multiple separate media-queries at once (useful if you need the same css at different breakpoints). Alternative Uses:
- Passing multiple media queries separated by an
'and'
(quoted) to combine them, compiles to something like@media screen and (min-width: 500px) and (max-width: 900px){}
. - Passing a value like
min-width 1200px
ormax-height 300px
allows for arbitrary breakpoints. - Passing
max 1200px 'and' smalls
will create a combined media-query with a predefined one from$$breakpoints
. - Passing
height smalls
will replacewidth
withheight
within thesmalls
breakpoint. Similarly, usingmin smalls
would replace 'max' with 'min'.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$mq... | Can be a reference to a | List | — none |
Requires
- [variable]
rem-px-fallback
- [variable]
rem-px-fallback
- [variable]
rem-px-fallback
Used by
- [mixin]
display-classes
- [mixin]
create-overrides
- [mixin]
spacing-classes
- [mixin]
width-classes
- [mixin]
push-classes
- [mixin]
pull-classes
- [mixin]
media
- [mixin]
mq
- [mixin]
breakpoint
- [mixin]
bp
init (aliased as globalize-config
)
@mixin init() { ... }
View sourceDescription
Important: This must be called in order to use any of the tools. Pulls together config variables and routes them into structures expected by the framework, then makes them global. For instance, the $type-h1-size
variable is accepted as a list, but will be available as a single size, while making $type-h1-lh
available.
Parameters
None.
Requires
- [mixin]
_set-global-typography-variables
- [function]
_verify-color-map-depth
- [function]
baseline-calc
- [variable]
base-colors
- [variable]
base-colors
- [variable]
type-base-unit
- [variable]
base-line-height
- [variable]
base-font-size
- [variable]
type-base-unit
- [variable]
type-base-unit
- [variable]
base-font-size
- [variable]
base-font-size
- [variable]
type-base-ratio
- [variable]
type-base-unit
- [variable]
base-font-size
- [variable]
type-headings
- [variable]
_silent-class-registry
- [variable]
_all-breakpoints
- [variable]
breakpoints
- [variable]
_all-breakpoints
- [variable]
breakpoint-smallest
- [variable]
_all-breakpoints
- [variable]
_all-breakpoints
- [variable]
breakpoint-largest
- [variable]
_all-breakpoints
- [variable]
_all-breakpoints
Used by
- [mixin]
globalize-config
globalize-config (alias for init
)
@mixin globalize-config() { ... }
View sourceRefer to init.
interpolate
@mixin interpolate($property, $min-screen, $min-value, $max-screen, $max-value, $easing, $bending-points) { ... }
View sourceDescription
Generates CSS for interpolated length properties. In other words, it will generate multiple values for a property over multiple media-queries.
It has 5 required parameters, including the target property, initial screen size, initial value, final screen size and final value.
It has two optional parameters which include an easing property, which is a string representation of a CSS animation-timing-function, and finally a number of bending-points that determines how many interpolations steps are applied along the easing function.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$property | The CSS property to interpolate | String | — none |
$min-screen | A CSS length unit | Unit | — none |
$min-value | A CSS length unit | Unit | — none |
$max-screen | Value to be parsed | Unit | — none |
$max-value | Value to be parsed | Unit | — none |
$easing | Value to be parsed | String | — none |
$bending-points | Value to be parsed | Number | — none |
Requires
- [function]
calc-interpolation
- [function]
solve-cubic-bezier
- [function]
lerp
- [function]
lerp
- [function]
calc-interpolation
- [variable]
easings
Links
Author
Original: Mike Riethmuller, New: Chris Lee
functions
baseline-calc
@function baseline-calc($font-size: $base-font-size, $baseline-slack: $auto-line-height-looseness) { ... }
View sourceDescription
TL;DR: Automatically calculate the baseline of any particular font-size.
Creates unitless line-heights that align to the baseline grid with consideration to the aesthetics of a given font size. Essentially makes sure larger font-sizes have smaller line-heights, while smaller font-sizes have larger ones. Uses constraints based on upper and lower limits of pleasing line-heights, and finds where a given font-size should sit within those constraints. $baseline-slack
increases the upper constraints, allowing for taller line-heights on larger font sizes.
The rate of change from large to small line-height is mostly a logarithmic curve.
Depends on baseline()
for calculation and _baseline-curve()
to determine the deviance from the upper and lower constraints.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$font-size | font-size in need of a baseline | Number | $base-font-size |
$baseline-slack | Percentage. | Number | $auto-line-height-looseness |
Returns
Number
Requires
- [function]
strip-units
- [function]
strip-units
- [function]
cache
- [function]
cache
- [function]
cache
- [function]
baseline
- [function]
baseline
- [function]
baseline
- [function]
baseline
- [function]
baseline
- [function]
baseline
- [variable]
type-small-size
- [variable]
type-small-size
- [variable]
type-small-size
- [variable]
type-h1-size
- [variable]
type-h1-size
- [variable]
type-h1-size
- [variable]
auto-line-height-looseness
- [variable]
debug-fonts
- [variable]
base-line-height
- [variable]
base-font-size
- [variable]
base-line-height
- [variable]
base-font-size
- [variable]
debug-fonts
- [variable]
debug-fonts
Used by
- [mixin]
init
- [mixin]
font-size
- [function]
_extract-line-height
type-space
@function type-space($multipliers) { ... }
View sourceDescription
A functional version of the type-space
mixin.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$multipliers | Accepts unitless values that get converted to | List or Number | — none |
Requires
- [function]
px-to-rems
- [variable]
horizontal-space
- [variable]
horizontal-space
- [variable]
vertical-space
px-to-rems (aliased as rems
rems
)
@function px-to-rems($pixels) { ... }
View sourceDescription
Calculates rem
values. Used by px-to-rems
mixin. The $base-size
is used to calculate the value (e.g. if the body's font-size is 16px
, then the rem value of 24px
would be 1.5rem
).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$pixels | — none | Number | — none |
Used by
- [mixin]
px-to-rems
- [function]
type-space
- [function]
rems
px-to-ems (aliased as ems
)
@function px-to-ems($pixels, $context: $base-font-size) { ... }
View sourceDescription
Function for calculating em
values. The $context
is used to calculate the final value. Different from px-to-rems()
by generating a value with an em
. $context
is often necessary based on the situation.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$pixels | — none | Number | — none |
$context | — none | Number | $base-font-size |
Used by
- [function]
ems
format-class-name (aliased as _class
format-class-list
)
@function format-class-name($string, $values-map, $stringify: false) { ... }
View sourceDescription
Interpolates lists of strings to generate dynamic class names. Using a specific format (see below) and a set of placeholders provided by functions, a class name can be generated in a more flexible fashion. Will also filter out optional strings if they appear at the beginning or end of a string (such as values between two placeholders). Using lists allows for better caching and creates inherent dependencies between optional characters and their placeholders. For instance, '{%var%}{_}'
implies that the _
is dependent on {%var%}
(if {%var%}
is evaluated to be blank, then _
is also blank).
Format Syntax
{%key%}
- Variable: Expects to be replaced by a value provided by a map.{_}
- Placeholder: Optional spacing value. Will be filtered out if not surrounded by non-blank characters.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | The string to format. | String | — none |
$values-map | map with keys cooresponding to the variables in the string. | Map | — none |
$stringify | Convert the list to a string before returning? | Boolean | false |
Example
Simple example
$class-format: '.{%breakpoint%}_hidden';
format-class-list($class-format, ('breakpoint': 'small'));
// Out: '.small_hidden'
Complex example with lists and optional values left blank
$class-format: '.{%breakpoint%}{_}''{%display%}';
format-class-list(
$class-format,
('display': 'flex', 'breakpoint': '')
);
// Out: '.flex'
Requires
Used by
- [variable]
spacing-classes
- [function]
_class
- [mixin]
spacing-classes
- [mixin]
spacing-classes
- [mixin]
width-classes
- [mixin]
width-classes
- [mixin]
push-classes
- [mixin]
push-classes
- [mixin]
pull-classes
- [mixin]
pull-classes
- [function]
format-class-list
- [mixin]
_output-display-classes
- [mixin]
_output-spacing-classes
_class (alias for format-class-name
)
@function _class() { ... }
View sourceRefer to format-class-name.
colors (aliased as color
clr
)
@function colors($color-name, $tone: 'base', $opacity: 1) { ... }
View sourceDescription
Get a color value from the global $base-colors
map. Darker and lighter tones are available by passing a second string.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color-name | The color you | String | — none |
$tone | — none | String | 'base' |
$opacity | — none | Number | 1 |
Returns
Color
Example
.foo {
background-color: colors(links, light));
}
Requires
- [variable]
base-colors
- [variable]
base-colors
Used by
- [function]
color
- [mixin]
border
- [function]
clr
- [function]
generate-color-variations
See
- [variable]
base-colors
Links
color (alias for colors
)
@function color() { ... }
View sourceRefer to colors.
easing
@function easing($easing: 'ease') { ... }
View sourceDescription
Takes a string representation of an cubic-bezier easing, and returns its 4-digit list value.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$easing | Easing name | String | 'ease' |
Requires
Used by
- [function]
cubic-easing
- [function]
ease
See
- [variable]
easings
cubic-easing (aliased as c-ease
)
@function cubic-easing($easing: 'ease') { ... }
View sourceDescription
Takes a string representation of an cubic-bezier easing, and returns the corresponding cubic-bezier statement.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$easing | Easing name | String | 'ease' |
Requires
- [function]
easing
Used by
- [function]
c-ease
See
- [variable]
easings
Grid
functions
grid-size (aliased as columns
)
@function grid-size($columns, $context: $grid-columns, $total-columns: $grid-columns) { ... }
View sourceDescription
Creates a percentage based on the $size / $context
while allowing for a contextual calculations (($total/$context) * ($columns/$total)
).
For instance, if you have a grid of 12 columns and you've created an item that is 7 columns wide, its children would then be in a 7/12 context. In order to maintain the grid and calculate the width of a child that spans 4 columns, it would have to be 1 quarter of 7/12.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | Column span | Number | — none |
$context | Out of how many columns? | Number | $grid-columns |
$total-columns | — none | Number | $grid-columns |
Returns
Number
—percentage
Example
.parent {
width: grid-size(7, 12);
}
.child {
width: grid-size(4, 7, 12);
}
Requires
- [function]
columns
Used by
- [function]
columns
- [mixin]
grid-width
- [mixin]
grid-width
- [mixin]
grid-width
columns (alias for grid-size
)
@function columns() { ... }
View sourceRefer to grid-size.
mixins
grid-width (aliased as width
)
@mixin grid-width($columns, $total: $grid-columns) { ... }
View sourceDescription
Creates a width property with a percentage based on the $columns / $total
. Also includes flex-based properties if $grid-flex
is enabled.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | Column span. | Number | — none |
$total | — none | Number | $grid-columns |
Requires
- [function]
grid-size
- [function]
grid-size
- [function]
grid-size
- [variable]
grid-flex
- [variable]
grid-columns
- [variable]
grid-columns
Used by
width (alias for grid-width
)
@mixin width() { ... }
View sourceRefer to grid-width.
width-setup
@mixin width-setup($silent: $grid-silent-classes, $property: "width", $important: false, $property: "width") { ... }
View sourceDescription
Uses $_human-readable-numerators
and $_human-readable-denominators
to create percentages based on $grid-columns
. $property
accepts any property, as well as lists of properties.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$silent | Use silent classes? | Boolean | $grid-silent-classes |
$property | What property should these widths applied to? | String | "width" |
$important | Should | Boolean | false |
$property | What property should these widths applied to? | String | "width" |
Used by
- [mixin]
width-classes
- [mixin]
width-classes
- [mixin]
push-classes
- [mixin]
push-classes
- [mixin]
pull-classes
- [mixin]
pull-classes
grid-setup (aliased as grid-classes
)
@mixin grid-setup($silent: $grid-silent-classes, $gutter: $grid-gutter, $flex: $grid-flex, $inline-block: $grid-inline-block, $floats: $grid-floats, $bem: $grid-bem-naming) { ... }
View sourceDescription
Generates basic grid classes based on passed in options.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$silent | Make all classes silent? | Boolean | $grid-silent-classes |
$gutter | Gutter size between grid items. | Number | $grid-gutter |
$flex | Use flexbox? | Boolean | $grid-flex |
$inline-block | Use inline-block? | Boolean | $grid-inline-block |
$floats | Use floats? | Boolean | $grid-floats |
$bem | Use BEM naming? | Boolean | $grid-bem-naming |
Used by
- [mixin]
grid-classes
grid-row
@mixin grid-row() { ... }
View sourceDescription
Creates a grid container (row) based on your grid configuration.
Parameters
None.
Requires
- [mixin]
type-space
- [mixin]
clearfix
- [variable]
grid-inline-block
- [variable]
grid-flex
- [variable]
grid-floats
grid-item
@mixin grid-item($columns: $grid-columns, $total-columns: $grid-columns) { ... }
View sourceDescription
Creates a grid item (column) based on your grid configuration set to a width based on the $columns
passed in.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | Number of columns the item should span. | Number | $grid-columns |
$total-columns | Number of columns in total grid space. Only necessary to change if you are nesting grids within grids. | Number | $grid-columns |
Requires
- [mixin]
type-space
- [mixin]
grid-width
See
- [mixin]
grid-width
grid-init
@mixin grid-init($silent: $grid-silent-classes, $important: false) { ... }
View sourceDescription
Creates responsive grid classes by running through all the grid-setup mixins. Uses the media-queries defined in the $breakpoint-has-
variables to create media-query-scoped classes.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$silent | generate silent classes? | Boolean | $grid-silent-classes |
$important | make them | Boolean | false |
Requires
- [mixin]
grid-classes
- [mixin]
width-classes
- [mixin]
push-classes
- [mixin]
pull-classes
- [variable]
grid-inline-block
- [variable]
grid-floats
- [variable]
grid-flex
- [variable]
grid-inline-block
- [variable]
grid-push
- [variable]
grid-pull
grid-classes (alias for grid-setup
)
@mixin grid-classes() { ... }
View sourceRefer to grid-setup.
width-classes
@mixin width-classes($silent: $grid-silent-classes, $important: false) { ... }
View sourceDescription
Creates responsive width classes (using width-setup
mixin). Loops across all breakpoints in $breakpoint-has-widths
. Creates classes with width
property values (flex-basis
and max-width
for flex-based grids) based on the grid.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$silent | generate silent classes? | Boolean | $grid-silent-classes |
$important | make them | Boolean | false |
Requires
- [mixin]
width-setup
- [mixin]
media-query
- [mixin]
width-setup
- [function]
format-class-name
- [function]
format-class-name
- [variable]
grid-flex
- [variable]
breakpoint-has-widths
Used by
- [mixin]
grid-init
push-classes
@mixin push-classes($silent: $grid-silent-classes, $important: false) { ... }
View sourceDescription
Creates responsive grid-push classes. Loops across all breakpoints in breakpoints in $breakpoint-has-push
. Creates classes with left
property values based on the grid.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$silent | generate silent classes? | Boolean | $grid-silent-classes |
$important | make them | Boolean | false |
Requires
- [mixin]
width-setup
- [mixin]
media-query
- [mixin]
width-setup
- [function]
format-class-name
- [function]
format-class-name
- [variable]
breakpoint-has-push
Used by
- [mixin]
grid-init
pull-classes
@mixin pull-classes($silent: $grid-silent-classes, $important: false) { ... }
View sourceDescription
Creates responsive grid-pull classes. Loops across all breakpoints in $breakpoint-has-pull
. Creates classes with right
property values based on the grid.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$silent | generate silent classes? | Boolean | $grid-silent-classes |
$important | make them | Boolean | false |
Requires
- [mixin]
width-setup
- [mixin]
media-query
- [mixin]
width-setup
- [function]
format-class-name
- [function]
format-class-name
- [variable]
breakpoint-has-pull
Used by
- [mixin]
grid-init
Math
variables
PI
$PI: 3.1415926535897932384626433832795028841971693993751;
View sourceE
$E: 2.71828182845904523536028747135266249775724709369995;
View sourceLN2
$LN2: 0.6931471805599453;
View sourceUsed by
SQRT2
$SQRT2: 1.4142135623730951;
View sourceUsed by
- [function]
log
- [function]
_baseline-curve
PHI (alias for golden
)
$PHI: golden();
View sourceRefer to golden.
functions
pow (aliased as exponent
)
@function pow($base, $exp) { ... }
View sourceDescription
A robust exponent multiplication which allows for decimal-based exponents. This fully replaces Compass' pow() function (allows for float-based exponents).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$base | — none | Number | — none |
$exp | — none | Number | — none |
Requires
Used by
- [function]
exponent
- [function]
sqrt
- [function]
sin
- [function]
sin
- [function]
color-luminance
- [function]
modular-scale
Links
exponent (alias for pow
)
@function exponent() { ... }
View sourceRefer to pow.
log
@function log($x) { ... }
View sourceDescription
Returns the natural logarithm of a number.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$x | — none | Number | — none |
Returns
Number
Example
$value: log(2) // 0.69315
$value2: log(10) // 2.30259
Requires
- [function]
frexp
- [function]
ldexp
- [function]
_log
- [function]
_log
- [variable]
SQRT2
- [variable]
LN2
- [variable]
LN2
Used by
- [function]
pow
_log
@function _log($x) { ... }
View sourceDescription
A good aproximation for $x close to 1
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$x | — none | Number | — none |
Used by
frexp
@function frexp($x) { ... }
View sourceDescription
Returns a two-element list containing the normalized fraction and exponent of number.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$x | — none | - | — none |
Returns
List
—(fraction, exponent)
Used by
- [function]
log
ldexp
@function ldexp($x, $exp) { ... }
View sourceDescription
Returns $x * 2^$exp
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$x | — none | Number | — none |
$exp | — none | Number | — none |
Used by
- [function]
log
fact
@function fact($x) { ... }
View sourceDescription
Returns the factorial of a non-negative integer.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$x | — none | Number | — none |
Returns
Number
Example
$value: fact(0) // 1
$value2: fact(8) // 40320
Used by
- [function]
sin
gcd
@function gcd($number-1, $number-2) { ... }
View sourceDescription
Greatest Common Divisor calculation (useful for calculating grids and widths).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number-1 | — none | Number | — none |
$number-2 | — none | Number | — none |
Returns
Number
Links
sqrt (aliased as sqroot
)
@function sqrt($base, $precision: 12) { ... }
View sourceDescription
Find the square root of a value.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$base | — none | Number | — none |
$precision | — none | Number | 12 |
Requires
- [function]
pow
Used by
- [function]
golden
- [function]
_baseline-curve
- [function]
_baseline-curve
sqroot (alias for sqrt
)
@function sqroot($r) { ... }
View sourceRefer to sqrt.
sin
@function sin($angle) { ... }
View sourceDescription
Determines the Sine of an angle. Reference
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$angle | — none | Number | — none |
Returns
Number
Requires
calc-interpolation
@function calc-interpolation($min-screen, $min-value, $max-screen, $max-value, $unit: vw) { ... }
View sourceDescription
Use linear interpolation to produce a calc value for a particular screen size.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$min-screen | — none | Number | — none |
$min-value | — none | Number | — none |
$max-screen | — none | Number | — none |
$max-value | — none | Number | — none |
$unit | — none | String | vw |
Returns
String
—Css calc()
function.
Used by
- [mixin]
interpolate
- [mixin]
interpolate
Links
Author
Mike Riethmuller
solve-cubic-bezier
@function solve-cubic-bezier($p1x, $p1y, $p2x, $p2y, $x) { ... }
View sourceDescription
This is a crude Sass port webkits cubic-bezier-webkits function. Will return a "solved" cubic-bezier function for any given $x
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$p1x | — none | Number | — none |
$p1y | — none | Number | — none |
$p2x | — none | Number | — none |
$p2y | — none | Number | — none |
$x | — none | Number | — none |
Requires
- [function]
solve-bezier-x
Used by
- [mixin]
interpolate
Links
Author
Mike Riethmuller
solve-bezier-x
@function solve-bezier-x($p1x, $p1y, $p2x, $p2y, $x) { ... }
View sourceDescription
Solves a bezier's $x
for a given cubic-bezier set.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$p1x | — none | Number | — none |
$p1y | — none | Number | — none |
$p2x | — none | Number | — none |
$p2y | — none | Number | — none |
$x | — none | Number | — none |
Used by
- [function]
solve-cubic-bezier
Author
Mike Riethmuller
lerp
@function lerp($a, $b, $t) { ... }
View sourceDescription
Linear interpolation
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$a | — none | Number | — none |
$b | — none | Number | — none |
$t | — none | Number | — none |
Used by
- [mixin]
interpolate
- [mixin]
interpolate
Links
golden (aliased as PHI
)
@function golden($base: 1) { ... }
View sourceDescription
Get the golden ratio from $base
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$base | — none | Number | 1 |
Returns
Number
Requires
- [function]
sqrt
rad (aliased as angle-to-rad
)
@function rad($angle) { ... }
View sourceParameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$angle | — none | - | — none |
Used by
- [function]
sin
- [function]
angle-to-rad
angle-to-rad (alias for rad
)
@function angle-to-rad($angle) { ... }
View sourceRefer to rad.
General
variables
font-looseness (alias for auto-line-height-looseness
)
$font-looseness: $auto-line-height-looseness !default;
View sourceRefer to auto-line-height-looseness.
font-file-location (alias for web-fonts-path
)
$font-file-location: '' !default;
View sourceRefer to web-fonts-path.
scale-ratio (alias for auto-scale-type-ratio
)
$scale-ratio: 1.125 !default;
View sourceRefer to auto-scale-type-ratio.
display-class-format
$display-class-format: 'display-{%display%}' '{\\@}{%breakpoint%}' !default;
View sourceDescription
Formatting for utility display classes.
See
- [function]
format-class-name
_human-readable-numerators
$_human-readable-numerators: one, two, three, four, five, six, seven, eight,
nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, seventeen,
eighteen, nineteen, twenty;
View sourceDescription
Second words used to represent numbers in a fraction; Corresponds to grid interval names (whole, half, third, etc.).
_human-readable-denominators
$_human-readable-denominators: whole, half, third, quarter, fifth, sixth,
seventh, eighth, ninth, tenth, eleventh, twelfth, thirteenth, fourteenth,
fifteenth, sixteenth, seventeenth, eighteenth, nineteenth, twentieth,
twentyfirst, twentysecond, twentythird, twentyfourth, twentyfifth,
twentysixth, twentyseventh, twentyeigth, twentyninth;
View sourceDescription
First words used to represent numbers in a fraction; Corresponds to grid interval names (one, two, three, etc.).
_cached-values
$_cached-values: ();
View sourceDescription
Holds all cached function calls and their results.
Type
Map
Used by
type-headings
$type-headings: 6, 5, 4, 3, 2, 1 !global;
View sourceDescription
Used for defining automatic headings functions.
Type
List
or Number
Used by
- [mixin]
init
_silent-class-registry
$_silent-class-registry: () !global;
View sourceDescription
Silent class registry. Holds all auto-generated silent classes for debugging.
Used by
- [mixin]
init
- [mixin]
output-silent-classes
- [mixin]
_output-display-classes
- [function]
silents-register
- [function]
silents-register
- [function]
silents-register
- [function]
silents-register
- [function]
silents-register
- [mixin]
_output-spacing-classes
_all-breakpoints
$_all-breakpoints: map-keys($breakpoints);
View sourceDescription
All breakpoint names
Used by
breakpoint-smallest
$breakpoint-smallest: nth($_all-breakpoints, 1) !global;
View sourceDescription
Grabs the first $_all-breakpoints
name, allowing for abstraction.
Used by
- [mixin]
init
breakpoint-largest
$breakpoint-largest: nth(
$_all-breakpoints,
length($_all-breakpoints)
) !global;
View sourceDescription
Grabs the last $_all-breakpoints
name, allowing for abstraction.
Used by
- [mixin]
init
h6-fs
$h6-fs: nth($type-h6-size, 1) !global;
View sourceDescription
H6 font-size
Type
Number (pixel)
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
type-h1-lh (alias for h1-lh
)
$type-h1-lh: $h1-lh !global;
View sourceRefer to h1-lh.
type-h2-lh (alias for h2-lh
)
$type-h2-lh: $h2-lh !global;
View sourceRefer to h2-lh.
type-h3-lh (alias for h3-lh
)
$type-h3-lh: $h3-lh !global;
View sourceRefer to h3-lh.
type-h4-lh (alias for h4-lh
)
$type-h4-lh: $h4-lh !global;
View sourceRefer to h4-lh.
type-h5-lh (alias for h5-lh
)
$type-h5-lh: $h5-lh !global;
View sourceRefer to h5-lh.
type-h6-lh (alias for h6-lh
)
$type-h6-lh: $h6-lh !global;
View sourceRefer to h6-lh.
type-p-lh (alias for p-lh
)
$type-p-lh: $p-lh !global;
View sourceRefer to p-lh.
type-small-lh (alias for small-lh
)
$type-small-lh: $small-lh !global;
View sourceRefer to small-lh.
mixins
type-font-size (alias for font-size
)
@mixin type-font-size() { ... }
View sourceRefer to font-size.
fs (alias for font-size
)
@mixin fs() { ... }
View sourceRefer to font-size.
headings
@mixin headings($from: 1, $to: 6) { ... }
View sourceDescription
Style any number of headings all at once.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$from | Starting heading number | Number | 1 |
$to | Ending heading number | Number | 6 |
Example
@include headings(1, 3){color:#BADA55;}
// outputs:
h1, h2, h3 {color:#BADA55;}
space (alias for type-space
)
@mixin space() { ... }
View sourceRefer to type-space.
include-web-fonts (alias for web-fonts
)
@mixin include-web-fonts() { ... }
View sourceRefer to web-fonts.
_font-weights
@mixin _font-weights() { ... }
View sourceDescription
Formats fonts taken from $web-fonts
and creates their equivilent weight (with correct font-style) output.
Parameters
None.
Requires
- [mixin]
font-face
Used by
font-face
@mixin font-face($name, $font-files, $eot, $weight, $style) { ... }
View sourceDescription
Generates cross-browser font-face declarations when called. $name
is required, arbitrary, and what you will use in font stacks.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | — none | String | — none |
$font-files | is required using font-files('relative/location', 'format'). For best results use this order: woff, opentype/truetype, svg | List | — none |
$eot | is required by IE, and is a relative location of the eot file. | String | — none |
$weight | shows if the font is bold, defaults to normal | String | — none |
$style | defaults to normal, might be also italic | String | — none |
Used by
- [mixin]
_font-weights
rems (alias for px-to-rems
)
@mixin rems() { ... }
View sourceRefer to px-to-rems.
spacing-utilities-init (alias for spacing-classes
)
@mixin spacing-utilities-init() { ... }
View sourceRefer to spacing-classes.
_override-output
@mixin _override-output() { ... }
View sourceDescription
Used exclusively by create-overrides
to iterate through a map of classes, properties, and values to create responsive classes.
Parameters
None.
Requires
- [function]
str-replace
- [function]
str-replace
Used by
- [mixin]
create-overrides
- [mixin]
create-overrides
_output-display-classes
@mixin _output-display-classes($silent: false, $important: true, $class-list: $display-classes, $format: $display-class-format) { ... }
View sourceDescription
Generates classes with display properties defined in $class-list
. Intelligently extends duplicated display properties.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$silent | — none | Boolean | false |
$important | — none | Boolean | true |
$class-list | — none | List | $display-classes |
$format | — none | List or String | $display-class-format |
Requires
- [function]
format-class-name
- [function]
silents-register
- [variable]
debug-silent-classes
- [variable]
debug-silent-classes
- [variable]
_silent-class-registry
Used by
- [mixin]
display-classes
- [mixin]
display-classes
display-utilities-init (alias for display-classes
)
@mixin display-utilities-init() { ... }
View sourceRefer to display-classes.
output-silent-classes
@mixin output-silent-classes($console: false) { ... }
View sourceDescription
Outputs all known auto-generated silent classes as a JSON-style list.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$console | output to the console or as a comment | Boolean | false |
Requires
- [function]
map-inspect
- [variable]
_silent-class-registry
clearfix
@mixin clearfix($important) { ... }
View sourceDescription
Add clearfix to a class
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$important | make properties | Boolean | — none |
Used by
- [mixin]
grid-row
media (alias for media-query
)
@mixin media() { ... }
View sourceRefer to media-query.
mq (alias for media-query
)
@mixin mq() { ... }
View sourceRefer to media-query.
breakpoint (alias for media-query
)
@mixin breakpoint() { ... }
View sourceRefer to media-query.
bp (alias for media-query
)
@mixin bp() { ... }
View sourceRefer to media-query.
_set-global-typography-variables
@mixin _set-global-typography-variables() { ... }
View sourceDescription
Pulls typography variables apart and puts them into easier to use pieces. For instance $type-h1-size
starts as a list and becomes a single value, while adding $type-h1-lh
(line-height) to the global scope for use.
Parameters
None.
Requires
- [function]
modular-scale
- [function]
modular-scale
- [function]
modular-scale
- [function]
modular-scale
- [function]
modular-scale
- [function]
modular-scale
- [function]
modular-scale
- [function]
modular-scale
- [function]
_extract-line-height
- [function]
_extract-line-height
- [function]
_extract-line-height
- [function]
_extract-line-height
- [function]
_extract-line-height
- [function]
_extract-line-height
- [function]
_extract-line-height
- [function]
_extract-line-height
- [variable]
auto-scale-type
- [variable]
type-h1-size
- [variable]
type-h2-size
- [variable]
type-h3-size
- [variable]
type-h4-size
- [variable]
type-h5-size
- [variable]
type-h6-size
- [variable]
type-p-size
- [variable]
type-small-size
- [variable]
h1-fs
- [variable]
type-h1-size
- [variable]
h1-lh
- [variable]
type-h1-size
- [variable]
h2-fs
- [variable]
type-h2-size
- [variable]
h2-lh
- [variable]
type-h2-size
- [variable]
h3-fs
- [variable]
type-h3-size
- [variable]
h3-lh
- [variable]
type-h3-size
- [variable]
h4-fs
- [variable]
type-h4-size
- [variable]
h4-lh
- [variable]
type-h4-size
- [variable]
h5-fs
- [variable]
type-h5-size
- [variable]
h5-lh
- [variable]
type-h5-size
- [variable]
h6-fs
- [variable]
type-h6-size
- [variable]
h6-lh
- [variable]
type-h6-size
- [variable]
p-fs
- [variable]
type-p-size
- [variable]
p-lh
- [variable]
type-p-size
- [variable]
small-fs
- [variable]
type-small-size
- [variable]
small-lh
- [variable]
type-small-size
- [variable]
type-h1-lh
- [variable]
h1-lh
- [variable]
type-h1-size
- [variable]
h1-fs
- [variable]
type-h2-lh
- [variable]
h2-lh
- [variable]
type-h2-size
- [variable]
h2-fs
- [variable]
type-h3-lh
- [variable]
h3-lh
- [variable]
type-h3-size
- [variable]
h3-fs
- [variable]
type-h4-lh
- [variable]
h4-lh
- [variable]
type-h4-size
- [variable]
h4-fs
- [variable]
type-h5-lh
- [variable]
h5-lh
- [variable]
type-h5-size
- [variable]
h5-fs
- [variable]
type-h6-lh
- [variable]
h6-lh
- [variable]
type-h6-size
- [variable]
h6-fs
- [variable]
type-p-lh
- [variable]
p-lh
- [variable]
type-p-size
- [variable]
p-fs
- [variable]
type-small-lh
- [variable]
small-lh
- [variable]
type-small-size
- [variable]
small-fs
Used by
- [mixin]
init
border
@mixin border($border) { ... }
View sourceDescription
Allows creating many border properties at once. Works like the standard border shorthand style but allows varied styles on different border directions.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$border | — none | List | — none |
Example
//scss
.foo {
@include border(2px 3px solid dashed dotted blue currentColor yellow);
}
//css
.foo {
border-width: 2px 3px;
border-style: solid dashed dotted;
border-color: blue currentColor yellow;
}
Requires
- [function]
colors
specificity
@mixin specificity($specificity: 1) { ... }
View sourceDescription
Specificity increaser. Useful for increasing specificity of a selector instead of using !important
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$specificity | — none | Number | 1 |
Example
.class {
@include specificity(2) {
color: red;
}
}
//css
.class.class {
color: red;
}
opacity
@mixin opacity() { ... }
View sourceDescription
Cross-browser (including IE8-) opacity.
Parameters
None.
no-bullet
@mixin no-bullet() { ... }
View sourceDescription
Turn off the bullet for an element of a list
Parameters
None.
Used by
- [mixin]
no-bullets
no-bullets
@mixin no-bullets() { ... }
View sourceDescription
Turns off the bullets for an entire list
Parameters
None.
Requires
- [mixin]
no-bullet
functions
baseline
@function baseline($font-size, $baseline: $base-line-height, $multiple: 1, $floor: false) { ... }
View sourceDescription
Aligns a font-size to a baseline ($baseline
). Returns a unitless value relative to the font-size (equivilent to ems). An optional multiple can be used to make a variation on the given baseline (using decimals will divide the the baseline).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$font-size | Font size to calculate against. | Number | — none |
$baseline | Pixel value of the base line-height. | Number | $base-line-height |
$multiple | — none | Number | 1 |
$floor | Calculate the lowest possible number? Rarely useful. | Boolean | false |
Returns
Number
Used by
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
_baseline-curve
@function _baseline-curve($x, $accel: 1) { ... }
View sourceDescription
Calculates a where a number($x
) sits along a parabolic arc (curve). Change the curve's severity by changing its $accel
. An $accel
of 1 is a smooth arc. Uses this formula: y = (sqrt((x^1)+x) - sqrt(x^1)) / .4142135623730951
( Visual )
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$x | Find the equivilent number on the curve. | Number | — none |
$accel | Accepts any number between -2 and 2.35. A negative will invert the curve. 1 is a smooth curve. | Number | 1 |
Requires
_extract-line-height
@function _extract-line-height($type-size) { ... }
View sourceDescription
Checks if a type-size is declared as larger than 1, then either extracts the second value or calculates a line-height.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type-size | — none | List or Number | — none |
Returns
Number
—The line-height
Requires
- [function]
baseline-calc
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
modular-scale
@function modular-scale($scale, $ratio: $scale-ratio) { ... }
View sourceDescription
Generates a pixel value that is an exponent of a ratio ($ratio
defaults to $scale-ratio
value)
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$scale | — none | Number | — none |
$ratio | — none | Number or List | $scale-ratio |
Requires
- [function]
cache
- [function]
strip-units
- [function]
pow
- [variable]
scale-ratio
- [variable]
auto-scale-type-ratio
- [variable]
scale-ratio
- [variable]
base-font-size
Used by
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
- [mixin]
_set-global-typography-variables
_normalize-ratio
@function _normalize-ratio() { ... }
View sourceDescription
Convert list ratios into single values, allowing for larger values first and then normalizing those by reversing the division logic. Always returns a value with a decimal (float).
Parameters
None.
Returns
Number
rems (alias for px-to-rems
)
@function rems() { ... }
View sourceRefer to px-to-rems.
ems (alias for px-to-ems
)
@function ems() { ... }
View sourceRefer to px-to-ems.
_exp
@function _exp() { ... }
View sourceDescription
A good approximation for $x close to 0. Used with pow
.
Parameters
None.
str-split
@function str-split($string, $separator) { ... }
View sourceDescription
splits a String into a list of strings by separating the string into substrings, using a specified separator string to determine where to make each split.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | string to split. | String | — none |
$separator | string points at which each split should occur. | String | — none |
Returns
List
Used by
- [function]
_filter-placeholders
str-to-list (aliased as explode
)
@function str-to-list($string, $delimiter) { ... }
View sourceDescription
Split a string into a list of strings
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | the string to be split | String | — none |
$delimiter | the boundary string | String | — none |
Returns
List
—the result list
Used by
- [function]
explode
Links
format-class-list (alias for format-class-name
)
@function format-class-list() { ... }
View sourceRefer to format-class-name.
_is-not-blank
@function _is-not-blank($value) { ... }
View sourceDescription
Checks if a value is blank, used specifically for list-filter
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to check | String | — none |
Returns
Boolean
Used by
- [function]
_filter-placeholders
clr (alias for colors
)
@function clr() { ... }
View sourceRefer to colors.
set-text-color (alias for black-or-white
)
@function set-text-color() { ... }
View sourceRefer to black-or-white.
color-luminance (aliased as luma
)
@function color-luminance($color) { ... }
View sourceDescription
Find the relative luminance of a color. Used by color-contrast()
. Adapted from color.js
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | — none | Color | — none |
Returns
Number
—0 - 1
Requires
- [function]
pow
Used by
- [function]
luma
- [function]
color-contrast
- [function]
black-or-white
luma (alias for color-luminance
)
@function luma() { ... }
View sourceRefer to color-luminance.
color-contrast
@function color-contrast() { ... }
View sourceDescription
Find contrast between two colors. Adapted from color.js
Parameters
None.
Returns
Number
—0 - 1
Requires
- [function]
color-luminance
Used by
- [function]
pick-best-color
- [function]
pick-best-color
- [function]
pick-best-color
generate-color-variations
@function generate-color-variations($map: $colors, $functions: (tint, tint, tint, shade, shade, shade), $increments: (20%, 40%, 80%, 20%, 40%, 80%), $variations: (light, lighter, lightest, dark, darker, darkest), $blending-colors: null) { ... }
View sourceDescription
Takes base color values and generates a full color palette. Used by the $$base-colors
map to create a project's palette, accessible via colors()
.
Arguments:
$map
: Color map you want to create variations of. Defaults to$$base-colors
.$functions
: color functions used to generate variations (e.g. lighten or darken). Can use anyblend
function, provided$blending-colors
are provided.$increments
: percentage amount to apply$function
to each$variations
.$variations
: actual names for each color tone whencolors()
used.$blending-colors
: used when a function is ablend
. Can be a list or a single color.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | $colors |
$functions | — none | List or Strings | (tint, tint, tint, shade, shade, shade) |
$increments | — none | List or Numbers | (20%, 40%, 80%, 20%, 40%, 80%) |
$variations | — none | List or Strings | (light, lighter, lightest, dark, darker, darkest) |
$blending-colors | — none | List or Colors | null |
Requires
- [function]
colors
- [function]
color
- [function]
map-add-depth
- [function]
safe-get-function
- [function]
_combine-color-maps
Used by
- [function]
_verify-color-map-depth
_combine-color-maps
@function _combine-color-maps() { ... }
View sourceDescription
Combines two color maps (or really any double-nested map)
Parameters
None.
Used by
- [function]
generate-color-variations
_verify-color-map-depth
@function _verify-color-map-depth($color-map) { ... }
View sourceDescription
Makes sure color map contains the necessary depth to be used by colors
function
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color-map | — none | Map | — none |
Requires
- [function]
map-depth
- [function]
generate-color-variations
Used by
- [mixin]
init
ease (aliased as ease
) (alias for ease
)
@function ease() { ... }
View sourceRefer to ease.
c-ease (alias for cubic-easing
)
@function c-ease() { ... }
View sourceRefer to cubic-easing.
Sass Utilities
mixins
_output-spacing-classes
@mixin _output-spacing-classes($config) { ... }
View sourceDescription
Generates responsive spacing and padding classes.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$config | same values as $spacing-classes | Map | — none |
Requires
- [mixin]
type-space
- [function]
format-class-name
- [function]
silents-register
- [variable]
debug-silent-classes
- [variable]
debug-silent-classes
- [variable]
_silent-class-registry
Used by
- [mixin]
spacing-classes
- [mixin]
spacing-classes
See
- [variable]
spacing-classes
functions
percentage-to-decimal
@function percentage-to-decimal($percentage) { ... }
View sourceDescription
Changes percent value to decimal.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$percentage | — none | Number | — none |
px-to-vw
@function px-to-vw($pixels) { ... }
View sourceDescription
Converts pixel dimensions to viewport width (vw) dimensions.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$pixels | — none | Number | — none |
Returns
Number
Requires
- [variable]
max-site-width
safe-get-function
@function safe-get-function($name) { ... }
View sourceDescription
Wrapper for Sass' internal get-function
that allows for compatibility across Sass versions. If version is higher than 3.5, then the function is returned, otherwise, just the name.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | function name | String | — none |
Used by
- [function]
generate-color-variations
- [function]
harmonize-colors
- [function]
harmonize-colors
- [function]
safe-call
- [function]
cache
Links
safe-call
@function safe-call($name, $args...) { ... }
View sourceDescription
Wrapper for Sass' internal call
that allows for compatibility across Sass versions. If version is higher than 3.5, then the function is returned, otherwise, just the name.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | function name | String | — none |
$args... | function arguments | Any | — none |
Requires
- [function]
safe-get-function
cache
@function cache($function-name, $args...) { ... }
View sourceDescription
Memoize (cache) a function's return values and arguments. Speeds up processing on intensive functions that get called many times (with the same arguments). NOTE: This can actually increase processing time if used too often or on simple functions as the lookup process isn't free. Every cached value is unique.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$function-name | — none | String | — none |
$args... | Arguments to be passed to the function | Any | — none |
Requires
- [function]
safe-get-function
- [variable]
_cached-values
- [variable]
_cached-values
- [variable]
_cached-values
Used by
- [function]
format-class-name
- [function]
format-class-name
- [mixin]
font-size
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
pow
- [function]
modular-scale
- [function]
_baseline-curve
strip-units
@function strip-units($value) { ... }
View sourceDescription
Remove lengths (px
, em
, rem
, etc.) from a value. Usually a variable. This is sometimes required because Sass cannot calculate incompatible units (px * rem
for instance).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | — none | Length | — none |
Used by
- [function]
baseline-calc
- [function]
baseline-calc
- [function]
modular-scale
list-to-str
@function list-to-str($list, $separator: ',') { ... }
View sourceDescription
Converts a list to a string with an optional separator.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$list | — none | List | — none |
$separator | — none | String | ',' |
Returns
String
Requires
- [function]
str-append
- [function]
str-append
Used by
- [function]
str-join
str-to-number
@function str-to-number($value) { ... }
View sourceDescription
Casts a string into a number.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Value to be parsed | String or Number | — none |
Returns
Number
Requires
- [function]
to-length
Author
Hugo Giraudel
to-length
@function to-length($value, $unit) { ... }
View sourceDescription
Add $unit
to $value
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Value to add unit to | Number | — none |
$unit | String representation of the unit | String | — none |
Returns
Number
—$value
expressed in $unit
Used by
- [function]
str-to-number
Author
Hugo Giraudel
to-list
@function to-list($value, $keep) { ... }
View sourceDescription
Convert a value to a list. $keep
accepts 'keys'
, 'values'
, or 'both'
for map conversion.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | — none | Any | — none |
$keep | accepts | String | — none |
contains
@function contains($data, $value) { ... }
View sourceDescription
Generic contains
function(similar to javascript's indexOf
). Parses a variable($data
) for a $value
. Returns boolean. Delegates methods to the appropriate function based on variable type.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$data | the data you're searching through. | Map or List or String | — none |
$value | the value you're searching for. | Any | — none |
Requires
- [function]
map-has-keys
- [function]
list-contains
- [function]
str-contains
str-join
@function str-join($list, $separator: ",") { ... }
View sourceDescription
Converts a map or list to a string (('this', 'and', 'this')
becomes 'this,and,this'
).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$list | — none | List or Map | — none |
$separator | — none | String | "," |
Requires
- [function]
list-to-str
str-contains
@function str-contains($string, $value, $pos: 0) { ... }
View sourceDescription
Checks if a $string
contains a $value
. Optionally accepts a start ($pos
) positon.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | — none | String | — none |
$value | — none | String | — none |
$pos | — none | Number | 0 |
Used by
- [mixin]
type-space
- [mixin]
type-space
- [mixin]
type-space
- [function]
harmonize-colors
- [function]
contains
str-append
@function str-append($string, $insert) { ... }
View sourceDescription
Adds one string to another (e.g. str-append('hello', 'world')
becomes hello world
).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | — none | String | — none |
$insert | — none | String | — none |
Used by
- [function]
list-to-str
- [function]
list-to-str
str-replace
@function str-replace() { ... }
View sourceDescription
Replaces a value in a string with another.
Parameters
None.
Used by
- [mixin]
_override-output
- [mixin]
_override-output
- [function]
_filter-placeholders
- [function]
_filter-placeholders
- [function]
_filter-placeholders
- [function]
_filter-placeholders
- [function]
_interpolate-placeholders
explode (alias for str-to-list
)
@function explode() { ... }
View sourceRefer to str-to-list.
list-contains
@function list-contains($list, $value) { ... }
View sourceDescription
Check if a list contains a value
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$list | — none | List | — none |
$value | — none | - | — none |
Used by
- [function]
contains
list-reverse
@function list-reverse($list, $recursive: false) { ... }
View sourceDescription
Reverse a List
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$list | — none | - | — none |
$recursive | — none | - | false |
list-print
@function list-print($list, $depth: 1) { ... }
View sourceDescription
List print
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$list | — none | - | — none |
$depth | — none | - | 1 |
Used by
- [function]
map-inspect
- [function]
map-inspect
map-deep-set
@function map-deep-set($map, $keys...) { ... }
View sourceDescription
Add to a deeply nested map key. Accepts any number of keys, but the final value is the new key.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | — none |
$keys... | final argument is considered the value to the be set. | String | — none |
Used by
- [function]
silents-register
map-depth
@function map-depth($map) { ... }
View sourceDescription
Finds a map's depth at its deepest point. Useful for debugging maps.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | — none |
Returns
Number
Used by
- [function]
_verify-color-map-depth
map-has-keys (aliased as map-contains-keys
)
@function map-has-keys($map, $keys...) { ... }
View sourceDescription
Determine whether a map contains certain keys.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | — none |
$keys... | — none | String or List | — none |
Returns
Boolean
Used by
- [function]
contains
- [function]
map-contains-keys
map-contains-keys (alias for map-has-keys
)
@function map-contains-keys() { ... }
View sourceRefer to map-has-keys.
map-has-nested-keys (aliased as map-contains-nested-keys
)
@function map-has-nested-keys($map, $keys...) { ... }
View sourceDescription
Check for deep map keys
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | — none |
$keys... | — none | String or List | — none |
Used by
- [function]
map-contains-nested-keys
map-contains-nested-keys (alias for map-has-nested-keys
)
@function map-contains-nested-keys() { ... }
View sourceRefer to map-has-nested-keys.
map-get-nested
@function map-get-nested($map, $keys...) { ... }
View sourceDescription
Get map value at nested or 'deep' key, per $keys list
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | — none |
$keys... | — none | String or List | — none |
map-extend
@function map-extend($map, $maps...) { ... }
View sourceDescription
Merges multiple maps. Similar to jQuery's extend
. Takes two maps and merges their differences.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | — none |
$maps... | final value can be | Map or List | — none |
Used by
- [mixin]
display-classes
map-add-depth
@function map-add-depth($map, $new-key: 'base') { ... }
View sourceDescription
Adds one level to a map using the new key to a map. Used by generate_color_varations()
. (e.g. (key: value, key: value)
becomes (key:(new-key: value), key:(new-key: value))
)
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | — none | Map | — none |
$new-key | — none | String | 'base' |
Used by
- [function]
generate-color-variations
- [function]
harmonize-colors
map-inspect (aliased as map-print
)
@function map-inspect($map) { ... }
View sourceDescription
Print maps into a string
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | Useful for debugging maps. | Map | — none |
Requires
- [function]
list-print
- [function]
list-print
Used by
- [mixin]
output-silent-classes
- [function]
map-print
Links
map-print (alias for map-inspect
)
@function map-print() { ... }
View sourceRefer to map-inspect.
silents-register
@function silents-register() { ... }
View sourceDescription
Add to silent classes registry
Parameters
None.
Requires
- [function]
map-deep-set
- [variable]
debug-silent-classes
- [variable]
_silent-class-registry
- [variable]
_silent-class-registry
- [variable]
_silent-class-registry
- [variable]
_silent-class-registry
- [variable]
_silent-class-registry
Used by
- [mixin]
_output-display-classes
- [mixin]
_output-spacing-classes
_filter-placeholders
@function _filter-placeholders($string, $reverse: false) { ... }
View sourceDescription
Determines if a placeholder ({_}
) value in a format is needed based on characters in its surrounding. If two placeholders are next to eachother, both will be deleted. If a placeholder is surrounded by blank values, it will also be deleted. Note that this returns a list, and not a fully formatted string. This allows the return value to be recursed without incuring the performance penalty of re-casting the string to a list.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | String to be parsed and filtered. | String | — none |
$reverse | Whether to parse the values from right to left or left to right. Reverse typically provides more accurate results. | Boolean | false |
Example
$foo: _filter-placeholders('{-}{%var%}{_}{_}')
@debug inspect($foo) // ">-""{%var%}"
Requires
- [function]
str-replace
- [function]
str-replace
- [function]
str-replace
- [function]
str-replace
- [function]
str-split
- [function]
_is-not-blank
Used by
- [function]
_interpolate-placeholders
_interpolate-placeholders
@function _interpolate-placeholders($string) { ... }
View sourceDescription
Container funtion for _filter-placeholders
. Takes a string and gives back a string (and not a list).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | string to be interpolated | String | — none |
Returns
String
Requires
- [function]
_fast-str
- [function]
_filter-placeholders
- [function]
_fast-str
- [function]
str-replace
See
- [function]
_filter-placeholders
_fast-str
@function _fast-str($list) { ... }
View sourceDescription
A faster list-to-string function. Should only be used in cases where speed is very important. Does very little error protection.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$list | list to be converted | List | — none |
Used by
- [function]
format-class-name
- [function]
_interpolate-placeholders
- [function]
_interpolate-placeholders
black-or-white (aliased as set-text-color
)
@function black-or-white($color) { ... }
View sourceDescription
Change text color based on background-color's darkness.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | — none | Color | — none |
Returns
Color
Example
div {
background-color: #f8cd12;
color: black-or-white(#f8cd12);
}
// Your text color would be black because #f8cd12 and #00000 have more contrast.
Requires
- [function]
color-luminance
Used by
- [function]
set-text-color
pick-best-color
@function pick-best-color($base, $colors, $tolerance: 0) { ... }
View sourceDescription
Compares a set of colors against $base
and returns the color with the most contrast. $colors
should be a list. Taken from here
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$base | — none | Color | — none |
$colors | — none | List | — none |
$tolerance | — none | Number | 0 |
Returns
Color
Example
div {
color: pick_best_color(#f8cd12, (#a0a0c0, #fff, #2c2c2c));
}
// The function would test the colors and find that #2c2c2c is the best.
Requires
- [function]
color-contrast
- [function]
color-contrast
- [function]
color-contrast
harmonize-colors
@function harmonize-colors($color-list, $blending-mode: 'overlay', $blending-color: blue, $amount: 0%) { ... }
View sourceDescription
Takes all colors in a map and blends them with a secondary color to even them out.
- Should only be used as a tool to create color palletes.
- Shouldn't be used on every compilation since it can make development fairly abstract and difficult to understand.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color-list | — none | Map | — none |
$blending-mode | blending mode to use over each color | String | 'overlay' |
$blending-color | color to blend with. | Color | blue |
$amount | amount to blend. | Percent | 0% |
Requires
- [function]
str-contains
- [function]
map-add-depth
- [function]
safe-get-function
- [function]
safe-get-function
variables
easings
$easings: (
'linear': (
0,
0,
1,
1,
),
'ease': (
0.25,
0.1,
0.25,
1,
),
'ease-in': (
0.42,
0,
1,
1,
),
'ease-out': (
0,
0,
0.58,
1,
),
'ease-in-out': (
0.42,
0,
0.58,
1,
),
'ease-in-sine': (
0.47,
0,
0.745,
0.715,
),
'ease-out-sine': (
0.39,
0.575,
0.565,
1,
),
'ease-in-out-sine': (
0.445,
0.05,
0.55,
0.9,
),
'ease-in-quad': (
0.55,
0.085,
0.68,
0.53,
),
'ease-out-quad': (
0.25,
0.46,
0.45,
0.94,
),
'ease-in-out-quad': (
0.455,
0.03,
0.515,
0.955,
),
'ease-in-cubic': (
0.55,
0.055,
0.675,
0.19,
),
'ease-out-cubic': (
0.215,
0.61,
0.355,
1,
),
'ease-in-out-cubic': (
0.645,
0.045,
0.355,
1,
),
'ease-in-quart': (
0.895,
0.03,
0.685,
0.22,
),
'ease-out-quart': (
0.165,
0.84,
0.44,
1,
),
'ease-in-out-quart': (
0.77,
0,
0.175,
1,
),
'ease-in-quint': (
0.755,
0.05,
0.855,
0.06,
),
'ease-out-quint': (
0.23,
1,
0.32,
1,
),
'ease-in-out-quint': (
0.86,
0,
0.07,
1,
),
'ease-in-expo': (
0.95,
0.05,
0.795,
0.035,
),
'ease-out-expo': (
0.19,
1,
0.22,
1,
),
'ease-in-out-expo': (
1,
0,
0,
1,
),
'ease-in-circ': (
0.6,
0.04,
0.98,
0.335,
),
'ease-out-circ': (
0.075,
0.82,
0.165,
1,
),
'ease-in-out-circ': (
0.785,
0.135,
0.15,
0.86,
),
'ease-in-back': (
0.6,
-0.28,
0.735,
0.045,
),
'ease-out-back': (
0.175,
0.885,
0.32,
1.275,
),
'ease-in-out-back': (
0.68,
-0.55,
0.265,
1.55,
),
'authentic-motion': (
0.4,
0,
0.2,
1,
),
);
View sourceDescription
Map of cubic-bezier values representing named easing values (eg. ease-in
, ease-out-quart
). Can be "easily" accessed with easing
.
Used by
- [function]
easing
- [function]
easing
- [function]
easing
- [mixin]
interpolate
See
- [function]
easing