Skip to main content

Utils

page @ src/elements/_page.scss​

Resets the box-border property on all the HTML nodes, :before and :after.

Usage

/* Just import it in your entry style file */

clearfix @ src/tools/_cleafix.scss​

Quickly and easily clear floated content within a container.

Usage

.your-class {
    @include clearfix();
}

opaque @ src/tools/_color.scss​

Get the 100% opacity color.

Arguments

ArgumentValueDescription
colorcolorThe color you want to get the 100% opacity version of

Usage

.your-class {
    color: opaque($my-color-with-low-opcatity);
}

apply-opacity @ src/tools/_color.scss​

Apply some color over a background color using its opacity.

Arguments

ArgumentValueDescription
colorcolorThe color you want to apply with opacity.
background-colorcolorThe background color to use behind the opacity. Default: #ffffff.

Usage

.your-class {
    color: apply-opacity($my-color);
}

.your-class {
    color: apply-opacity($my-color, #000000);
}

reset-button @ src/tools/_reset-button.scss​

Quickly and easily reset the styles of a <button> HTML tag.

Usage

.your-button-class {
    @include reset-button();
}

respond-to @ src/tools/_respond-to.scss​

A shorthand mixing for making media queries easier. If second argument is not set to true it returns a basic min-width media query, otherwise it takes into account the sidebar size to create a ranged media-query.

Arguments

ArgumentValueDescription
breakpoint`"xs""sm"
sidebarbooleanFlag to take into account if there is a sidebar.

Usage

@include respond-to("sm") {
    /* your styles the same way you would use a media query*/
}

@include respond-to("md", true) {
    /* your styles the same way you would use a media query*/
}