alignments

mixins

margin

@mixin margin($top: null, $right: unset, $bottom: unset, $left: unset) { ... }

Description

Sets the margin of an element. Similar to the original margin CSS rule, except for the addition of 2 values: null and ''. If null is specified for a specific side of the margin, that side will not be set. If '' is specified for a specific side of the margin, it will take the value of the previous side.

Parameters

NameDescriptionTypeDefault value
$top

Value for the top margin or a list of values for each side of the margin ordered by top, right, bottom and left. Other than the first value, all values are optional. If values are left out, the behavior will be similar to the original margin CSS rule (i.e. bottom matches top, right matches left, etc).

Number/listnull
$right

Value for the right margin, if unset this will be automatically inferred.

Numberunset
$bottom

Value for the bottom margin, if unset this will be automatically inferred.

Numberunset
$left

Value for the left margin, if unset this will be automatically inferred.

Numberunset

Example

@include margin(0px);

// margin-top: 0px;
// margin-right: 0px;
// margin-bottom: 0px;
// margin-left: 0px;
@include margin(0px 5px);

// margin-top: 0px;
// margin-right: 5px;
// margin-bottom: 0px;
// margin-left: 5px;
@include margin(0px 5px '' null);

// margin-top: 0px;
// margin-right: 5px;
// margin-bottom: 5px;

Used by

margin-h

@mixin margin-h($left: null, $right: unset) { ... }

Description

Sets the horizontal margins (i.e. left and right respectively). Values are optional except for the first value. If null is specified, that side of the margin will not be set. If '' is specified, the previous value will be used instead (likewise if it is left out).

Parameters

NameDescriptionTypeDefault value
$left

Value for the left margin or a list of up to 2 values for left and right margins respectively.

Number/listnull
$right

Value for the right margin. If unset, this value will be automatically inferred.

Numberunset

Used by

margin-v

@mixin margin-v($top: null, $bottom: unset) { ... }

Description

Sets the vertical margins (i.e. top and bottom respectively). Values are optional except for the first value. If null is specified, that side of the margin will not be set. If '' is specified, the previous value will be used instead (likewise if it is left out).

Parameters

NameDescriptionTypeDefault value
$top

Value for the top margin or a list of up to 2 values for top and bottom margins respectively.

Number/listnull
$bottom

Value for the bottom margin. If unset, this value will be automatically inferred.

Numberunset

Used by

padding

@mixin padding($top: null, $right: unset, $bottom: unset, $left: unset) { ... }

Description

Sets the padding of an element. Similar to the original padding CSS rule, except for the addition of 2 values: null and ''. If null is specified for a specific side of the padding, that side will not be set. If '' is specified for a specific side of the padding, it will take the value of the previous side.

Parameters

NameDescriptionTypeDefault value
$top

Value for the top padding or a list of values for each side of the padding ordered by top, right, bottom and left. Other than the first value, all values are optional. If values are left out, the behavior will be similar to the original padding CSS rule (i.e. bottom matches top, right matches left, etc).

Number/listnull
$right

Value for the right padding, if unset this will be automatically inferred.

Numberunset
$bottom

Value for the bottom padding, if unset this will be automatically inferred.

Numberunset
$left

Value for the left padding, if unset this will be automatically inferred.

Numberunset

Example

@include padding(0px);

// padding-top: 0px;
// padding-right: 0px;
// padding-bottom: 0px;
// padding-left: 0px;
@include padding(0px 5px);

// padding-top: 0px;
// padding-right: 5px;
// padding-bottom: 0px;
// padding-left: 5px;
@include padding(0px 5px '' null);

// padding-top: 0px;
// padding-right: 5px;
// padding-bottom: 5px;

padding-h

@mixin padding-h($left: null, $right: unset) { ... }

Description

Sets the horizontal paddings (i.e. left and right respectively). Values are optional except for the first value. If null is specified, that side of the padding will not be set. If '' is specified, the previous value will be used instead (likewise if it is left out).

Parameters

NameDescriptionTypeDefault value
$left

Value for the left padding or a list of up to 2 values for left and right margins respectively.

Number/listnull
$right

Value for the right padding. If unset, this value will be automatically inferred.

Numberunset

padding-v

@mixin padding-v($top: null, $bottom: unset) { ... }

Description

Sets the vertical paddings (i.e. top and bottom respectively). Values are optional except for the first value. If null is specified, that side of the padding will not be set. If '' is specified, the previous value will be used instead (likewise if it is left out).

Parameters

NameDescriptionTypeDefault value
$top

Value for the top padding or a list of up to 2 values for top and bottom margins respectively.

Number/listnull
$bottom

Value for the bottom padding. If unset, this value will be automatically inferred.

Numberunset

edge

@mixin edge($top: null, $right: unset, $bottom: unset, $left: unset) { ... }

Description

Sets the edge of an element (i.e. top, right, bottom and left). This mixin makes setting edges similar to margins and paddings where you can apply a list of up to 4 values to set all edges. If null is specified for a specific edge, that edge will not be set. If '' is specified for a specific edge, it will take the value of the previous edge.

Parameters

NameDescriptionTypeDefault value
$top

Value for the top edge or a list of values for each side of the edge ordered by top, right, bottom and left. Other than the first value, all values are optional. If values are left out, the behavior will be similar to the original 'margin' CSS rule (i.e. bottom matches top, right matches left, etc).

Number/listnull
$right

Value for the right edge, if unset this will be automatically inferred.

Numberunset
$bottom

Value for the bottom edge, if unset this will be automatically inferred.

Numberunset
$left

Value for the left edge, if unset this will be automatically inferred.

Numberunset

Example

@include edge(0px);

// top: 0px;
// right: 0px;
// bottom: 0px;
// left: 0px;
@include edge(0px 5px);

// top: 0px;
// right: 5px;
// bottom: 0px;
// left: 5px;
@include edge(0px 5px '' null);

// top: 0px;
// right: 5px;
// bottom: 5px;

Used by

edge-h

