Star

Mixins

Arrow

Creates a triangle, used for things like tooltips or dropdowns.

Options
$direction up, down, left, right, top-right, top-left, bottom-right, bottom-left
$color Any hex value (e.g. #E5E5E5)
$size Any px value (e.g. 6px)
.element {
	&:after {
		@include arrow(down, black, 20px);
	}
 }

Placeholder

Changes form placeholder text color.

.element {
	@include placeholder {
		color: grey;
	}
}

Uppercase

Transforms text to uppercase, accepts an argument to specify letter-spacing.

.element {
	@include uppercase(0.1em);
}

Clearfix

Clears floats. Apply this to the parent element.

.element {
	@include clearfix;
}

Ellipsis

Adds ellipsis to limit text width ellipsis($width)

.element {
	@include text-overflow(300);
}

Media Queries

Use if-above($device), if-below($device) and if-between($device-min, $device-max) to target different viewport sizes defined in your $breakpoints map.

These mixins will also accept values that aren't defined in your $breakpoints map.

.element {
	@include if-above(device-medium) {
		color: red;
	}
}

.element {
	@include if-above(800px) {
		color: blue;
	}
}

Strip Unit

Removes units from a given value - for example, stripping off the 'px' from a pixel value.

@return strip-units(20px);
// Returns 20

Convert to REM

Converts a px based value to REM units. The root value deafults to 16px, unless a different 'base' value is specifed in your $sizes map.

ul {
	font-size: rem(12px);
	// Converts to 12 / 16 = 0.75rem;
}

No Bullet

Removes list-style-type, margin and padding attributes from ul elements (useful when creating navigation components).

ul {
	@include no-bullet;
}