Mixins

absolute

@mixin absolute($top: false, $right: false, $bottom: false, $left: false)

Variable	Type	Default	Description	Required
$top	unit	-	Top position	-
$right	unit	-	Right position	-
$bottom	unit	-	Bottom position	-
$left	unit	-	Left position	-

Default

@include absolute();

position: absolute;

With Parameters

@include absolute(4rem, 3rem, 2rem, 1rem);

position: absolute;
top: 4rem;
right: 3rem;
bottom: 2rem;
left: 1rem;

@include absolute(4rem, 3rem);

position: absolute;
top: 4rem;
right: 3rem;

block

Source →

@mixin block($width, $height);

Variable	Type	Default	Description	Required
$width	unit	-	Width value	-
$height	unit	-	Height value	-

Default

@include block();

display: block;

With Parameters

@include block(40rem, 100px);

display: block;
width: 40rem;
height: 100px;

bookends

Source →

@mixin bookends($value: '-', $margin: .5em, $font: false, $color: false);

Variable	Type	Default	Description	Required
$value	string, keyword	'-'	Content	-
$margin	unit	0.5em	Left and right margin	-
$font	font	-	Font family	-
$color	color	-	Font color	-

Default

@include bookends('-', .5em);

&:before {
    content: '-';
    margin-right: .5em;
}
&:after {
    content: '-';
    margin-left: .5em;
}

With Parameters

@include bookends('~', 1, $color: red);

&:before {
    content: '~';
    margin-right: 1rem;
    color: red;
}
&:after {
    content: '~';
    margin-left: 1rem;
    color: red;
}

centeredBlock

Source →

@mixin centeredBlock($maxWidth: false, $margin: false)

Variable	Type	Default	Description	Required
$maxWidth	unit	-	Max width	-
$margin	unit	-	Bottom margin	-

Default

@include centeredBlock();

display: block;
margin-left: auto;
margin-right: auto;

With Parameters

@include centeredBlock(80rem, 2rem);

display: block;
margin-left: auto;
margin-right: auto;
max-width: 80rem;
margin-bottom: 2rem;

circle

Source →

@mixin circle($diameter, $crop: false, $display: block)

Variable	Type	Default	Description	Required
$diameter	integer	-	Diameter of element	-
$crop	unit	-	Overflow hidden true/false	-
$display	string, keyword	block	Element display property	-

Default

@include circle(.5);

background-clip: border-box;
border-radius: 0.25rem;
height: 0.5rem;
width: 0.5rem;
display: block;

With Parameters

@include circle(.5, true);

background-clip: border-box;
border-radius: 0.25rem;
height: 0.5rem;
width: 0.5rem;
overflow: hidden;
display: block;

@include circle(.5, $display: inline);

background-clip: border-box;
border-radius: 0.25rem;
height: 0.5rem;
width: 0.5rem;
display: inline-block;

clearfix

Source →

Default

@include clearfix();

&:after {
    clear: both;
    content: '';
    display: block;
}

column

Source →

@mixin column($keyword: false, $share: false, $columns: $gridColumns, $margin: $gridMargin)

Variable	Type	Default	Description	Required
spaced	keyword	-	Set margin between columns	-
$share	percentage	-	Column span	-
$columns	integer	$gridColumns = 8	Number of columns	-
$margin	percentage	$gridMargin = 5%	Left margin	-

Default

@include column();

float: left;
width: 100%;

With Parameters

@include column(40%);

float: left;
width: 40%;

@include column(spaced, 1, 4, 2%);

float: left;
margin-left: 2%;
width: 25%;

@include column(1, 2);

float: left;
width: 50%;

columnModify

Source →

@mixin columnModify($keyword: false, $share: false, $columns: $gridColumns, $margin: $gridMargin)

Variable	Type	Default	Description	Required
spaced	keyword	-	Set margin between columns	-
$share	percentage	-	Column span	✔
$columns	integer	$gridColumns = 8	Number of columns	-
$margin	percentage	$gridMargin = 5%	Left margin	-

