Ultimate Collection of Less Mixins (v2)

This freshly-updated, improved, and fully-customizable collection of mixins for Less will transform your CSS into a streamlined, efficient, quick, organized, and browser-compatible framework.

CSS has long been the binding keystone between a successful marriage of good design with good development to produce perfect user experiences. Less (an outstanding CSS pre-processor) has taken that bond to new levels. Through my experience with Less, I have created a comprehensive collection of mixins that fully leverage CSS3 and all the latest best practices. My hope is that they save you as much time and energy as they already have for me! The collection is delivered as a .Less file. Please see the change log below for all the newest corrections and additions.

The following is included in this collection:

Global Variable Definitions

Base Font Size & Line-Height
Base Widths
Base Color Library

Examples

@font-size: 100%; /* Global Font-Size */
@line-height: 1.5; /* Global Line-Height */
@max-width: 1024px; /* Global Max-Width */
@min-width: 300px; /* Global Min-Width */
@color: #2d2d2d; /* Global default color */
@colorWhite: #fff; /* Pure White */
@colorOffWhite: #f9f9f9; /* Off-White */
@colorXLightGray: #eee; /* Extra Light Gray */
@colorLightGray: #ccc; /* Light Gray */
@colorMediumGray: #999; /* Medium Gray */
@colorDarkGray: #505050; /* Dark Gray */
@colorXDarkGray: #2d2d2d; /* Extra Dark Gray */
@colorNearBlack: #0a0a0a; /* Near Black */
@colorBlack: #000; /* Pure Black */
@colorPrimary: #3c9a6b; /* Global Primary Color */
@colorSecondary: #68c597; /* Global Secondary Color */
@colorInfo: #5dabdd; /* Global Info Color */
@colorError: #cf5151; /* Global Error Color */
@colorWarning: #e39e00; /* Global Warning Color */
@colorConfirmation: #8fd1af; /* Global Confirmation Color */
@colorHelp: #a373c5; /* Global Help Color */
@colorNotation: #e6cb2d; /* Global Notation Color */
@colorDebugEmpty: #ffda00; /* Global Debug Color */
@colorDebugDeprecated: #ff0000; /* Global Debug Deprecated Color */
@colorDebugProposedDeprecated: #33ff00; /* Global Debug Deprecated Color */
@colorLink: @colorPrimary; /* Global Link Color */
@colorHover: lighten(@colorPrimary, 15%); /* Global Hover Color */
@colorActive: @colorSecondary; /* Global Active Color */
@colorFocus: darken(@colorSecondary, 5%); /* Global Focus Color */

Text Manipulations

Font Sizing Updated
Font Families & Styles Updated
Text Shadow
Font Smoothing
Text Overflow
Input Placeholder Text
Text Selection Prevention Updated
Whitespace Handling
Word Wrap
Hyphenation
List Reset

Examples

/* Defines an easy to use variable font-size system.
.font-size(1.2);
/* Defines an easy to use pixel-based font-size system.
.font-size-px(14);
/* Allows for a quick & easy insert of a font-family and its accompanying set of characteristics. */
.font('Roboto', 1.3, normal, 700, normal, uppercase);
/* Allows for a quick & easy insert of a monospaced font-family and its accompanying set of characteristics. */
.font-code(monospace, normal, 1, normal, none, 400);
/* Defines the text-shadow applied to text. */
.text-shadow(none);
.text-shadow(0 1px 2px fade(@colorBlack, 25%));
/* Global insert of font-smoothing. */
.font-smoothing;
/* Defines the text-overflow of longer blocks of text. */
.text-overflow;
/* Quick & easy styling of the inline placeholder text for your input elements. */
.placeholder-text(@colorLightGray, bold);
/* Prevents mouse clicks & drags from selecting a text on interactive elements like buttons. */
.no-select;
/* Defines how text wrapping is handled inside an element. */
.white-space(nowrap);
/* Defines how long words would break and wrap onto the next line. */
.word-wrap(break-word);
/* Defines if browsers may hyphenate text when they exceed the boundaries of their containers. */
.hyphens;
/* Performs a full reset on a list element and its children. */
.list-reset;

Corners & Borders

Box Shadows (single and multiple)
Rounded Corners (all the same or different)
Borders (all the same or different) Updated

Examples

