Ornament

App height

@include app-height;
@include app-height("min");
@include app-height("max");

A drop-in replacement for 100vh for cases where vh units aren't exactly representative of the visual viewport.

Without any arguments, it resolves to the equivelent of height: 100vh

You can switch to min-height or max-height by passing in either min or max as the first and only argument.

Note: This requires support for css custom properties (native variables), in places where this is not supported, 100vh will be used instead.

Background cover

@include background-cover;

A mixin that sets the background size to cover and background-position to center.

Colour and decorate link

@include color-link(default, hover);
@include decorate-link(default, hover);

These two mixins are very similar and are used for quickly styling links.

For example, say you want a blue underline link that should go purple and no underline on hover:

@include color-link(blue, purple);
@include decorate-link(underline, none);

Disable mouse outline

@include disable-mouse-outline;

This will disable the outline on focusable elements when the user's primary interaction is the mouse, retaining the outline on other input types.

Flush children

@include flush-children;

This will remove the top margin from the first-child and bottom margin from the last-child.

The equivelent of writing:

margin-top: 20px;
margin-bottom: 20px;
&:first-child {
  margin-top: 0;
}
&:last-child {
  margin-bottom: 0;
}

Instead you can write:

margin-top: 20px;
margin-bottom: 20px;
@include flush-children;

Input placeholder

@include input-placeholder { color: purple };

A mixin for styling input placeholders cross browser.

Overflow scroll

@include overflow-scroll;

@include overflow-scroll-x;

A way to set overflow: scroll and webkit touch scrolling at once.

Ratio

padding-top: ratio(5,10);

Ratio is a function that will return the ratio percentage between a width and a height.

This is useful for ratio-aware sizing.

@include ratio-size(5,10,>div);

Ratio-size takes ratio-aware sizing a step further by scaffolding up the styles used in creating a container that is sized by a ratio, then positioning an element absolutely inside that container.