grid

mixins

grid

@mixin grid($gutter: 1em, $direction: row, $media: "") { ... }

Description

Create a flexbox grid inside an element, which will apply to its child containers. The containers will become the columns of the grid.

Parameters

NameDescriptionTypeDefault value
$gutter

The width of the gutters which seperate columns.

Size1em
$direction

The flex direction that the columns will be displayed in (e.g. row or column).

Stringrow
$media

The breakpoint that will have the mixin applied.

String""

Example

<article>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</article>
article {
    @include grid();
}

Requires

width

@mixin width($fraction, $media: "") { ... }

Description

Explicitly set the width of a grid column, preventing it from flexing and causing the other columns to accomodate it.

Parameters

NameDescriptionTypeDefault value
$fraction

A fraction (out of 1) representing the space that a column should take up. For example, a value of 1/2 will always fill half the total width of the grid.

Ratio—
$media

The breakpoint that will have the mixin applied.

String""

Example

<article>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</article>
article {
    @include grid();
}

article:first-child() {
    @include width(1/2, $media: $mobile);
}

Requires

gobble

@mixin gobble($strength, $media: "") { ... }

Description

Set the growing strength of a column, allowing it to "muscle out" other columns.

Parameters

NameDescriptionTypeDefault value
$strength

An integer, starting at 1, that will set the strength of the column.

Integer—
$media

The breakpoint that will have the mixin applied.

String""

Example

<article>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</article>
article {
    @include grid();
}

article:first-child() {
    @include gobble(2);
}

Requires

acquiesce

@mixin acquiesce($strength, $media: "") { ... }

Description

Set the shrinking ability of a column, allowing it to concede space to other columns.

Parameters

NameDescriptionTypeDefault value
$strength

An integer, starting at 1, that will set the weakness of the column.

Integer—
$media

The breakpoint that will have the mixin applied.

String""

Example

<article>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</article>
article {
    @include grid();
}

article:first-child() {
    @include acquiesce(3); //This guy's REALLY weak
}

Requires

misc

mixins

clearfix

@mixin clearfix($media: "") { ... }

Description

A simple clearfix for elements containing floats.

Parameters

NameDescriptionTypeDefault value
$media

The breakpoint that will have the mixin applied.

String""

Example

div {
    @include clearfix();
}

Requires

functions

type-scale

@function type-scale($ratio, $level) { ... }

Description

A function which provides a type scale based on the given ratio, to create consistent font sizing. The default size ($level: 1) //

Parameters

NameDescriptionTypeDefault value
$ratio

The type ratio, such as the golden ratio of 1.618, to be used in calculation.

Number—
$level

The level of type to be used, from 1 to infinity.

Integer—

Returns

Size —

The calculated font size.

Example

h1 {
    font-size: type-scale($ratio: 1.618, $level: 6);
}

responsive

mixins

center

@mixin center($width, $media: "") { ... }

Description

Horizontally center an element, giving it a given width.

Parameters

NameDescriptionTypeDefault value
$width

The width of the element.

Size—
$media

The breakpoint that will have the mixin applied.

String""

Example

div {
    @include center(500px, $media: $tablet);
}

Requires

breakpoint

@mixin breakpoint($parameters) { ... }

Description

Wrap content in a media query created from a breakpoint object.

The breakpoint is simply a map, where the keys are media query parameters (e.g. max-width) and the values are their value.

Parameters

NameDescriptionTypeDefault value
$parameters

The media query parameters.

Map—

Content

This mixin allows extra content to be passed (through the @content directive).

Example

$mobile: (max-width: 480px);

div {
    @include breakpoint($mobile) {
        background-color: red;
    }
}

Used by

break

@mixin break($media: "") { ... }

Description

A helper for other mixins, that can take a breakpoint argument. If the argument is a breakpoint object, it applies the breakpoint mixin, but if an empty string is passed in simply outputs the given content. This allows for optional media parameters in other functions.

Parameters

NameDescriptionTypeDefault value
$media

The breakpoint object.

String""

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@mixin clearfix($media:"") {
    @include break($media) {
        &::after {
            content: "";
            display: block;
            clear: both;
        }
    }
}

Requires

Used by

hide

@mixin hide($media) { ... }

Description

Hide the element when a given breakpoint object is active.

Parameters

NameDescriptionTypeDefault value
$media

The breakpoint to hide on.

Map—

Example

div {
    @include hide ($mobile);
}