@mixin edge-h($left: null, $right: unset) { ... }

Description

Sets the horizontal edges (i.e. left and right respectively). Values are optional except for the first value. If null is specified, that side of the edge will not be set. If '' is specified, the previous value will be used instead (likewise if it is left out).

Parameters

NameDescriptionTypeDefault value
$left

Value for the left edge or a list of up to 2 values for left and right margins respectively.

Number/listnull
$right

Value for the right edge. If unset, this value will be automatically inferred.

Numberunset

Used by

edge-v

@mixin edge-v($top: null, $bottom: unset) { ... }

Description

Sets the vertical edges (i.e. top and bottom respectively). Values are optional except for the first value. If null is specified, that side of the edge will not be set. If '' is specified, the previous value will be used instead (likewise if it is left out).

Parameters

NameDescriptionTypeDefault value
$top

Value for the top edge or a list of up to 2 values for top and bottom margins respectively.

Number/listnull
$bottom

Value for the bottom edge. If unset, this value will be automatically inferred.

Numberunset

Used by

clearfix

@mixin clearfix() { ... }

Description

Clearfix hack for floated elements.

Parameters

None.

align

@mixin align($align1: null, $align2: null, $type: null) { ... }

Description

Aligns an element horizontally and vertically.

Parameters

NameDescriptionTypeDefault value
$align1

Internal alignment, can be a string or a list of 2 strings.

String/listnull
$align2

Internal alignment adjacent to $align1.

Stringnull
$type

Specifies the position type (i.e. absolute or fixed).

Stringnull

Requires

Used by

abs-align

@mixin abs-align($alignH: 'left', $alignV: 'top') { ... }

Description

Aligns containing selector to specified x/y directions in absolute position.

Parameters

NameDescriptionTypeDefault value
$alignH

Horizontal alignment (left|center|right, left|right offset, right offset).

List'left'
$alignV

Vertical alignment (top|center|middle|bottom, top|bottom offset, bottom offset).

List'top'

Requires

Used by

inline-align

@mixin inline-align($alignH: 'left', $alignV: 'top') { ... }

Description

Aligns containing inline-block to specified x/y directions in relative position.

Parameters

NameDescriptionTypeDefault value
$alignH

Horizontal alignment (i.e. left, center, right).

String'left'
$alignV

Vertical alignment (i.e. top, middle, bottom).

String'top'

Used by

size

@mixin size($width, $height: unset, $oval: false) { ... }

Description

Sets the size of the target selector.

Parameters

NameDescriptionTypeDefault value
$width

Specifies the width and height of the selector. If only 1 value is provided, both width and height will use that value. If 2 values are provided, they will be used for width and height respectively.

Number/list—
$height

Specifies the height (overrides the previous parameter).

Numberunset
$oval

Specifies whether the selector is oval shaped (hence rounded corners corresponding to the shortest side).

Booleanfalse

Requires

Used by

max-size

@mixin max-size($width, $height: unset) { ... }

Description

Sets the max size of the target selector.

Parameters

NameDescriptionTypeDefault value
$width

Specifies the max width and height of the selector. If only 1 value is provided, both max-width and max-height will use that value. If 2 values are provided, they will be used for max-width and max-height respectively.

Number/list—
$height

Specifies the max-height (overrides the previous parameter).

Numberunset

min-size

@mixin min-size($width, $height: unset) { ... }

Description

Sets the min size of the target selector.

Parameters

NameDescriptionTypeDefault value
$width

Specifies the min width and height of the selector. If only 1 value is provided, both min-width and min-height will use that value. If 2 values are provided, they will be used for min-width and min-height respectively.

Number/list—
$height

Specifies the min-height (overrides the previous parameter).

Numberunset

Used by

overflow

@mixin overflow($overflowX, $overflowY: unset) { ... }

Description

Sets the overflow of the target selector.

Parameters

NameDescriptionTypeDefault value
$overflowX

Specifies the overflow of the selector. If only 1 value is provided, both overflow-x and overflow-y will use that value. If 2 values are provided, they will be used for overflow-x and overflow-y respectively.

Number/list—
$overflowY

Specifies the overflow-y value (overrides the previous parameter) if specified.

Numberunset

Used by

space-between

@mixin space-between($value, $direction: '>', $unset: false) { ... }

Description

Sets the space in between adjacent elements excluding the first and last element.

Parameters

NameDescriptionTypeDefault value
$value

Specifies the value of the gap.

Number—
$direction

Specifies the direction. >, horizontal and row means horizontal. v, vertical and column means vertical.

String'>'
$unset

Unsets other margins set by this mixin.

Booleanfalse

cover

@mixin cover() { ... }

Description

Applies 100% width and height to containing element.

Parameters

None.

Used by

cl

@mixin cl() { ... }

Description

Absolutely aligns element to center left of parent.

Parameters

None.

Used by

  • [placeholder] cl

cc

@mixin cc() { ... }

Description

Absolutely aligns element to center of parent.

Parameters

None.

Used by

  • [placeholder] cc

cr

@mixin cr() { ... }

Description

Absolutely aligns element to center right of parent.

Parameters

None.

Used by

  • [placeholder] cr

tl

@mixin tl() { ... }

Description

Absolutely aligns element to top left of parent.

Parameters

None.

Used by

  • [placeholder] tl

tc

@mixin tc() { ... }

Description

Absolutely aligns element to top center of parent.

Parameters

None.

Used by

  • [placeholder] tc

tr

@mixin tr() { ... }

Description

Absolutely aligns element to top right of parent.

Parameters

None.

Used by

  • [placeholder] tr

bl

@mixin bl() { ... }

Description

Absolutely aligns element to bottom left of parent.

Parameters

None.

bc

@mixin bc() { ... }

Description

Absolutely aligns element to bottom center of parent.

Parameters

None.

Used by

  • [placeholder] bc

br

@mixin br() { ... }

Description

Absolutely aligns element to bottom right of parent.

Parameters

None.

Used by

  • [placeholder] br

fcl

@mixin fcl() { ... }