Default

@include columnModify(60%);

width: 60%;

With Parameters

@include columnModify(spaced, 1, 4, 5%);

margin-left: 5%;
width: -20%;

@include columnModify(1, 5);

width: 20%;

columnOffset

Source →

@mixin columnOffset($keyword: false, $share: false, $columns: $gridColumns, $margin: ($gridMargin / 2))

Variable	Type	Default	Description	Required
spaced	keyword	-	Set margin between columns	-
$share	integer	-	Column span	✔
$columns	integer	$gridColumns = 8	Number of columns	-
$margin	percentage	($gridMargin / 2)	Left margin	-

Default

@include columnOffset(spaced, 3, 4, 5%);

margin-left: 85%;

With Parameters

@include columnOffset(2, 5);

margin-left: 40%;

columnPull

Source →

@mixin columnPull($share, $columns: $gridColumns)

Variable	Type	Default	Description	Required
$share	integer	-	Column span	✔
$columns	integer	$gridColumns = 8	Number of columns	-

With Parameters

@include columnPull(1, 2);

position: relative;
right: 50%;

columnPush

Source →

@mixin columnPush($share, $columns: $gridColumns)

Variable	Type	Default	Description	Required
$share	integer	-	Column span	✔
$columns	integer	$gridColumns = 8	Number of columns	-

Default

@include columnPush(1, 2);

left: 50%;
position: relative;

columnReset

Source →

@mixin columnReset($resetMargin: false)

Variable	Type	Default	Description	Required
$resetMargin	boolean	false	Reset left margin	-

Default

@include columnReset();

float: none;
width: auto;

With Parameters

@include columnReset(true);

float: none;
width: auto;
margin-left: 0;

ellipsis

Source →

@mixin ellipsis(maxWidth = false)

Variable	Type	Default	Description	Required
$maxWidth	integer	-	Maximum width for element	-

Default

@include ellipsis();

overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;

With Parameters

@include ellipsis(10);

overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 10rem;

fixed

Source →

@mixin fixed($top: false, $right: false, $bottom: false, $left: false);

Variable	Type	Default	Description	Required
$top	unit	-	Top position	-
$right	unit	-	Right position	-
$bottom	unit	-	Bottom position	-
$left	unit	-	Left position	-

Default

@include fixed();

position: fixed;

With Parameters

@include fixed($bottom: 3rem, $top: 4rem);

position: fixed;
top: 4rem;
bottom: 3rem;

flex

Source →

@mixin flex($grow: 0, $shrink: 0, $basis: auto)

Variable	Type	Default	Description	Required
$grow	integer	0	Flex grow	-
$shrink	integer	0	Flex shrink	-
$basis	keyword	auto	Flex-basis	-

Default

@include flex();

flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;

With Parameters

@include flex(1, 2);

flex-grow: 1;
flex-shrink: 2;
flex-basis: auto;

flexContainer

Source →

@mixin flexContainer($direction: row, $wrap: nowrap, $justify: flex-start, $align: stretch, $alignContent: stretch)

Variable	Type	Default	Description	Required
$direction	keyword	row	Flex direction	-
$wrap	keyword	nowrap	Flex wrap	-
$justify	keyword	flex-start	Justify content	-
$align	keyword	stretch	Align items	-
$alignContent	keyword	stretch	Align content	-

Default

@include flexContainer();

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;

With Parameters

@include flexContainer(column, wrap, $alignContent: start);

display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: start;

font

Source →

@mixin font($family: $baseFont, $size, $weight, $lineHeight, $style, $spacing)

Variable	Type	Default	Description	Required
$family	font	$baseFont = Arial, Helvetica, sans-serif	Font family name	-
$size	integer	-	Font size	-
$weight	keyword	-	Font weight	-
$lineHeight	integer	-	Line height	-
$style	keyword	-	Font style	-
$spacing	integer	-	Letter spacing	-