/* Defines the box-shadow applied to an element. */
.box-shadow(none);
.box-shadow(0 0 0 10px fade(@colorBlack, 15%));
.box-shadow(inset 0 -2px 0 fade(@colorBlack, 15%), 0 1px 2px @colorDarkGray);
/* Defines a global border radius to be applied to an element. */
.rounded;
.rounded(4);
/* Defines a border radius to be applied to 1-4 individual corners of an element. */
.rounded-each(2,2,0,0);
/* Defines a border to be applied to an element. */
.border(1px, solid, fade(@colorBlack, 75%));
/* Defines individual borders to be applied to an element. */
.border-each(2px, 2px, 4px, 2px, solid, @colorDarkGray, @colorXDarkGray, @colorNearBlack, @colorXDarkGray);

Gradients & Backgrounds

Gradients (vertical & horizontal)
Background Size New

Examples

/* Defines the start & end colors for a vertical linear gradient. */
.gradient(@colorWhite, @colorLightGray);
/* Defines the start & end colors for a horizontal linear gradient. */
.gradient-horizontal(darken(@colorWhite, 10%), darken(@colorLightGray, 10%));
/* Defines the width & height of the background image. */
.background-size(50%, 50%);

Positioning

Absolute Positioning (all the same or different values)
Centering (via absolute positioning or block display)
Box Sizing
Background Clipping
Displaying Block or Inline-Block
Applying a “Clear Fix”

Examples

/* Defines a quick way to set the absolute positioning for an element. */
.position-absolute(20px);
/* Defines a quick way to set the absolute positioning for an element with different top, right, bottom, left values. */
.position-absolute-each(25%, 20%, 0, 20%);
/* Quickly centers an element with a known width with absolute positioning. */
.position-center(800px);
/* Overcomes the limitations of the CSS "box model". */
.box-sizing(border-box);
/* Defines the boundaried area of the background of an element. */
.background-clip(padding-box);
/* Defines an element with common inline-block attributes. */
.inline-block;
/* Centers an element. */
.center-block;
/* Easily & cleanly clear floated elements. */
.clear-fix;

Columns

Columns Shortcut New
Column-Count New
Column-Fill New
Column-Gap New
Column-Rule New
Column-Span New
Column-Width New

Examples

/* Defines the column shortcut string. */
.columns(50px 4);
/*  Defines the number of columns. */
.col-count(4);
/* Defines the fill of columns. */
.col-fill;
/* Defines the width of the gap between columns. */
.col-gap(10px);
/* Defines the border between columns. */
.col-rule(8px solid @colorPrimary);
/* Defines the number of columns to span an element across. */
.col-span;
/* Defines the width of the columns. */
.col-width(50px);

Common & Useful Effects

Opacity
Transform New
Rotation
Scale Updated
Zoom New
Blur
Hover & Active States
Presentational Display
Appearance New
Perspective New

Examples

/* Defines the amount of opacity applied to an element. */
.opacity(.4);
/* Defines the transform method applied to an element. */
.transform(translateX(0));
/* Defines the amount of rotation applied to an element. */
.rotation(90deg);
/* Defines the amount of scale applied to an element. */
.scale(1.5);
/* Defines the amount of zoom applied to an element. */
.zoom(.5);
/* Defines the amount of blur applied to an element, similar to a gaussian blur. */
.blur(4);
/* Defines global hover state for an element. */
.bg-hover(@colorBlack, 5%));
/* Defines global active state for an element. */
.bg-active(@colorPrimary, 75%));
/* Defines a nice presentational frame for an element, similar to a sheet of paper. */
.display-box(@colorOffWhite, 0 1px 1px fade(@colorBlack, 10%), 1, 25%);
/* Defines or removes platform-native styling to an element. */
.appearance;
/* Defines the distance of perspective applied to an element, with multiple vendor support. */
.perspective(200px);
/* Defines the origin of perspective applied to an element. */
.perspective-origin(top center);

Transitions

Transition Shortcut Updated
Transition-Delay New
Transition-Duration New
Transition-Property New
Transition-Timing-Funtction New

Examples

/* Defines the transition shortcut string. */
.transition(all .1s ease-in-out);
/*  Defines the transition delay. */
.trans-delay(.1s);
/* Defines the transition duration. */
.trans-duration(.5s);
/* Defines the target property to apply the transition. */
.trans-property(all);
/* Defines the transition timing-function. */
.trans-timing-function(ease-in-out);

Animations