Description

Fix aligns element to center left of parent.

Parameters

None.

Used by

  • [placeholder] fcl

fcc

@mixin fcc() { ... }

Description

Fix aligns element to center of parent.

Parameters

None.

Used by

  • [placeholder] fcc

fcr

@mixin fcr() { ... }

Description

Fix aligns element to center right of parent.

Parameters

None.

Used by

  • [placeholder] fcr

ftl

@mixin ftl() { ... }

Description

Fix aligns element to top left of parent.

Parameters

None.

Used by

  • [placeholder] ftl

ftc

@mixin ftc() { ... }

Description

Fix aligns element to top center of parent.

Parameters

None.

Used by

  • [placeholder] ftc

ftr

@mixin ftr() { ... }

Description

Fix aligns element to top right of parent.

Parameters

None.

Used by

  • [placeholder] ftr

fbl

@mixin fbl() { ... }

Description

Fix aligns element to bottom left of parent.

Parameters

None.

fbc

@mixin fbc() { ... }

Description

Fix aligns element to bottom center of parent.

Parameters

None.

Used by

  • [placeholder] fbc

fbr

@mixin fbr() { ... }

Description

Fix aligns element to bottom right of parent.

Parameters

None.

Used by

  • [placeholder] fbr

placeholders

cover

%cover { ... }

Description

Applies 100% width and height to containing element.

Requires

cl

%cl { ... }

Description

Absolutely aligns element to center left of parent.

Requires

  • [mixin] cl

cc

%cc { ... }

Description

Absolutely aligns element to center of parent.

Requires

  • [mixin] cc

cr

%cr { ... }

Description

Absolutely aligns element to center right of parent.

Requires

  • [mixin] cr

tl

%tl { ... }

Description

Absolutely aligns element to top left of parent.

Requires

  • [mixin] tl

tc

%tc { ... }

Description

Absolutely aligns element to top center of parent.

Requires

  • [mixin] tc

tr

%tr { ... }

Description

Absolutely aligns element to top right of parent.

Requires

  • [mixin] tr

bc

%bc { ... }

Description

Absolutely aligns element to bottom center of parent.

Requires

  • [mixin] bc

br

%br { ... }

Description

Absolutely aligns element to bottom right of parent.

Requires

  • [mixin] br

fcl

%fcl { ... }

Description

Fix aligns element to center left of parent.

Requires

fcc

%fcc { ... }

Description

Fix aligns element to center of parent.

Requires

fcr

%fcr { ... }

Description

Fix aligns element to center right of parent.

Requires

ftl

%ftl { ... }

Description

Fix aligns element to top left of parent.

Requires

ftc

%ftc { ... }

Description

Fix aligns element to top center of parent.

Requires

ftr

%ftr { ... }

Description

Fix aligns element to top right of parent.

Requires

fbc

%fbc { ... }

Description

Fix aligns element to bottom center of parent.

Requires

fbr

%fbr { ... }

Description

Fix aligns element to bottom right of parent.

Requires

attributes

mixins

element

@mixin element($tag) { ... }

Description

Selector for custom elements with the specified is tag.

Parameters

NameDescriptionTypeDefault value
$tag

Tag name.

String—

name

@mixin name($name) { ... }

Description

Selector for elements with the specified name tag.

Parameters

NameDescriptionTypeDefault value
$name

Name attribute of the element.

String—

data

@mixin data($key, $value: null, $scope: 'this') { ... }

Description

Selects elements with the specified data- key and value.

Parameters

NameDescriptionTypeDefault value
$key

data- key.

String—
$value

data- value, if applicable.

Stringnull
$scope

Specifies the scope relative to the target selector in which this property applies to (any, this, parent, or child).

String'this'

boxes

mixins

display

@mixin display($type, $align1: null, $align2: null) { ... }

Description

Transforms an element into a container of the specified $type. Special cases include types specified as fluid, flex, box, elastic and grid. Wrap $type with () or prefix it with inline- to use the inline equivalent. Otherwise the type will be directly applied to the display CSS rule.

fluid - Freely aligns child elements, (i.e. top left, bottom right, center center, etc). Child elements must have display set as inline-block (default). Child elements do not need to have defined width and height.

Syntax: fluid

flex - Arranges children in the specified flex-direction using display: flex. The lengths of the children that are parallel to the flex-direction are NOT inferred and MUST BE specified by the children. On the other hand, the lengths of the children that are perpendicular to the flex-direction automatically match that of the container. If the total length of the children in the specified flex-direction exceeds that of the container, the length of each child will shrink (flex-shrink: 1) proportionally according to its original length to fit the container. It is not recommended to add padding to the children because padding is used as part of the calculation for flex-shrink.

Syntax: flex{^|>|v|<}, where:

^ = flex-direction: column-reverse

> = flex-direction: row (default)

v = flex-direction: column

< = flex-direction: row-reverse

box - Similar to fluid containers, freely aligns child elements without interfering with their width and height. Child elements can then specify their own dimensions. The only difference between box containers and fluid containers is that box containers are not restricted to only supporting inline-block child elements. Syntax is similar to flex.

Syntax: box{^|>|v|<}, where:

^ = flex-direction: column-reverse

> = flex-direction: row (default)

v = flex-direction: column

< = flex-direction: row-reverse

elastic - Similar to flex, except it automatically stretches its children evenly to fill the container in the specified flex-direction. Like flex, avoid adding padding to child elements in case of unexpected size adjustments.

Syntax: elastic{^|>|v|<}, where:

^ = flex-direction: column-reverse

> = flex-direction: row (default)

v = flex-direction: column

< = flex-direction: row-reverse