Requires

show

@mixin show($media) { ... }

Description

Show the element only when a given breakpoint object is active, i.e. hide it on all other screen sizes.

Parameters

NameDescriptionTypeDefault value
$media

The breakpoint to show on.

Map—

Example

div {
    @include show ($desktop);
}

Requires

respond

@mixin respond() { ... }

Description

Make supported elements responsive. The mixin supports img and table tags, which are automatically detected. Their size and overflow behaviour is set to make them easily responsive.

Parameters

None.

Output

img { width: 100%; height: auto; }

Example

img {
    @include respond ();
}

functions

media-until

@function media-until($size) { ... }

Description

Return a breakpoint object with max-width equal to the given size.

Parameters

NameDescriptionTypeDefault value
$size

The maximum screen width.

Size—

Returns

Map —

The breakpoint object.

Example

$mobile: media-until (480px);

media-from

@function media-from($size) { ... }

Description

Return a breakpoint object with min-width equal to the given size.

Parameters

NameDescriptionTypeDefault value
$size

The minimum screen width.

Size—

Returns

Map —

The breakpoint object.

Example

$desktop: media-from (800px);

media-between

@function media-between($min-size, $max-size) { ... }

Description

Return a breakpoint object which matches screens between the two given sizes.

Parameters

NameDescriptionTypeDefault value
$min-size

The minimum screen width.

Size—
$max-size

The maximum screen width.

Size—

Returns

Map —

The breakpoint object.

Example

$tablet: media-between (481px, 799px);

ui

mixins

horizontal-menu

@mixin horizontal-menu($alignment: flex-start) { ... }

Description

Create a horizontal drop-down hover menu from a list of lists. As long as the basic list structure is present, the contents of each item can be anything (including links, etc.).

Parameters

NameDescriptionTypeDefault value
$alignment

Specify the flex setting to use when aligning the menu items horizontally.

Stringflex-start

Example

<ul id="menu">
    <li>Flavours
        <ul>
            <li>Chocolate</li>
            <li>Vanilla</li>
            <li>Strawberry</li>
        </ul>
    </li>
    <li>Suppliers
        <ul>
            <li>Ice Creams 'r' Us</li>
            <li>Cream and Gleam</li>
            <li>We Scream for Ice Cream</li>
        </ul>
    </li>
    <li>Locations
        <ul>
            <li>Melbourne</li>
            <li>Sydney</li>
            <li>Canberra</li>
            <li>Adelaide</li>
        </ul>
    </li>
</ul>
#menu {
    @include horizontal-menu();
}

vertical-menu

@mixin vertical-menu() { ... }

Description

Create a vertical hover menu from a list of lists, similarly to the horizontal-menu. Hovering over a top-level item will display the submenu to the right.

Parameters

None.

Example

<ul id="menu">
    <li>Flavours
        <ul>
            <li>Chocolate</li>
            <li>Vanilla</li>
            <li>Strawberry</li>
        </ul>
    </li>
    <li>Suppliers
        <ul>
            <li>Ice Creams 'r' Us</li>
            <li>Cream and Gleam</li>
            <li>We Scream for Ice Cream</li>
        </ul>
    </li>
    <li>Locations
        <ul>
            <li>Melbourne</li>
            <li>Sydney</li>
            <li>Canberra</li>
            <li>Adelaide</li>
        </ul>
    </li>
</ul>
#menu {
    @include vertical-menu();
}

overlay

@mixin overlay($direction: "bottom", $spacing: 0%) { ... }

Description

Create a tooltip / floating element which appears when the styled element is hovered over. The floating element can be any block-level element.

Parameters

NameDescriptionTypeDefault value
$direction

The direction for the overlay to appear in (top, bottom, left, right).

String"bottom"
$spacing

An arbitrary spacing argument to add seperation between the target and the overlay.

Percentage0%

Example

<span>Hover me!<div>I'll appear</div></span>
span {
    @include overlay ($direction: "bottom");
}

rule

@mixin rule($height, $width: 100%, $color: 100%) { ... }

Description

A more flexible centered horizontal rule element, which can be applied to the hr tag or an empty div.

Parameters

NameDescriptionTypeDefault value
$height

The vertical thickness of the rule.

Size—
$width

The width of the rule.

Size100%
$color

The color of the rule.

Color100%

Example

hr {
    @include rule (5px, $width: 75%, $color: pink);
}