Animation Shortcut New
Animation-Delay New
Animation-Direction New
Animation-Duration New
Animation-Fill-Mode New
Animation-Iteration-Count New
Animation-Name New
Animation-Play-State New
Animation-Timing-Funtction New

Examples

/* Defines the animation shortcut string. */
.animation(scale(0.4) fade .48s infinite linear);
/*  Defines the animation delay. */
.ani-delay(2s);
/*  Defines the animation direction. */
.ani-direction(linear);
/* Defines the animation duration. */
.ani-duration(225ms);
/* Defines the animation fill-mode. */
.ani-fill-mode(both);
/* Defines the animation iteration-count. */
.ani-iteration-count(infinite);
/* Defines the animation name. */
.ani-name(slideinfromleft);
/* Defines the animation play-state. */
.ani-play-state(running);
/* Defines the animation timing function. */
.ani-timing-function(ease-out);

Images & Icons

Simple Handling of Different Kinds of Image Sprite Maps
Quick and easy pure CSS arrows (up, down, left, and right)

Examples

/* Sprite map handling when the individual image sizes are the same as the grid dimensions. */
.icon-sprite(@filename: icons-small, @img-row: 1, @img-col: 1, @img-size: 20, @x-offset: 0, @y-offset: 0);
/* Sprite map handling when the individual image sizes are different than the grid dimensions. */
.icon-sprite-grid(@filename: icons-large, @img-row: 1, @img-col: 1, @img-size: 25, @img-grid: 50, @x-offset: -12, @y-offset: -12);
/* Creates CSS arrows of any color pointing up, down, left, or right.
.arrow(up, 10px, @colorPrimary, 0);
.arrow(down, 10px, @colorError, 0);
.arrow(left, 10px, @colorMediumGray, 0);
.arrow(right, 10px, @colorMediumGray, 0);

CSS Diagnostics

(Based of Chris Coyier’s CSS Diagnostic Method)

Find Empty Elements & Attributes
Find Deprecated Elements & Attributes
Find Proposed Deprecated Elements & Attributes

Examples

.debug-empty-elements;
.debug-empty-attr;
.debug-deprecated-elements;
.debug-deprecated-attr;
.debug-proposed-deprecated-elements;
.debug-proposed-deprecated-attr;

Installation

To install and use these mixins (assuming you already have LESS installed and running correctly in your application), simply download and extract the .less file and then:

Place this mixin file in the same directory as your other less files. You may rename it if you would like.
At the very beginning of all your less files, reference this new mixins .less file with the @import CSS at-rule (eg., @import url(“mixins.less”);)
Modify & define the default variables that best work with your framework on a global level.
Use these new mixins to replace or create any otherwise bloated CSS, especially where there are browser vendor considerations to worry about or places where you reuse the same CSS often.

Change Log

8/26/14

Updated .text-overflow mixin for better IE8/9 compatibility.

8/15/14

Updated mixin description for specifing a font size in a variable unit.
Updated mixin for unselectable text (added -webkit-touch-callout).
Updated mixin for individual borders (added individual widths).
Updated mixin for transition shortcut string, with multiple vendor support.
Updated mixin for scale, with multiple vendor support (added point of origin).
New mixin for specifing a font size in pixels.
New mixin for monospaced code text.
New mixin for background size.
New mixin for columns shortcut string, with multiple vendor support.
New mixins for individual column properties, with multiple vendor support.
New mixin for general transforms, with multiple vendor support.
New mixin for specifying or removing platform-native styling, with multiple vendor support.
New mixins for perspective, with multiple vendor support.
New mixins for individual transition properties, with multiple vendor support.
New mixin for animation shortcut string, with multiple vendor support.
New mixins for individual animation properties, with multiple vendor support.
Removed mixin for the background transition (was incomplete).
Removed mixin for the animated spinner (was incomplete).

If you have never heard of Less but this has intrigued you, then I highly suggest you check out lesscss.org.

CSS Less MixinsMike

Mike Donovan Design

Senior UI & UX designer, illustrator, & HTML/CSS guru in NYC.

Ultimate Collection of Less Mixins (v2)

Global Variable Definitions

Examples

Text Manipulations

Examples

Corners & Borders

Examples

Gradients & Backgrounds

Examples

Positioning

Examples

Columns

Examples

Common & Useful Effects

Examples

Transitions

Examples

Animations

Examples

Images & Icons

Examples

CSS Diagnostics

Examples

Installation

Change Log