grid - Literal grids driven by flexbox. This grid supports all directions available in flex-direction. It is not a good idea to directly tweak the margin and padding rules of this grid. If you must specify a margin, either put this grid in a parent container and tweak the margins of that instead, or manually take the internal paddings of the grid into account. The same goes for the direct child elements inside the grid. If the margin/padding must be tweaked for these child elements, create a container inside the elements and modify the margin/padding of that container instead. There are a few customizable properties you can specify for this grid, as follows:

  • size - The number of child elements expected per row/column, depending on the flex-direction. This number must not be less than 0. When size is bigger than 0, each row/column will ensure that it only has that number of child elements in it, and push subsequent elements to the next row/column. If size is 0, this restraint is removed and elements are placed one after another as long as there is room in the current row/column. Defaults to 0.
  • grow - Specifies whether child elements will automatically grow in the specified flex-direction to fill remaininng gaps in the grid. Note that if there is empty space in a given row/column, all elements in that row/column will grow proportionally, not just the last element. Defaults to false.
  • width - This is the width of either the column or the entire grid, depending on the flex-direction. If horizontal, this reflects the width of the entire grid. If vertical, this reflects the column width. Defaults to auto.
  • height - This is the height of either the row or the entire grid, depending on the flex-direction. If horizontal, this reflects the row height. If vertical, this reflects the height of the entire grid. Defaults to auto.
  • padding - This is the padding between each grid cell. Defaults to 0px.
  • padding-around - This specifies whether padding will be applied to the inner wall of the grid. If false, padding will only be applied between grid cells, and not between the grid cell and the grid wall. Defaults to false.

Syntax: grid{direction:<|^|>|v}{size:number}{grow:?}{width:@number}{height:/number}{padding:|[number]}, where:

^ = flex-direction: column-reverse

> = flex-direction: row (default)

v = flex-direction: column

< = flex-direction: row-reverse

size:number = A number, i.e. 4

grow:? = Specify grow to be true with ?, leave out if false

width:@number = Specify length or auto prefixed by @, i.e. @400px or @auto

height:/number = Specify length or auto prefixed by /, i.e. /100% or /auto

padding:|[number] = Specify length prefixed by | or wrap the length in [] to specify padding-around as true, or simply leave it out for false, i.e. |4px or |[4px]

Parameters

NameDescriptionTypeDefault value
$type

Type of container. If none of the special types are specified, this value will apply directly to the 'display' CSS rule.

String—
$align1

Internal alignment, can be a string or a list of 2 strings.

String/listnull
$align2

Internal alignment adjacent to $align1.

Stringnull

Example

// Defines a fluid block with child elements aligned to top left (default)
@include display('fluid');

// Defines a fluid block with child elements algined to the absolute center
@include display('fluid', center);

// Defines an inline fluid block (i.e. display: inline-block) with child
// elements aligned to top left (default)
@include display('(fluid)');

// Defines an inline fluid block (i.e. display: inline-block) with child
// elements aligned to bottom right
@include display('inline-fluid', bottom right);
// Defines a flex block with flex-direction as 'row'
@include display('flex>');

// Defines an inline box block with flex-direction as 'column'
@include display('(boxv)');

// Defines an elastic block with flex-direction as 'row-reverse'
@include display('elastic<');
// Defines a grid with flex-direction as 'row', with 100% width and auto
// height and 300px row height, 5px surrounding padding between each grid
// cell and maximum 3 cells per row.
@include display('grid>3@100%/300px|[5px]');

// Defines a grid with flex-direction as 'column', with auto width and
// 100% height and auto column width, 1px padding between grid cells and
// no padding between grid cells and grid wall.
@include display('gridv|1px');

Requires

parallax-block

@mixin parallax-block($perspective: 1) { ... }

Description

Transforms target selector into a container for parallax elements.

Parameters

NameDescriptionTypeDefault value
$perspective

Tweak this value to adjust perspective.

Number1

cover-video

@mixin cover-video() { ... }

Description

Makes a video fill the parent block, maintaining aspect ratio and centered (like background-size: cover).

Parameters

None.

Requires

Used by

cover-image

@mixin cover-image() { ... }

Description

Makes an image fill the parent block. Note that this mixin doesn't support all browsers.

Parameters

None.

Requires

Used by

Links

box

@mixin box() { ... }

Description

Normalizes an element container.

Parameters

None.

Used by

fhcc

@mixin fhcc() { ... }

Description

Transforms an element to a flex box where the child elements are horizontally aligned.

Parameters

None.

Requires

Used by

fhtl

@mixin fhtl() { ... }

Description

Transforms an element to a flex box where the child elements are top left aligned in the row orientation.

Parameters

None.

Requires

Used by

fhtc

@mixin fhtc() { ... }

Description

Transforms an element to a flex box where the child elements are top center aligned in the row orientation.

Parameters

None.

Requires

Used by

fhtr

@mixin fhtr() { ... }

Description

Transforms an element to a flex box where the child elements are top right aligned in the row orientation.

Parameters

None.

Requires

Used by

fhts

@mixin fhts() { ... }

Description

Transforms an element to a flex box where the child elements are top aligned and evenly spaced in the row orientation.

Parameters

None.

Requires

Used by

fhcl

@mixin fhcl() { ... }

Description

Transforms an element to a flex box where the child elements are center left aligned in the row orientation.

Parameters

None.

Requires

Used by

fhcr

@mixin fhcr() { ... }

Description

Transforms an element to a flex box where the child elements are center right aligned in the row orientation.

Parameters

None.

Requires

Used by

fhcs

@mixin fhcs() { ... }

Description

Transforms an element to a flex box where the child elements are center aligned and evenly spaced in the row orientation.

Parameters

None.

Requires

Used by

fhbl

@mixin fhbl() { ... }

Description

Transforms an element to a flex box where the child elements are bottom left aligned in the row orientation.

Parameters

None.

Requires

Used by

fhbc

@mixin fhbc() { ... }

Description

Transforms an element to a flex box where the child elements are bottom center aligned in the row orientation.

Parameters

None.

Requires

Used by

fhbr

@mixin fhbr() { ... }

Description

Transforms an element to a flex box where the child elements are bottom right aligned in the row orientation.

Parameters

None.

Requires

Used by

fhbs

@mixin fhbs() { ... }

Description

Transforms an element to a flex box where the child elements are bottom aligned and evenly spaced in the row orientation.

