Ungrouped
csss
.u-h--full
@css .u-h--full() { ... }
.invisible
@css .invisible() { ... }
/// // CSS declarations for .block /// @include element('element')
@css /// // CSS declarations for .block
/// @include element('element')() { ... }
mixins
min-max-media-query
@mixin min-max-media-query() { ... }
Description
Mixins
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive).
scrollbars
@mixin scrollbars($size, $foreground-color, $background-color: mix($primary, white, 75%)) { ... }
Description
Mixin to customize scrollbars Beware, this does not work in all browsers
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$size | Horizontal scrollbar's height and vertical scrollbar's width | Length | —none |
$foreground-color | Scrollbar's color | Color | —none |
$background-color | Scrollbar's color | Color | mix($primary, white, 75%) |
Example
Scrollbar styling
@include scrollbars(.5em, slategray);
centerer
@mixin centerer($horizontal, $vertical) { ... }
Description
Centerer mixin to center object on screen.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$horizontal | Align horizontal | Boolean | —none |
$vertical | Align vertical | Boolean | —none |
clearfix
@mixin clearfix() { ... }
Description
Clearfix
Parameters
None.
box-shadow
@mixin box-shadow() { ... }
Description
Box Shadows
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
linear-gradient
@mixin linear-gradient() { ... }
Description
Linear-gradient
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
directional-gradient
@mixin directional-gradient() { ... }
Description
Linear-gradient
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
transform
@mixin transform($transform) { ... }
Description
Transform mixen
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$transform | The transform to apply | String | —none |
transition
@mixin transition() { ... }
Description
transition
Parameters
None.
Example
Using box-shadow
@include transition(ease, .5s);
transition-property
@mixin transition-property() { ... }
Description
transition-property
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
transition-duration
@mixin transition-duration() { ... }
Description
transition-duration
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
transition-timing-function
@mixin transition-timing-function() { ... }
Description
transition-timing-function
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
animation-name
@mixin animation-name() { ... }
Description
animation-name
Parameters
None.
Example
Using box-shadow
@include animation-name('test');
animation-duration
@mixin animation-duration() { ... }
Description
animation-duration
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
animation-direction
@mixin animation-direction() { ... }
Description
animation-direction
Parameters
None.
Example
Using box-shadow
@include box-shadow(#000);
b
@mixin b() { ... }
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive).
Used by
- [mixin]
block
e
@mixin e() { ... }
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive).
Requires
- [function]
containsModifier
- [function]
getBlock
- [variable]
elementSeparator
Used by
- [mixin]
element
m
@mixin m() { ... }
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive).
Requires
- [variable]
modifierSeparator
Used by
- [mixin]
modifier
modifier
@mixin modifier($modifier) { ... }
Description
Block Modifier
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$modifier | Modifier's name | String | —none |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
@include modifier('modifier') {
// CSS declarations for .block--modifier
@include element('element') {
// CSS declarations for .block--modifier__element
}
}
Requires
- [mixin]
m
element
@mixin element($element) { ... }
Description
Block Element
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$element | Element's name | String | —none |
Content
This mixin allows extra content to be passed (through the @content
directive).
Example
.block {
// CSS declarations for .block
@include element('element') {
//CSS declarations for .block__element
}
@include modifier('modifier') {
// CSS declarations for .block--modifier
@include element('element') {
// CSS declarations for .block--modifier__element
}
}
}
Requires
- [mixin]
e
block
@mixin block() { ... }
Description
// CSS declarations for .block @include element('element') { //CSS declarations for .block__element }
@include modifier('modifier') { // CSS declarations for .block--modifier
@include element('element') {
// CSS declarations for .block--modifier__element
}
} }
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive).
Requires
- [mixin]
b
c
@mixin c() { ... }
Description
Content block - add ::content to selector
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive).
variables
displays
$displays: none, block, inline-block, inline, flex;
Description
Display
elementSeparator
$elementSeparator: '__';
Used by
- [mixin]
e
modifierSeparator
$modifierSeparator: '--';
Used by
- [function]
containsModifier
- [function]
getBlock
- [mixin]
m
inuit-widths-columns-responsive
$inuit-widths-columns-responsive: ( 1, 2, 3, 4, 6, 7, 8 );
Description
Trumps
functions
containsModifier
@function containsModifier() { ... }
Parameters
None.
Requires
- [function]
selectorToString
- [variable]
modifierSeparator
Used by
- [mixin]
e
selectorToString
@function selectorToString() { ... }
Parameters
None.
Used by
- [function]
containsModifier
- [function]
getBlock
getBlock
@function getBlock() { ... }
Parameters
None.
Requires
- [function]
selectorToString
- [variable]
modifierSeparator
Used by
- [mixin]
e