With Parameters

@include font('Times New Roman', 1.4, bold, 1.5, italic, 0.1);

font-family: 'Times New Roman';
font-size: 1.4rem;
font-weight: bold;
line-height: 1.5em;
letter-spacing: 0.1rem;

heading

Source →

@mixin heading($fontSize: false)

Variable	Type	Default	Description	Required
$fontSize	unit	-	Font size	-

With Parameters

@include heading(4rem);

color: inherit;
font-family: 'Tahoma, Geneva, sans-serif';
font-weight: bold;
font-size: 4rem;
line-height: 1.4em;
margin-bottom: 2rem;
small {
    font-weight: normal;
}

hideText

Source →

@include hideText();

overflow: hidden;
text-indent: 110%;
white-space: nowrap;

icon

Source →

@mixin icon($icon, $size: inherit, $rotate: false, $weight: normal, $lineHeight: 0, $sharpen: true, $font: $iconFont)

Variable	Type	Default	Description	Required
$icon	unicode	-	Font icon variable	✔
$size	unit	inherit	Font size	-
$rotate	unit	-	Degree/angle to rotate icon	-
$weight	unit	normal	Font weight	-
$lineHeight	unit	0	Line height	-
$sharpen	boolean	true	Sharpen font	-
$font	font	$iconFont	Font family name	-

.block {
    &::after {
      @include icon(\e901);
    }
}

