Mixins

A set of helpful mixins for setting font size, line heights, rounded borders, rotating elements, SVG backgrounds with PNG fallbacks, background colors with opacity and more.


Overview

All Mixins are stored within _mixins.less.

Below is a list of the current mixins.

Base Mixins
Mixin Purpose Example usage Outcome
.font-size(number) Applies font size in rem units with a px fallback .font-size(16) Applies font size of 1rem with 16px fallback
.line-height(number) Applies line height in rem units with a px fallback .line-height(22) Applies line height of 1.375rem with 22px fallback
.border-radius(number px/%) Applies rounded corners to an element and includes all browser prefixes .border-radius(3px) Applies a border radius of 3px
.rotate(number) Applies rotate transform to an element and includes all browser prefixes .rotate(45) Rotates an element 45 degrees clockwise (note you can use negative values to rotate anti-clockwise)
.bg-svg("svg", "png", xPositon percentage, yPosition percentage, repeat mode) Applies an SVG background image with PNG fallback (needs modernizr to work 100%) .bg-svg("img/logo.svg", "img/logo.png", 50%, 50%, no-repeat) Applies a background image of logo.svg with a fallback of logo.png. The background x position is set to 50% and the y position to 50% with no repeat
.bg-rgba(hex, percentage) Applies a background color with opacity .bg-rgba(#000, 50%) Applies a background color of black with opacity set to 50%
.opacity(percentage) Applies opacity .opacity(50%) Applies an opacity of 50%
.animate(time) Applies animation speed .animate(2s) Animation will run for 2 seconds
.animate-delay(time) Applies animation delay .animate-delay(2s) Animation is delayed for 2 seconds until it runs
.transition(time) Applies CSS transition .transition(0.3s) CSS transition will run for 0.3 seconds
.transition-delay(time) Applies CSS transition delay .transition-delay(0.3s) CSS transition is delayed for 0.3 seconds
.svg-fill(svg-src, color) Embeds the SVG image into CSS using data-uri(); .svg-fill("img/twitter.svg", "#f30"); Original SVG is dark grey. New SVG will now render in orange:

Animations

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