Mixins

A set of helpful mixins for setting up breakpoints, font sizes, line heights, background colors with opacity and more.


Overview

Below is a list of all the current mixins which are stored in _mixins.scss.

Base Mixins
Mixin Purpose Example usage Outcome
@include breakpoint(x) Apply a breakpoint for a particular device. Accepts values m, l and xl (m: medium, l: large, xl: extra large) .box { @include breakpoint(m) { ... } } Applies styles to .box for medium devices and up
@include font-size(number) Applies font size in rem units with a px fallback @include font-size(16) Applies font size of 1rem with 16px fallback
@include line-height(number) Applies line height in rem units with a px fallback @include line-height(22) Applies line height of 1.375rem with 22px fallback
@include background-alpha(hex, percentage) Applies a background color with opacity @include background-alpha(#000, 50%) Applies a background color of black with opacity set to 50%
@include animation(time) Applies animation speed @include animation(2s) Animation will run for 2 seconds
@include arrow(size, color, direction) Applies an arrow @include animation(10px, #000, right) Will apply a black right arrow to an element with a pixel size of 10px (note: element must be block and have a width and height for this to work)

Animations

Check out the cool animations to give your website that pop!