Parameters

None.

Requires

Used by

fvcc

@mixin fvcc() { ... }

Description

Transforms an element to a flex box where the child elements are center aligned in the column orientation.

Parameters

None.

Requires

Used by

fvtl

@mixin fvtl() { ... }

Description

Transforms an element to a flex box where the child elements are top left aligned in the column orientation.

Parameters

None.

Requires

Used by

fvtc

@mixin fvtc() { ... }

Description

Transforms an element to a flex box where the child elements are top center aligned in the column orientation.

Parameters

None.

Requires

Used by

fvtr

@mixin fvtr() { ... }

Description

Transforms an element to a flex box where the child elements are top right aligned in the column orientation.

Parameters

None.

Requires

Used by

fvts

@mixin fvts() { ... }

Description

Transforms an element to a flex box where the child elements are top aligned and stretched in the column orientation.

Parameters

None.

Requires

Used by

fvcl

@mixin fvcl() { ... }

Description

Transforms an element to a flex box where the child elements are center left aligned in the column orientation.

Parameters

None.

Requires

Used by

fvcr

@mixin fvcr() { ... }

Description

Transforms an element to a flex box where the child elements are center right aligned in the column orientation.

Parameters

None.

Requires

Used by

fvcs

@mixin fvcs() { ... }

Description

Transforms an element to a flex box where the child elements are center aligned and stretched in the column orientation.

Parameters

None.

Requires

Used by

fvbl

@mixin fvbl() { ... }

Description

Transforms an element to a flex box where the child elements are bottom left aligned in the column orientation.

Parameters

None.

Requires

Used by

fvbc

@mixin fvbc() { ... }

Description

Transforms an element to a flex box where the child elements are bottom center aligned in the column orientation.

Parameters

None.

Requires

Used by

fvbr

@mixin fvbr() { ... }

Description

Transforms an element to a flex box where the child elements are bottom right aligned in the column orientation.

Parameters

None.

Requires

Used by

fvbs

@mixin fvbs() { ... }

Description

Transforms an element to a flex box where the child elements are bottom aligned and stretched in the column orientation.

Parameters

None.

Requires

Used by

placeholders

cover-video

%cover-video { ... }

Description

Makes a video fill the parent block, maintaining aspect ratio and centered (like background-size: cover).

Requires

cover-image

%cover-image { ... }

Description

Makes an image fill the parent block. Note that this mixin doesn't support all browsers.

Requires

Links

box

%box { ... }

Description

Normalizes an element container.

Requires

fhcc

%fhcc { ... }

Description

Transforms an element to a flex box where the child elements are horizontally aligned.

Requires

fhtl

%fhtl { ... }

Description

Transforms an element to a flex box where the child elements are top left aligned in the row orientation.

Requires

fhtc

%fhtc { ... }

Description

Transforms an element to a flex box where the child elements are top center aligned in the row orientation.

Requires

fhtr

%fhtr { ... }

Description

Transforms an element to a flex box where the child elements are top right aligned in the row orientation.

Requires

fhts

%fhts { ... }

Description

Transforms an element to a flex box where the child elements are top aligned and evenly spaced in the row orientation.

Requires

fhcl

%fhcl { ... }

Description

Transforms an element to a flex box where the child elements are center left aligned in the row orientation.

Requires

fhcr

%fhcr { ... }

Description

Transforms an element to a flex box where the child elements are center right aligned in the row orientation.

Requires

fhcs

%fhcs { ... }

Description

Transforms an element to a flex box where the child elements are center aligned and evenly spaced in the row orientation.

Requires

fhbl

%fhbl { ... }

Description

Transforms an element to a flex box where the child elements are bottom left aligned in the row orientation.

Requires

fhbc

%fhbc { ... }

Description

Transforms an element to a flex box where the child elements are bottom center aligned in the row orientation.

Requires

fhbr

%fhbr { ... }

Description

Transforms an element to a flex box where the child elements are bottom right aligned in the row orientation.

Requires

fhbs

%fhbs { ... }

Description

Transforms an element to a flex box where the child elements are bottom aligned and evenly spaced in the row orientation.

Requires

fvcc

%fvcc { ... }

Description

Transforms an element to a flex box where the child elements are center aligned in the column orientation.

Requires

fvtl

%fvtl { ... }

Description

Transforms an element to a flex box where the child elements are top left aligned in the column orientation.

Requires

fvtc

%fvtc { ... }

Description

Transforms an element to a flex box where the child elements are top center aligned in the column orientation.

Requires

fvtr

%fvtr { ... }

Description

Transforms an element to a flex box where the child elements are top right aligned in the column orientation.

Requires

fvts

%fvts { ... }

Description

Transforms an element to a flex box where the child elements are top aligned and stretched in the column orientation.

Requires

fvcl

%fvcl { ... }

Description

Transforms an element to a flex box where the child elements are center left aligned in the column orientation.

Requires

fvcr

%fvcr { ... }

Description

Transforms an element to a flex box where the child elements are center right aligned in the column orientation.

Requires

fvcs

%fvcs { ... }

Description

Transforms an element to a flex box where the child elements are center aligned and stretched in the column orientation.

Requires

fvbl

%fvbl { ... }

Description

Transforms an element to a flex box where the child elements are bottom left aligned in the column orientation.

Requires

fvbc

%fvbc { ... }

Description

Transforms an element to a flex box where the child elements are bottom center aligned in the column orientation.

Requires

fvbr

%fvbr { ... }

Description

Transforms an element to a flex box where the child elements are bottom right aligned in the column orientation.

Requires

fvbs

%fvbs { ... }

Description

Transforms an element to a flex box where the child elements are bottom aligned and stretched in the column orientation.

Requires

components

mixins

burger-button