.block::after {
    content: '\e901';
    font-family: 'Open Sans' sans-serif;
    font-size: inherit;
    font-weight: normal;
    line-height: 0;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

iconModify

Source →

@mixin iconModify($icon: false, $size: false, $rotate: false, $weight: false, $sharpen: false)

Variable	Type	Default	Description	Required
$icon	unicode	-	Font icon variable	✔
$size	unit	-	Font size	-
$rotate	unit	-	Degree/angle to rotate icon	-
$weight	unit	-	Font weight	-
$sharpen	boolean	-	Sharpen font	-

.block {
    &::after {
       @include iconModify(\e901);
    }
}

.block::after {
    content: '\e901';
}

inlineBlock

Source →

@mixin inlineBlock($width, $height)

Variable	Type	Default	Description	Required
$width	unit	-	Element width	-
$height	unit	-	Element height	-

Default

@include inlineBlock();

display: inline-block;

With Parameters

@include inlineBlock(40rem, 30rem);

display: inline-block;
width: 40rem;
height: 30rem;

@include inlineBlock($height: 100px);

display: inline-block;
height: 100px;

inlineColumn

Source →

@mixin inlineColumn($keyword, $share, $columns: $gridColumns, $margin: $gridMargin, $spaceless: $gridSpaceless)

Variable	Type	Default	Description	Required
spaced	keyword	-	Set margin between columns	-
$share	integer	-	Column span	✔
$columns	integer	$gridColumns = 8	Number of columns	-
$margin	unit	$gridMargin = 5%	If spaced, set margin left	-
$gridSpaceless	boolean	$gridMargin = 5%	Add whitespace hack	-

Default

@include inlineColumn(spaced, 1, 4, 4%);

display: inline-block;
vertical-align: top;
margin-left: 4%;
width: 21%;
letter-spacing: normal;

@include inlineColumn(1, 5);

display: inline-block;
vertical-align: top;
width: 20%;

inlineRow

Source →

@mixin inlineRow($margin: $gridMargin, $spaceless: $gridSpaceless)

Variable	Type	Default	Description	Required
$margin	percentage	$gridMargin = 5%	Left margin	-
$gridSpaceless	boolean	$gridMargin = 5%	Add whitespace hack	-

Default

@include inlineRow(4%, false);

margin-left: -4%;
max-width: 104%;
letter-spacing: -.32em;

@include inlineRow(4%, true);

margin-left: -4%;
max-width: 104%;

loadFont

Source →

@mixin loadFont(name, $file: $name, $weight: normal, $style: normal)

Variable	Type	Default	Description	Required
name	string	-	Font family rules	✔
$file	file	$name	Font file	-
$weight	integer, keyword	normal	Font weight	-
$style	keyword	normal	Font style	-

Default

@include loadFont(icomoon, $weight: 500);

@font-face {
    font-family: icomoon;
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/icomoon.woff2'),
        url('../fonts/icomoon.woff'),
        url('../fonts/icomoon.ttf');
}

noClear

Source →

Default

@mixin noClear();

&::-ms-clear {
    display: none
}
&::-webkit-search-cancel-button {
    -webkit-appearance: none
}

placeholder

Source →

@mixin placeholder($color: $inputPlaceholderColor)

Variable	Type	Default	Description	Required
$color	color	$inputPlaceholderColor = lighten($inputColor, 40%)	Placeholder color	-

Default

@include placeholder();

&:-moz-placeholder {
    color: #bfbfbf
}
&::-moz-placeholder {
    color: #bfbfbf
}
&:-ms-input-placeholder {
    color: #bfbfbf
}
&::-webkit-input-placeholder {
    color: #bfbfbf
}

With Parameters

@include placeholder(#fff);

&:-moz-placeholder {
    color: #fff
}
&::-moz-placeholder {
    color: #fff
}
&:-ms-input-placeholder {
    color: #fff
}
&::-webkit-input-placeholder {
    color: #fff
}

prefix

Source →

@mixin prefix($value: '-', $margin: .5em, $font: false, $color: false)

Variable	Type	Default	Description	Required
$value	string, keyword	'-'	Content	-
$margin	unit	.5em	Left or right margin	-
$font	font	false	Font family	-
$color	color	false	Font color	-

Default

@include prefix();

&:before {
    content: '-';
    margin-right: .5em;
}

With Parameters

@include prefix('~', 1rem, $color: blue);

&:before {
    content: '~';
    margin-right: 1rem;
    color: blue;
}

ratio

Source →

@mixin ratio($keyword: false, $ratio: 16 / 9)

Variable	Type	Default	Description	Required
embed	keyword	-	Embed	-
$ratio	unit	(16/9)	Ratio	✔

With Parameters

@include ratio(4/3);

display: block;
height: 0;
padding-top: 75%;

@include ratio(embed, 4/3);

overflow: hidden;
position: relative;
&:before {
    content: '';
    display: block;
    height: 0;
    padding-top: 75%
}

resizable

Source →

@mixin resizable($value: both)

Variable	Type	Default	Description	Required
$value	keyword	-	Resize value	✔

Default

@include resizable();

overflow: hidden;
resize: both;

With Parameters

@include resizable(vertical);

overflow: hidden;
resize: vertical;

rounded

Source →

@mixin rounded($keyword: '', $value: $defaultRadius)

Variable	Type	Default	Description	Required
$keyword	keyword	-	Top, right, bottom, left	-
$value	unit	$defaultRadius = 3px	Size of radius	✔

With Parameters

@include rounded(5px);

border-radius: 5px;

@include rounded(top, 4px);

border-top-left-radius: 4px;
border-top-right-radius: 4px;

@include rounded(left, 2px);

border-top-left-radius: 2px;
border-bottom-left-radius: 2px;

row

Source →

@mixin row($margin: $gridMargin)

Variable	Type	Default	Description	Required
$margin	percentage	$gridMargin = 5%	Left margin	-

Default

@include row();

margin-left: -5%;
max-width: 105%;
&:after {
    clear: both;
    content: '';
    display: block;
}

With Parameters

@include row(10%);

margin-left: -10%;
max-width: 110%;
&:after {
    clear: both;
    content: '';
    display: block;
}

rowModify

Source →

@mixin rowModify($margin: $gridMargin)

Variable	Type	Default	Description	Required
$margin	percentage	$gridMargin = 5%	Left margin	✔

With Parameters

@include rowModify(4%);

margin-left: -4%;
max-width: 104%;

rowReset

Source →

@include rowReset();

margin-left: 0;
max-width: none;

selection

Source →

@mixin selection($color: $selectionColor, $background: $selectionBackground)

Variable	Type	Default	Description	Required
$color	color	$selectionColor = $white	Selection color	-
$background	color, string, keyword	$selectionBackground = $linkColor	Selection background	-

Default

@include selection();

&::selection {
    background: #349bb9;
    color: #fff;
    text-shadow: none
}

With Parameters

@include selection(#000, #fff);

&::selection {
    background: #fff;
    color: #000;
    text-shadow: none
}

size

Source →

@mixin size($width, $height: false)

Variable	Type	Default	Description	Required
$width	unit	-	Width or Width/Height	✔
$height	unit	-	Height	-

Default

@include size(4rem);

width: 4rem;
height: 4rem;

@include size(4rem, 250px);

width: 4rem;
height: 250px;

spacedBlock

Source →

@mixin spacedBlock($margin: $blockMarginBottom, $width: false, $height: false)

Variable	Type	Default	Description	Required
$margin	unit	$blockMarginBottom = 4	Bottom margin	-
$width	unit	-	Width	-
$height	unit	-	Height	-

Default

@include spacedBlock();

display: block;
margin-bottom: 2rem; /* $blockMarginBottom */

With Parameters

@include spacedBlock(4rem);

display: block;
margin-bottom: 4rem;

@include spacedBlock(4rem, 20rem, 100px);

display: block;
margin-bottom: 4rem;
width: 20rem;
height: 100px;

suffix

Source →

@mixin suffix($value: '-', $margin: .5em, $font: false, $color: false)

Variable	Type	Default	Description	Required
$value	string, keyword	'-'	Content	-
$margin	unit	.5em	Left or right margin	-
$font	font	-	Font family	-
$color	color	-	Font color	-

Default

@include suffix();

&:before {
    content: '-';
    margin-left: .5em;
}

With Parameters

@include suffix('~', 1em, $color: blue);

&:before {
    content: '~';
    margin-left: em;
    color: blue;
}

textSharpen

Source →

Default

@mixin textSharpen()

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

triangle

Source →

@mixin triangle($keyword, $color: $darkGray, $size: 5px, $width: $size)

Variable	Type	Default	Description	Required
$keyword	string, keyword	'-'	Direction of triangle	-
$color	color	$darkGray	Hex value or color var	-
$size	unit	5px	Size	-
$width	unit	$size	Width	-

With Parameters

@include triangle(up);

content: '';
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #737373;

@include triangle(right, $color: blue, $size: 3px);

content: '';
height: 0;
width: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid blue;

@include triangle(left, red, $width: 10px);

content: '';
height: 0;
width: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 5px solid red;

# Mixins

# absolute

# block

# bookends

# centeredBlock

# circle

# clearfix

# column

# columnModify

# columnOffset

# columnPull

# columnPush

# columnReset

# ellipsis

# fixed

# flex

# flexContainer

# font

# heading

# hideText

# icon

# iconModify

# inlineBlock

# inlineColumn

# inlineRow

# loadFont

# noClear

# placeholder

# prefix

# ratio

# resizable

# rounded

# row

# rowModify

# rowReset

# selection

# size

# spacedBlock

# suffix

# textSharpen

# triangle

Mixins

absolute

block

bookends

centeredBlock

circle

clearfix

column

columnModify

columnOffset

columnPull

columnPush

columnReset

ellipsis

fixed

flex

flexContainer

font

heading

hideText

icon

iconModify

inlineBlock

inlineColumn

inlineRow

loadFont

noClear

placeholder

prefix

ratio

resizable

rounded

row

rowModify

rowReset

selection

size

spacedBlock

suffix

textSharpen

triangle