Setup
mixins
base
@mixin base() { ... }
Description
Sets sizing and sets up :root css variables.
Parameters
None.
Example
@include base;
Requires
- [mixin]
css-vars
- [function]
ff
- [variable]
_palette-default
css-vars
@mixin css-vars($palette: null) { ... }
Description
Outputs css variables from a color palette.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$palette | A palette of colors. | Map | null |
Example
:root {
@include css-vars($_palette-default);
}
// output
:root {
--color-black: 0, 0, 0;
--color-white: 255, 255, 255;
--color-blue-50: 236, 241, 252;
ect...
}
Requires
- [function]
rgba-map
Used by
- [mixin]
base
settings
@mixin settings($values: null) { ... }
Description
Overwrites default variabls.
Available Settings
animation-time
border-radius
color
font-sizes
font-weights
media-queries
mods
namespace
opacity
setup
space
transitions
z-index
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$values | A list of values. | Array | null |
Example
@include settings(
"animation-time" (
"slow": 5s
)
);
Requires
- [variable]
_contexts
- [variable]
_default-animation-time
- [variable]
_default-border-radius
- [variable]
_default-media-queries
- [variable]
_default-opacity
- [variable]
_default-space
- [variable]
_default-transitions
- [variable]
_default-z-index
- [variable]
_font-sizes
- [variable]
_font-family
- [variable]
_mods
- [variable]
_namespace-component
- [variable]
_palette-default
- [variable]
_setup-prefixes
- [variable]
_setup
variables
_settings
$_settings: () !global;
Description
Variable map for the base settings.
Builder
mixins
child
@mixin child($selectors: ()) { ... }
Description
Outputs correct child elements.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$selectors | Input a list of selectors. | Map | () |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include component("alert") {
@include child("container") {
}
}
// output
.sample-alert-container
Requires
component
@mixin component($component: null, $options: null) { ... }
Description
This is the root component that can output standard selectors and host selectors.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$component | The name of the component. | String | null |
$options | A list of options. | List | null |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include component("alert") { }
@include component("alert", "host" true) { }
// output
.sample-alert,
:host(sample-host) { }
Requires
- [function]
class
- [function]
get-setup
- [function]
update
- [mixin]
component-setup
context
@mixin context($selectors: (), $modifiers: null) { ... }
Description
Create consistent context selectors
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$selectors | Input a list of selectors. | Map | () |
$modifiers | Searches modifiers | List | null |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include context(class("alert"), is "focus") {
property: value;
}
// output
.sample-alert.is-focus .child-element
Requires
- [variable]
_contexts
- [variable]
_contexts
- [variable]
_setup-prefixes
- [variable]
_pseudo-selector
- [variable]
_contexts
- [function]
has-selector
- [function]
get-setup
- [function]
strip-selector
- [mixin]
toggle
- [variable]
_namespace-mod
host-modifier
@mixin host-modifier($component: null, $modifier: null) { ... }
Description
Modifier for a host element.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$component | Input a component name. | String | null |
$modifier | Input the modifier name. | String | null |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include host-modifier("alert", "success") {
}
// output
:host(sample-alert.mod-success)
Requires
- [function]
class
- [function]
get-setup
- [variable]
_namespace-mod
has
@mixin has($modifier: null) { ... }
Description
Outputs the has
modifier.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$modifier | Input a modifier name. | String | null |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include has("form") {
}
// output
.has-form
Requires
- [function]
get-setup
- [mixin]
toggle
- [variable]
_namespace-mod
is
@mixin is($modifier: null, $option: "") { ... }
Description
Outputs the is
modifier.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$modifier | Input a modifier name. | String | null |
$option | If the pseudo selector has an option. | List | "" |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include is("focus") {
}
// output
:focus,
.is-focus
Requires
- [function]
get-setup
- [mixin]
toggle
- [variable]
_namespace-mod
- [variable]
_pseudo-selector
- [variable]
_pseudo-selector-option
mod
@mixin mod($modifier: null, $option: null) { ... }
Description
Outputs the mod
modifier with a verbose option.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$modifier | Input a modifier name. | String | null |
$option | Options for a verbose modifier. | List | null |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include component("alert") {
@include mod("highlight") {
}
@include mod("highlight", "verbose" true) {
}
}
// output
.sample-alert.-highlight
.sample-alert.sample-alert_highlight
Requires
- [function]
update
- [function]
get-setup
- [mixin]
toggle
- [variable]
_mods
- [variable]
_namespace-mod
nested
@mixin nested($selectors: ()) { ... }
Description
Outputs correct nested elements when using inside of a host mixin.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$selectors | Input a list of selectors. | Map | () |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include component("popover") {
@include nested("button") {
}
}
// output
.sample-popover .sample-button
Requires
- [function]
has-selector
- [function]
get-setup
- [mixin]
toggle
Color
functions
dynamic-palette
@function dynamic-palette($color, $color) { ... }
Description
Create a list of colors from the base color then turn into a map with explicit keys
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | — none | Color | — none |
$color | — none | String | — none |
Requires
- [function]
create-palette
Links
create-palette
@function create-palette($color) { ... }
Description
Create a palette from a base color
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | — none | Color | — none |
Requires
- [function]
apply-diff
- [function]
color-diff
Used by
- [function]
dynamic-palette
Links
color-diff
@function color-diff($a, $b) { ... }
Description
Defining the difference between 2 colors
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$a | Color value | String | — none |
$b | Color value | String | — none |
Used by
- [function]
create-palette
Links
apply-diff
@function apply-diff($color, $diff) { ... }
Description
Apply differences returned from 'color-diff' function to a color in order to retrieve the second color
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | — none | Color | — none |
$diff | — none | Number | — none |
Used by
- [function]
create-palette
Links
color
@function color($values: null, $opacity: 1, $palette: $_palette-default, $css-variable: true) { ... }
Description
Color function that calls to the $_palette-default
map by default.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$values | Choose a color from a color palette or enter test case for WCAG. | List | null |
$opacity | Change the opacity of the color. | Number | 1 |
$palette | Change which palette the color call is to. | Map | $_palette-default |
$css-variable | Choose if it's a css variable or rgba value. | Boolean | true |
Example
background: color("green-50");
color: color("gray-600", 0.8);
// output
background: rgba(var(--color-green-50), 1);
color: rgba(var(--color-gray-600), 0.8);
Requires
- [function]
get-setup
- [function]
wcag
- [variable]
_palette-default
Used by
- [function]
b
- [mixin]
util-colors-background
- [mixin]
util-colors-border
shadow
@function shadow($color: null, $opacity: 1, $palette: $_palette-default) { ... }
Description
Shadow function that calls to the $_palette-default
map by default.
This is a Safari box-shadow
fix. Safari currently does not support css variables being used for the box-shadow
property.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Choose a color from a color palette. | String | null |
$opacity | Change the opacity of the color. | Number | 1 |
$palette | Change which palette the color call is to. | Map | $_palette-default |
Example
box-shadow: shadow("charcoal-500");
// output
box-shadow: rgba(41, 62, 64, 1);
Requires
- [variable]
_palette-default
[private] rgba-map
@function rgba-map($palette: null) { ... }
Description
Gets the rgba values from a hex value in a map of colors.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$palette | A palette of colors. | Map | null |
Example
$colors-rgba: rgba-map($palette);
Used by
- [mixin]
css-vars
variables
_palette-core
$_palette-core: (
"black": #000000,
"white": #FFFFFF
);
Description
Variable map for the core color palette.
_palette-blue
$_palette-blue: (
"blue-50": #ECF1FC,
"blue-100": #C4D3F2,
"blue-200": #9CB5E8,
"blue-300": #7497DE,
"blue-400": #4C79D4,
"blue-500": #386ACF,
"blue-600": #193366,
"blue-700": #203F7B,
"blue-800": #254990,
"blue-900": #2B54A5
);
Description
Variable map for the blue color palette.
_palette-charcoal
$_palette-charcoal: (
"charcoal-50": #E6E9EB,
"charcoal-100": #D1D6D8,
"charcoal-200": #A7B0B2,
"charcoal-300": #7D8A8C,
"charcoal-400": #536466,
"charcoal-500": #293E40,
"charcoal-600": #213234,
"charcoal-700": #192628,
"charcoal-800": #111A1C,
"charcoal-900": #090E10
);
Description
Variable map for the charcoal color palette.
_palette-green
$_palette-green: (
"green-50": #EAFDF4,
"green-100": #B7EED8,
"green-200": #87E0BE,
"green-300": #57D2A4,
"green-400": #27C48A,
"green-500": #0FBD7D,
"green-600": #0C9763,
"green-700": #0A8456,
"green-800": #087149,
"green-900": #064B2E
);
Description
Variable map for the green color palette.
_palette-gray
$_palette-gray: (
"gray-50": #FAFAFA,
"gray-100": #F1F1F1,
"gray-200": #CBCBCB,
"gray-300": #B1B1B1,
"gray-400": #979797,
"gray-500": #7D7D7D,
"gray-600": #666666,
"gray-700": #4A4A4A,
"gray-800": #2E2E2E,
"gray-900": #151515
);
Description
Variable map for the gray color palette.
_palette-orange
$_palette-orange: (
"orange-50": #FDE5D1,
"orange-100": #FAD7B8,
"orange-200": #F4BB86,
"orange-300": #EE9F54,
"orange-400": #E88323,
"orange-500": #E57509,
"orange-600": #B75D08,
"orange-700": #A05108,
"orange-800": #894509,
"orange-900": #723906
);
Description
Variable map for the orange color palette.
_palette-purple
$_palette-purple: (
"purple-50": #F5E9FF,
"purple-100": #D9C3F8,
"purple-200": #BD9DF0,
"purple-300": #A177E8,
"purple-400": #8551E0,
"purple-500": #773EDC,
"purple-600": #5F32B0,
"purple-700": #532C9A,
"purple-800": #472684,
"purple-900": #3B206E
);
Description
Variable map for the purple color palette.
_palette-red
$_palette-red: (
"red-50": #FFECF0,
"red-100": #FCD4DC,
"red-200": #F4A4B4,
"red-300": #EC758C,
"red-400": #E44464,
"red-500": #DC143C,
"red-600": #B01030,
"red-700": #9A0E2A,
"red-800": #840C24,
"red-900": #6E0A1E
);
Description
Variable map for the red color palette.
_palette-yellow
$_palette-yellow: (
"yellow-50": #FFF8F2,
"yellow-100": #FBEACE,
"yellow-200": #F7DCAA,
"yellow-300": #FDCA6A,
"yellow-400": #F1C774,
"yellow-500": #EDB950,
"yellow-600": #BD9340,
"yellow-700": #A58038,
"yellow-800": #8D6D2F,
"yellow-900": #755928
);
Description
Variable map for the yellow color palette.
_palette-intent
$_palette-intent: (
"negative": #DC143C,
"neutral": #386ACF,
"positive": #0FBD7D,
"warning": #E57509,
"primary": #59B5A0,
"default-text": #4A4A4A
);
Description
Variable map for the intent color palette.
_palette-default
$_palette-default: map-collect(
$_palette-core,
$_palette-blue,
$_palette-charcoal,
$_palette-green,
$_palette-gray,
$_palette-orange,
$_palette-purple,
$_palette-red,
$_palette-yellow,
$_palette-intent
) !global;
Description
Variable map for the default color palette.
Used by
- [mixin]
base
- [mixin]
settings
- [function]
color
- [function]
shadow
- [function]
review-hex
_palette-util
$_palette-util: map-collect(
$_palette-core,
$_palette-intent
) !global;
Description
Variable map for the util color palette.
Used by
- [mixin]
util-colors-background
- [mixin]
util-colors-border
- [mixin]
util-colors-border
Helpers
functions
br
@function br($radius: null) { ... }
Description
Border radius function that calls to the $_default-border-radius
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$radius | Choose the size of the border radius. | String | null |
Example
border-radius: br("sm");
// output
border-radius: 2px;
Requires
- [variable]
_default-border-radius
b
@function b($color: null, $size: 1px, $palette: $_palette-default) { ... }
Description
Border function to choose a color and size for your border.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Choose a border color from the color palette or a custom color. | String | null |
$size | Choose the border thickness. | Number | 1px |
$palette | Change which palette the color call is to. | Map | $_palette-default |
Example
border: b("green-500");
border-top: b(#666666, 5px);
// output
border: rgba(var(--color-green-500), 1) 1px solid;
border-top: #666666 5px solid;
Requires
- [function]
color
Used by
- [mixin]
util-colors-border
box
@function box($values: null) { ... }
Description
The box function mimics the normal css shorthand for writting padding and margin but can be used to call the the spacing sizes from the $_default-space
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$values | Choose space values. | List | null |
Example
margin: box("sm" "md" to-rm(1px));
// output
margin: 0.5rem 0.75rem 0.06rem;
Requires
- [function]
space
- [variable]
_default-space
class
@function class($selector: null) { ... }
Description
Call to a predefined list of class names in the $_namespace-component
map but can also handle a custom name.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$selector | Choose a selector name. | String | null |
Example
#{class("button")} { }
// output
.sample-btn { }
Throws
A selector needs to be passed in.
Requires
- [variable]
_namespace-component
Used by
- [mixin]
component
- [mixin]
host-modifier
- [mixin]
component-setup
- [mixin]
util-colors-background
- [mixin]
util-colors-border
- [mixin]
util-colors-border
- [mixin]
util-display
- [mixin]
util-flex
- [mixin]
util-float
- [mixin]
util-font
- [mixin]
util-position
- [mixin]
util-screenreader
- [mixin]
util-sizing
- [mixin]
util-spacing
- [mixin]
util-static
- [mixin]
util-text-align
- [mixin]
util-visibility
- [mixin]
util-z-index
f
@function f($size: null, $family: default) { ... }
Description
Font function that selects font sizes from $_font-sizes
and the font family from $_font-family
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | Choose a font size. | String | null |
$family | Choose a font family. | String | default |
Example
font: f("md");
font: f("md", "semibold");
// output
font: 1rem "SourceSansPro", "Helvetica Neue", "Helvetica", Arial, sans-serif;
font: 1rem "SourceSansProSemibold", "Helvetica Neue", "Helvetica", Arial, sans-serif;
Requires
- [variable]
_font-sizes
- [variable]
_font-family
fs
@function fs($size: null) { ... }
Description
Font size function that selects font sizes from $_font-sizes
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | Choose a font size. | String | null |
Example
font-size: fs("md");
// output
font-size: 1rem;
Requires
- [variable]
_font-sizes
Used by
- [mixin]
util-font
ff
@function ff($family: default) { ... }
Description
Font family function that selects the font family from $_font-family
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$family | Choose a font family. | String | default |
Example
font-family: ff("semibold");
// output
font-family: "SourceSansProSemibold", "Helvetica Neue", "Helvetica", Arial, sans-serif;
Requires
- [variable]
_font-family
Used by
m
@function m($margin: null) { ... }
Description
If you want a shorter space function call.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$margin | Choose a margin value. | String | null |
Example
margin: m("sm");
// output
margin: 0.5rem;
Requires
- [function]
space
- [variable]
_default-space
o
@function o($lightness: null) { ... }
Description
Opacity function that calls to the $_default-opacity
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$lightness | Choose an opacity setting. | String | null |
Example
opacity: o("lighter");
// output
opacity: 0.5;
Requires
- [variable]
_default-opacity
p
@function p($padding: null) { ... }
Description
If you want a shorter space function call.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$padding | Choose a padding value. | String | null |
Example
padding: p("sm");
// output
padding: 0.5rem;
Requires
- [function]
space
- [variable]
_default-space
space
@function space($value: null, $options: null) { ... }
Description
Spacing function that calls to the $_default-space
map.
This is primarily used for margin and padding but can be used for a variety of css properties.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Choose a space value. | String | null |
$options | Options to modify the functions output. | List | null |
Example
padding: space("sm");
// output
padding: 0.5rem;
Requires
- [function]
update
- [variable]
_default-space
Used by
- [function]
box
- [function]
m
- [function]
p
- [mixin]
util-spacing
time
@function time($time: null) { ... }
Description
Time function that calls to the $_default-animation-time
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$time | Choose the speed. | String | null |
Example
transition-duration: time("fast");
// output
transition-duration: 0.1s;
Requires
- [variable]
_default-animation-time
Used by
- [function]
t
to-rem
@function to-rem($value: null, $base: 16px) { ... }
Description
The basic width and height output.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Value to set to rem. | Number | null |
$base | Base size for the browser. | Number | 16px |
Example
font: to-rem(16px);
// output
font: 1rem;
Requires
- [function]
strip-unit
t
@function t($props: null, $transition: null, $time: time("base")) { ... }
Description
Transition function that calls to the $_default-transitions
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$props | The properties that need a transition applied. | String | null |
$transition | The transition being applied. | String | null |
$time | The time being applied. | String | time("base") |
Example
t: transition(opacity, "link");
t: transition(opacity, "shift", "slow");
// output
transition: opacity 0.3s cubic-bezier(0.075, 0.820, 0.165, 1.000);
transition: opacity 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);
Requires
- [function]
time
- [variable]
_default-animation-time
- [variable]
_default-transitions
z
@function z($layer: null) { ... }
Description
Z-index function that calls to the $_default-z-index
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$layer | Choose a z-index. | String | null |
Example
z: z-index("dropdown");
// output
z-index: 1000;
Requires
- [variable]
_default-z-index
mixins
ellipsis
@mixin ellipsis($args: null) { ... }
Description
Outputs the basic ellipsis with a few options.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$args | Can handle three arguments: | List | null |
Example
@include ellipsis;
@include ellipsis(width 100%);
focus-outline
@mixin focus-outline($outline: none) { ... }
Description
Resets the focus state of an element.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$outline | Resets the outline by default. | String | none |
Example
@include focus-outline;
placeholder
@mixin placeholder($color: #92201A) { ... }
Description
Outputs input and textarea placeholder properties.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Input a color value. | String | #92201A |
Example
@include placeholder(color("black"));
media
@mixin media($name: null) { ... }
Description
Placeholder for media queries using the $_default-media-queries
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | Choose a media size. | String | null |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include media("for-phone-only") {
}
Requires
- [variable]
_default-media-queries
position
@mixin position($position: null, $args: null) { ... }
Description
Shorthand positioning for the position
property.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$position | Choose a position value. | String | null |
$args | A list of properties to set: | List | null |
Example
@include position(absolute, top 0);
Used by
absolute
@mixin absolute($args: null) { ... }
Description
Leverages the position
mixin to use shorthand for the position
property.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$args | A list of properties to set: | List | null |
Example
@include absolute(top 0 left 0);
Requires
- [mixin]
position
Used by
- [mixin]
pseudo
fixed
@mixin fixed($args: null) { ... }
Description
Leverages the position
mixin to use shorthand for the position
property.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$args | A list of properties to set: | List | null |
Example
@include fixed(zero);
Requires
- [mixin]
position
relative
@mixin relative($args: null) { ... }
Description
Leverages the position
mixin to use shorthand for the position
property.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$args | A preoperty to set: | List | null |
Example
@include relative(float left);
Requires
- [mixin]
position
sticky
@mixin sticky($args: null) { ... }
Description
Leverages the position
mixin to use shorthand for the position
property.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$args | A list of properties to set: | List | null |
Example
@include sticky(top 0 left 0 right 0);
Requires
- [mixin]
position
pseudo
@mixin pseudo($args: null) { ... }
Description
Shorthand for a pseudo element using the position
property.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$args | A list of properties to set: | List | null |
Example
@include pseudo(top 0 left 0 bottom 0);
Requires
- [mixin]
absolute
size
@mixin size($width: null, $height: $width) { ... }
Description
The basic width and height output.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$width | Set the width value. | Number | null |
$height | Set the height value but will use the | Number | $width |
Example
@include size(2rem);
// output
width: 2rem;
height: 2rem;
Used by
- [mixin]
util-screenreader
Placeholders
mixins
clearfix
@mixin clearfix() { ... }
Description
Clearfix placeholder.
Parameters
None.
Example
element {
@include clearfix;
}
reset-list
@mixin reset-list() { ... }
Description
Reset list placeholder.
Parameters
None.
Example
ul {
@include reset-list;
}
Support
mixins
[private] component-setup
@mixin component-setup($component: "", $options: ()) { ... }
Description
Sets up the base variables for a new component.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$component | The component name. | String | "" |
$options | Any options that need to be applied. | Map | () |
Example
@include component-setup("alert", ("host": true));
Requires
- [function]
class
- [mixin]
define-modifiers
- [variable]
_mods
- [variable]
_setup
Used by
- [mixin]
component
[private] define-modifiers
@mixin define-modifiers($local: ()) { ... }
Description
This will update a map of modifiers that are turned off by default.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$local | A list of updated mod settings from | Map | () |
Example
@include define-modifiers($_mods);
Requires
Used by
- [mixin]
component-setup
[private] toggle
@mixin toggle($options: ()) { ... }
Description
Toggle options inside of the $_setup
map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$options | Toggle a group of options. | Map | () |
Example
@include toggle((
"child": true,
"default-selector-stored": get-setup("default-selector")));
Requires
Used by
functions
[private] get-setup
@function get-setup($value: null) { ... }
Description
A get-map
function that targets the specific map of $_setup
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The desired value to get from the map. | String | null |
Example
@if get-setup("host")
// returns
false
Requires
- [variable]
_setup
Used by
- [mixin]
child
- [mixin]
component
- [mixin]
context
- [mixin]
host-modifier
- [mixin]
has
- [mixin]
is
- [mixin]
mod
- [mixin]
nested
- [function]
color
- [mixin]
define-modifiers
[private] has-selector
@function has-selector($selector: null) { ... }
Description
Checks to see if the selector exists in a map
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$selector | — none | String | null |
Requires
- [variable]
_namespace-component
Used by
[private] luminance
@function luminance($color: null) { ... }
Description
Returns the luminance of $color
as a float (between 0 and 1) 1 is pure white, 0 is pure black
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Color | Color | null |
Returns
Number
Used by
- [function]
wcag
Links
[private] map-collect
@function map-collect($maps: null) { ... }
Description
A function that compiles a group of maps into one map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$maps | A group of maps | Map | null |
Example
$map-group: map-collect(
$map-1,
$map-2
);
Used by
- [variable]
_setup
[private] set-setup
@function set-setup($property: null, $value: null) { ... }
Description
A map-merge
function that targets the specific map of $_setup
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$property | The property that needs to be updated. | String | null |
$value | The value that is being applied. | String | null |
Example
set-setup("host", true)
Requires
- [variable]
_setup
Used by
- [mixin]
toggle
[private] strip-selector
@function strip-selector($selector: null) { ... }
Description
Strip the selector of a class or ID
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$selector | — none | String | null |
Used by
- [mixin]
context
strip-unit
@function strip-unit($number: null) { ... }
Description
Strip unit from a number value.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | Number value. | Number | null |
Example
strip-unit(18px)
// output
18
Requires
- [variable]
_default-space
Used by
- [function]
to-rem
- [function]
wcag-font-size
[private] update
@function update($map: null, $values: null) { ... }
Description
Update a values in a map as a single call.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | The desired map to update. | Map | null |
$values | The list of items to be updated. | List | null |
Example
$map: (
"key1": false,
"key2": "value"
);
$map: update($map, "key1" true "key2" "updated value")
// returns
$map: (
"key1": true,
"key2": "updated value"
);
Used by
Util Classes
mixins
util-colors-background
@mixin util-colors-background() { ... }
Description
Builds background color util classes.
Parameters
None.
Requires
- [function]
class
- [function]
color
- [variable]
_palette-util
util-colors-border
@mixin util-colors-border() { ... }
Description
Builds border color util classes.
Parameters
None.
Requires
- [function]
b
- [function]
class
- [variable]
_palette-util
util-colors-border
@mixin util-colors-border() { ... }
Description
Builds text color util classes.
Parameters
None.
Requires
- [function]
class
- [function]
color
- [variable]
_palette-util
util-display
@mixin util-display() { ... }
Description
Builds display util classes.
Parameters
None.
Requires
- [function]
class
util-flex
@mixin util-flex() { ... }
Description
Builds flex util classes.
Parameters
None.
Requires
- [function]
class
util-float
@mixin util-float() { ... }
Description
Builds float util classes.
Parameters
None.
Requires
- [function]
class
util-font
@mixin util-font() { ... }
Description
Builds font util classes.
Parameters
None.
Requires
util-position
@mixin util-position() { ... }
Description
Builds display util classes.
Parameters
None.
Requires
- [function]
class
util-screenreader
@mixin util-screenreader() { ... }
Description
Builds screen reader util classes.
Parameters
None.
Requires
util-sizing
@mixin util-sizing() { ... }
Description
Builds sizing util classes.
Parameters
None.
Requires
- [function]
class
util-spacing
@mixin util-spacing() { ... }
Description
Builds spacing util classes.
Parameters
None.
Requires
util-static
@mixin util-static() { ... }
Description
Builds static util classes.
Parameters
None.
Requires
- [function]
class
util-text-align
@mixin util-text-align() { ... }
Description
Builds text align util classes.
Parameters
None.
Requires
- [function]
class
util-visibility
@mixin util-visibility() { ... }
Description
Builds visibility util classes.
Parameters
None.
Requires
- [function]
class
util-z-index
@mixin util-z-index() { ... }
Description
Builds z-index util classes.
Parameters
None.
Requires
- [function]
class
- [variable]
_default-z-index
Variables
variables
_contexts
$_contexts: (
"all": true,
"sample-context": (
"all": false,
"sample-context": false
)
) !global;
Description
Variable map for context. If all
is true, every context will render out based on it's level.
Used by
_default-animation-time
$_default-animation-time: (
"base": 0.3s,
"fast": 0.1s,
"slow": 0.5s
) !global;
Description
Variable map for animation times.
Used by
_default-border-radius
$_default-border-radius: (
"xs": 1px,
"sm": 2px,
"md": 3px,
"lg": 4px
) !global;
Description
Variable map for border radiuses.
Used by
_default-media-queries
$_default-media-queries: (
"for-phone-only": "(max-width: 599px)",
"for-tablet-portrait-up": "(min-width: 600px)",
"for-tablet-landscape-up": "(min-width: 900px)",
"for-small-desktop-up": "(min-width: 1200px)",
"for-desktop-up": "(min-width: 1300px)",
"for-big-desktop-up": "(min-width: 1800px)"
) !global;
Description
Variable map for media queries.
Used by
_default-opacity
$_default-opacity: (
"visible": 1,
"light": 0.7,
"lighter": 0.5,
"lightest": 0.3,
"hidden": 0
) !global;
Description
Variable map for opacity.
Used by
_default-space
$_default-space: (
"pf": to-rem(1px),
"base": to-rem(4px),
"xs": to-rem(2px),
"sm": to-rem(8px),
"md": to-rem(16px),
"lg": to-rem(24px),
"xl": to-rem(32px)
) !global;
Description
Variable map for spacing.
Used by
_default-transitions
$_default-transitions: (
"link": cubic-bezier(0.075, 0.820, 0.165, 1.000),
"shift": cubic-bezier(0.770, 0.000, 0.175, 1.000)
) !global;
Description
Variable map for transition animations.
Used by
_default-z-index
$_default-z-index: (
"below": -1,
"above": 1,
"navbar": 980,
"dropdown-backdrop": 990,
"dropdown": 1000,
"sticky": 1020,
"fixed": 1030,
"modal-backdrop": 1040,
"modal": 1050,
"popover": 1060,
"tooltip": 1070
) !global;
Description
Variable map for z-indexs.
Used by
- [mixin]
settings
- [function]
z
- [mixin]
util-z-index
_font-sizes
$_font-sizes: (
"3xl": to-rem(24px),
"2xl": to-rem(20px),
"xl": to-rem(18px),
"lg": to-rem(16px),
"md": to-rem(14px),
"sm": to-rem(12px),
"xs": to-rem(10px),
"2xs": to-rem(8px),
"default": to-rem(16px)
) !global;
Description
Variable map for font sizes.
Used by
- [mixin]
settings
- [function]
f
- [function]
fs
- [function]
wcag
- [function]
wcag-font-size
_font-family
$_font-family: (
"regular": "\"SourceSansPro\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
"light": "\"SourceSansProLight\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
"semibold": "\"SourceSansProSemibold\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
"bold": "\"SourceSansProBold\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
"default": "\"SourceSansPro\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif"
) !global;
Description
Variable map for font family/weight.
Used by
_mods
$_mods: (
"all": true,
"sample-component": (
"all": false,
"sample-mod": false
)
) !global;
Description
Variable map for class modifiers. If all
is true, every modifier will render out based on it's level.
Used by
- [mixin]
settings
- [mixin]
mod
- [mixin]
component-setup
- [mixin]
define-modifiers
_namespace-component
$_namespace-component: (
"util": ".util"
) !global;
Description
Variable map for predefined component names.
Used by
- [mixin]
settings
- [function]
class
- [function]
has-selector
_namespace-mod
$_namespace-mod: (
"is": ".is",
"has": ".has",
"mod": "."
) !global;
Description
Variable map for predefined modifier names.
Used by
- [mixin]
context
- [mixin]
host-modifier
- [mixin]
has
- [mixin]
is
- [mixin]
mod
[private] _pseudo-selector
$_pseudo-selector: (
"active": "active",
"checked": "checked",
"disabled": "disabled",
"empty": "empty",
"enabled": "enabled",
"first-child": "first-child",
"first-of-type": "first-of-type",
"focus": "focus",
"hover": "hover",
"in-range": "in-range",
"invalid": "invalid",
"last-child": "last-child",
"last-of-type": "last-of-type",
"link": "link",
"only-of-type": "only-of-type",
"only-child": "only-child",
"optional": "optional",
"out-of-range": "out-of-range",
"read-only": "read-only",
"read-write": "read-write",
"required": "required",
"root": "root",
"target": "target",
"valid": "valid",
"visited": "visited"
) !global;
Description
Variable map for pseudo selector names.
Used by
[private] _pseudo-selector-option
$_pseudo-selector-option: (
"lang": "lang",
"nth-child": "nth-child",
"nth-last-child": "nth-last-child",
"nth-last-of-type": "nth-last-of-type",
"nth-of-type": "nth-of-type"
) !global;
Description
Variable map for pseudo selector names that have options.
Used by
- [mixin]
is
[private] _setup-prefixes
$_setup-prefixes: (
"prefix": "teq-",
"child-prefix": "-",
"modifier-prefix": "_"
) !global;
Description
Variable map for prefix namespace settings.
Used by
[private] _setup-namespace
$_setup-namespace: (
"current-component": "",
"default-selector": "",
"default-selector-stored": "",
"host-element": "",
"host-selector": "",
"host-selector-stored": "",
"mod-selector": "",
"mod-selector-stored": ""
);
Description
Variable map for setup namespaces.
Used by
- [variable]
_setup
[private] _setup-toggles
$_setup-toggles: (
"host": false,
"child": false,
"nested": false,
"has": false,
"is": false,
"mod": false,
"context": false,
"cssvars": true,
"debug": false,
"verbose-mod": false
);
Description
Variable map for setup toggles.
Used by
- [variable]
_setup
[private] _setup
$_setup: map-collect(
$_setup-namespace,
$_setup-toggles,
$_setup-prefixes
) !global;
Description
Variable map that compiles other setup maps.
Requires
- [function]
map-collect
- [variable]
_setup-prefixes
- [variable]
_setup-namespace
- [variable]
_setup-toggles
Used by
- [mixin]
settings
- [mixin]
component-setup
- [function]
get-setup
- [function]
set-setup
- [mixin]
toggle
WCAG
functions
[private] wcag
@function wcag($values: null, $palette: null) { ... }
Description
Checks WCAG contrast ratio
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$values | — none | List | null |
$palette | — none | Map | null |
Example
$wcag-contrast: wcag-contrast($values, $palette);
Requires
- [variable]
_font-sizes
- [function]
luminance
- [function]
review-hex
- [function]
wcag-contrast
- [function]
wcag-font-size
- [function]
wcag-font-weight
Used by
- [function]
color
[private] review-hex
@function review-hex($color: null, $palette: null) { ... }
Description
Review hex from input.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Color to search for. | Color | null |
$palette | A palette of colors. | Map | null |
Example
get-hex("green-500")
Requires
- [variable]
_palette-default
Used by
- [function]
wcag
[private] wcag-contrast
@function wcag-contrast($color-light, $color-dark) { ... }
Description
WC3 contrast formula.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color-light | — none | Number | — none |
$color-dark | — none | Number | — none |
Example
$wcag-contrast: wcag-contrast($color-luminance, $contrast-luminance);
Used by
- [function]
wcag
[private] wcag-font-size
@function wcag-font-size($value: null, $wcag-value: null) { ... }
Description
Check font size.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | — none | Value | null |
$wcag-value | — none | Number | null |
Example
wcag-font-weight(18px)
Requires
- [function]
strip-unit
- [variable]
_font-sizes
Used by
- [function]
wcag
[private] wcag-font-weight
@function wcag-font-weight($weight: null, $wcag-value: null) { ... }
Description
Check font weight.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$weight | — none | Value | null |
$wcag-value | — none | Number | null |
Example
wcag-font-weight(bold)
wcag-font-weight(700)
Used by
- [function]
wcag