@mixin burger-button($width: 27px, $height: 20px, $thickness: 2px, $color: #fff) { ... }

Description

Transforms a button element into a standard hamburger menu button. Element can be any of the button elements supported by Minuet (@see {mixin} buttons). The button element must have at least 1 child <span> element, at most 2, to be used as the burger slices.

Parameters

NameDescriptionTypeDefault value
$width

Width of the burger.

Number27px
$height

Height of the burger.

Number20px
$thickness

Thickness of each slice.

Number2px
$color

Color of the slices.

Color#fff

Requires

features

mixins

transition

@mixin transition($properties: all, $durations: 0s, $timing-functions: ease, $delays: 0s) { ... }

Description

Applies transition rules.

Parameters

NameDescriptionTypeDefault value
$properties

Transition property(ies).

Listall
$durations

Transition duration(s).

List0s
$timing-functions

Transition timing function(s).

Listease
$delays

Transition delay(s).

List0s

Used by

animation

@mixin animation($names: none, $durations: 0s, $timing-functions: ease, $delays: 0s, $iteration-counts: 1, $directions: normal, $fill-modes: none, $play-states: running) { ... }

Description

Applies animation rules.

Parameters

NameDescriptionTypeDefault value
$names

Animation name(s).

Listnone
$durations

Animation duration(s).

List0s
$timing-functions

Animation timing function(s).

Listease
$delays

Animation delay(s).

List0s
$iteration-counts

Animation iteration count(s).

List1
$directions

Animation direction(s).

Listnormal
$fill-modes

Animation fill mode(s).

Listnone
$play-states

Animation play state(s).

Listrunning

pointable

@mixin pointable($enabled: true, $recursive: true, $forced: true) { ... }

Description

Enables/disables pointer events for target selector and all child selectors.

Parameters

NameDescriptionTypeDefault value
$enabled

Specifies whether element should have pointer events enabled.

Booleantrue
$recursive

Specifies whether child elements should also be applied.

Booleantrue
$forced

Specifies whether the behavior is tagged !important.

Booleantrue

visually-hidden

@mixin visually-hidden() { ... }

Description

Hides element but makes it accessible to screen readers.

Parameters

None.

visually-shown

@mixin visually-shown($position) { ... }

Description

Reverses the properties applied by visually-hidden.

Parameters

NameDescriptionTypeDefault value
$position

The position property to apply to the element.

String—

mask

@mixin mask() { ... }

Description

Applies mask to target selector.

Parameters

None.

Used by

placeholders

mask

%mask { ... }

Description

Applies mask to target selector.

Requires

media

variables

breakpoints

$breakpoints: (
  'mobile': (
    'min': 0px,
    'max': 639px
  ),
  'tablet': (
    'min': 640px,
    'max': 1024px
  ),
  'notebook': (
    'min': 1025px,
    'max': 1439px
  ),
  'desktop': (
    'min': 1440px,
    'max': 1919px
  ),
  'tv': (
    'min': 1920px,
    'max': 100000px
  )
);

Description

Media query breakpoints.

Used by

mixins

screen

@mixin screen($descriptors, $params: null) { ... }

Description

Media query mixin that translates a set of descriptors into rules that apply bounding restrictions to screens. This mixin supports 5 predefined screen types: 'mobile', tablet', 'notebook', 'desktop', 'tv' and 2 screen orientations: 'portrait' and 'landscape'.

Parameters

NameDescriptionTypeDefault value
$descriptors

List of strings formatted by either {base}{relational_operator}{%s_or_screen_type} or {orientation}. If no {base} is specified, width will be used. {%s} is also optional.

List—
$params

List of values applied in the same order as the descriptors for string replacement whenever %s is used.

Listnull

Example

@include screen('w<%s', 200px) { ... } // or
@include screen('<%s', 200px) { ... }  // or
@include screen('<', 200px) { ... }

// @media screen and (max-width: 199px) { ... }
@include screen('h>=tablet') { ... }

// @media screen and (min-height: 640px) { ... }
@include screen('w=tablet') { ... }

// @media screen and (min-width: 640px) and (max-width: 1023px) { ... }
@include screen('w>=%s' 'w<%s' 'h>', 200px 400px 150px) { ... }

// @media screen and (min-width: 200px) and (max-width: 399px) and (min-height: 151px) { ... }

Requires

Used by

image-map-item

@mixin image-map-item($path, $row-index, $col-index, $num-rows, $num-cols) { ... }

Description

Sets the background-size and background-position of a target element, one that is using an sprite map as its background, to the corresponding item on the sprite map.

Parameters

NameDescriptionTypeDefault value
$path

Path of sprite map.

String—
$row-index

0-based index of the row of the target item.

Number—
$col-index

0-based index of the column of the target item.

Number—
$num-rows

Total number of rows in the image map.

Number—
$num-cols

Total number of columns in the image map.

Number—

Used by

image-map

@mixin image-map($path, $map: null) { ... }

Description

Auto generates a list of class names of the target selector, where each class represents a sprite as provided by the sprite map.

Parameters

NameDescriptionTypeDefault value
$path

Path of sprite map.

String—
$map

List (1D or 2D) of class names. The position of each list item directly corresponds to the sprite position on the sprite map.

Listnull

Requires

TODO's

  • This mixin is quite slow in performance due to the nested loop.

portrait

@mixin portrait() { ... }

Description

Applies styles for portrait screens.

Parameters

None.

Requires

landscape

@mixin landscape() { ... }

Description

Applies styles for landscape screens.

Parameters

None.

Requires

mobile

@mixin mobile() { ... }

Description

Applies styles for mobile screens.

Parameters

None.

Requires

tablet

@mixin tablet() { ... }

Description

Applies styles for tablet screens.

Parameters

None.

Requires

notebook

@mixin notebook() { ... }

Description

Applies styles for notebook screens.

Parameters

None.

Requires

desktop

@mixin desktop() { ... }

Description

Applies styles for desktop screens.

Parameters

None.

Requires

tv

@mixin tv() { ... }

Description

Applies styles for TV screens.

Parameters

None.

Requires

gtmobile

@mixin gtmobile() { ... }

Description

Applies styles for screens bigger than mobile devices.

Parameters

None.

Requires

gttablet

@mixin gttablet() { ... }

Description

Applies styles for screens bigger than tablet devices.

Parameters

None.

Requires

gtnotebook

@mixin gtnotebook() { ... }

Description

Applies styles for screens bigger than notebook devices.

Parameters

None.

Requires

gtdesktop

@mixin gtdesktop() { ... }

Description

Applies styles for screens bigger than desktop devices.

Parameters

None.

Requires

gttv

@mixin gttv() { ... }

Description

Applies styles for screens bigger than TV devices.

Parameters

None.

Requires

gtemobile

@mixin gtemobile() { ... }

Description

Applies styles for screens bigger than or equal to mobile devices.

Parameters

None.

Requires

gtetablet

@mixin gtetablet() { ... }

Description

Applies styles for screens bigger than or equal to tablet devices.

Parameters

None.

Requires

gtenotebook

@mixin gtenotebook() { ... }

Description

Applies styles for screens bigger than or equal to notebook devices.

Parameters

None.

Requires

gtedesktop

@mixin gtedesktop() { ... }

Description

Applies styles for screens bigger than or equal to desktop devices.

Parameters

None.

Requires

gtetv

@mixin gtetv() { ... }

Description

Applies styles for screens bigger than or equal to TV devices.

Parameters

None.

Requires

ltemobile

@mixin ltemobile() { ... }

Description

Applies styles for screens smaller than or equal to mobile devices.

Parameters

None.

Requires

ltetablet

@mixin ltetablet() { ... }

Description

Applies styles for screens smaller than or equal to tablet devices.

Parameters

None.

Requires

ltenotebook

@mixin ltenotebook() { ... }

Description

Applies styles for screens smaller than or equal to notebook devices.

Parameters

None.

Requires

ltedesktop

@mixin ltedesktop() { ... }

Description

Applies styles for screens smaller than or equal to desktop devices.

Parameters

None.

Requires

ltetv

@mixin ltetv() { ... }

Description

Applies styles for screens smaller than or equal to TV devices.

Parameters

None.

Requires

ltmobile

@mixin ltmobile() { ... }

Description

Applies styles for screens smaller than mobile devices.

Parameters

None.

Requires

lttablet

@mixin lttablet() { ... }

Description

Applies styles for screens smaller than tablet devices.

Parameters

None.

Requires

ltnotebook

@mixin ltnotebook() { ... }

Description

Applies styles for screens smaller than notebook devices.

Parameters

None.

Requires

ltdesktop

@mixin ltdesktop() { ... }

Description

Applies styles for screens smaller than desktop devices.

Parameters

None.

Requires

lttv

@mixin lttv() { ... }

Description

Applies styles for screens smaller than TV devices.

Parameters

None.

Requires

palette

functions

random-color

@function random-color($red: true, $green: true, $blue: true, $alpha: false) { ... }

Description

Retuns a random color based on the specified parameters.

Parameters

NameDescriptionTypeDefault value
$red

A boolean value here indicates whether r in rgba is randomized (false will result in r of 0). Otherwise the number will be used as the r value.

Number/booleantrue
$green

A boolean value here indicates whether g in rgba is randomized (false will result in g of 0). Otherwise the number will be used as the g value.

Number/booleantrue
$blue

A boolean value here indicates whether b in rgba is randomized (false will result in b of 0). Otherwise the number will be used as the b value.

Number/booleantrue
$alpha

A boolean value here indicates whether a in rgba is randomized (false will result in a of 0). Otherwise the number will be used as the a value.

Number/booleanfalse

Returns

Color —

A random color in the format rgba(rr, gg, bb, aa).

random-greyscale

@function random-greyscale($min: 0, $max: 255, $alpha: false) { ... }

Description

Returns a random greyscale color based on the specified parameters.

Parameters

NameDescriptionTypeDefault value
$min

Minimum value for the greyscale color, within the range 0-255.

Number0
$max

Maximum value for the greyscale color, within the range 0-255.

Number255
$alpha

A boolean value here indicates whether a in rgba is randomized (false will result in a of 0). Otherwise the number will be used as the a value.

Number/booleanfalse

Returns

Color —

A random greyscale color in the format rgba(rr, gg, bb, aa).

resets

mixins

normalize

@mixin normalize($is-root: true) { ... }

Description

Normalizes all the styles of child elements. Can be applied to the root or a specific element.

Parameters

NameDescriptionTypeDefault value
$is-root

Specifies whether the reset applies to the root context.

Booleantrue

selectors

functions

resolve-selectors

@function resolve-selectors($list, $suffix: null, $prefix: null) { ... }

Description

Resolves a list of selectors by appending the specified args to each selector in the list. Returns a string containing all the selectors separated by ,.

Parameters

NameDescriptionTypeDefault value
$list

List of selectors to resolve.

List—
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of resolved selectors separated by comma.

Used by

select-texts

@function select-texts($suffix: null, $prefix: null) { ... }

Description

Selector for text elements. Each element is meant to contain text only. For optimal results, do not nest label elements. For italics, use <i>, and for bold, use <b>. <a> is not treated as a label element and should only be used to make a nested element a hyperlink.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of text selectors separated by comma.

Requires

Used by

texts

@function texts() { ... }

Parameters

None.

Requires

See

select-headings

@function select-headings($suffix: null, $prefix: null) { ... }

Description

Selector for heading elements.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of heading selectors separated by comma.

Requires

Used by

headings

@function headings() { ... }

Parameters

None.

Requires

See

select-icons

@function select-icons($suffix: null, $prefix: null) { ... }

Description

Selector for icon elements.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of icon selectors separated by comma.

Requires

Used by

icons

@function icons() { ... }

Parameters

None.

Requires

See

select-statics

@function select-statics($suffix: null, $prefix: null) { ... }

Description

Selector for static elements.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of static selectors separated by comma.

Requires

Used by

statics

@function statics() { ... }

Parameters

None.

Requires

See

select-buttons

@function select-buttons($suffix: null, $prefix: null) { ... }

Description

Selector for button elements.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of button selectors separated by comma.

Requires

Used by

buttons

@function buttons() { ... }

Parameters

None.

Requires

See

select-links

@function select-links($suffix: null, $prefix: null) { ... }

Description

Selector for hyperlinks.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of link selectors separated by comma.

Requires

Used by

links

@function links() { ... }

Parameters

None.

Requires

See

select-textfields

@function select-textfields($suffix: null, $prefix: null) { ... }

Description

Selector for textfield input elements.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of textfield selectors separated by comma.

Requires

Used by

textfields

@function textfields() { ... }

Parameters

None.

Requires

See

select-boxes

@function select-boxes($suffix: null, $prefix: null) { ... }

Description

Selector for box elements.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of box selectors separated by comma.

Requires

Used by

boxes

@function boxes() { ... }

Parameters

None.

Requires

See

select-lists

@function select-lists($suffix: null, $prefix: null) { ... }

Description

Selector for list elements.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of list selectors separated by comma.

Requires

Used by

lists

@function lists() { ... }

Parameters

None.

Requires

See

select-list-items

@function select-list-items($suffix: null, $prefix: null) { ... }

Description

Selector for list items.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of list item selectors separated by comma.

Requires

Used by

list-items

@function list-items() { ... }

Parameters

None.

Requires

See

select-images

@function select-images($suffix: null, $prefix: null) { ... }

Description

Selector for images.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of list item selectors separated by comma.

Requires

Used by

images

@function images() { ... }

Parameters

None.

Requires

See

select-videos

@function select-videos($suffix: null, $prefix: null) { ... }

Description

Selector for videos.

Parameters

NameDescriptionTypeDefault value
$suffix

Suffix to append to each selector.

Stringnull
$prefix

Prefix to prepend to each selector.

Stringnull

Returns

String —

String of list item selectors separated by comma.

Requires

Used by

videos

@function videos() { ... }

Parameters

None.

Requires

See

mixins

each-child

@mixin each-child($max: 10) { ... }

Description

Selects each of the containing element based on the child index.

Parameters

NameDescriptionTypeDefault value
$max

Max child index to iterate to.

Number10

each-of-type

@mixin each-of-type($max: 10) { ... }

Description

Selects each of the containing element based on the child index of this specific element type.

Parameters

NameDescriptionTypeDefault value
$max

Max child index to iterate to.

Number10

each-but-last-child

@mixin each-but-last-child() { ... }

Description

Selects every child element except for the last one.

Parameters

None.

each-but-first-child

@mixin each-but-first-child() { ... }

Description

Selects every child element except for the first one.

Parameters

None.

hover-without-touch

@mixin hover-without-touch() { ... }

Description

Selects the parent element on hover when HTML has no .touch class.

Parameters

None.

Used by

hwot

@mixin hwot() { ... }

Description

Selects the parent element on hover when HTML has no .touch class.

Parameters

None.

Requires

typography

variables

font-weights

$font-weights: (
  'thin': 100,
  'extra-light': 200,
  'light': 300,
  'normal': 400,
  'medium': 500,
  'semi-bold': 600,
  'bold': 700,
  'extra-bold': 800,
  'black': 900
);

Description

Supported font weight aliases.

Used by

functions

get-font-format

@function get-font-format($path) { ... }

Description

Infers the font format from a font file extension. Supported extensions include: eot, woff2, woff, ttf, otf, svg.

Parameters

NameDescriptionTypeDefault value
$path

The path of the font file.

String—

Returns

String —

The font format. Defaults to opentype if unable to infer.

Requires

Used by

get-font-style

@function get-font-style($path) { ... }

Description

Infers the font style from a font file path. Supports italic and oblique.

Parameters

NameDescriptionTypeDefault value
$path

Path of the font file.

String—

Returns

String —

The font style of the font file. Defaults to normal if unable to infer.

Used by

get-font-weight

@function get-font-weight($path) { ... }

Description

Infers the font weight from a font file path.

Parameters

NameDescriptionTypeDefault value
$path

Path of the font file.

String—

Returns

Number —

The font weight of the font file. Defaults to normal (400).

Requires

Used by

mixins

font-face

@mixin font-face($family, $src, $weight: null, $style: null, $display: auto) { ... }

Description

Defines the @font-face rule.

Parameters

NameDescriptionTypeDefault value
$family

The font-family property.

String—
$src

The url property.

String—
$weight

The font-weight property.

String/numbernull
$style

The font-style property.

Stringnull
$display

The font-display property.

Stringauto

Requires

utils

functions

to-number

@function to-number($value) { ... }

Description

Converts a string to a number with/without a unit, where applicable. Any invalid inputs such as a non-number string or an unrecognized unit will throw an error. Passing a number into this function does nothing.

Parameters

NameDescriptionTypeDefault value
$value

Value to be converted.

String/number—

Returns

Number —

The converted number value.

Example

to-number('6') // 6
to-number('6px') // 6px

Throws

  • Value must be a number or a string

Requires

Used by

to-unit

@function to-unit($value, $unit) { ... }

Description

Converts a number without unit to a number with the desired unit. If the desired unit is an unrecognized unit, this function will throw an error.

Parameters

NameDescriptionTypeDefault value
$value

The number value to convert.

Number—
$unit

Desired unit after the conversion.

String—

Returns

Number —

The converted number value with the desired unit.

Example

to-unit(6, 'px') // 6px

Throws

  • Invalid unit: #{$unit}

Used by

strip-unit

@function strip-unit($number) { ... }

Description

Removes the unit from a number and returns it.

Parameters

NameDescriptionTypeDefault value
$number

Number to remove unit from.

Number—

Returns

Number —

The number value without its original unit.

Throws

  • Invalid input: #{$number}

ends-with

@function ends-with($string, $substring) { ... }

Description

Checks if a string ends with a substring.

Parameters

NameDescriptionTypeDefault value
$string

String to check.

String—
$substring

Substring to check against.

String—

Returns

Boolean —

true if string contains the substring, false otherwise.

Used by