Toolbox

Toolbox is a collection of useful mixins, functions and classes. This file can operate independently of the framework, you can grab it (_toolbox.scss) to your project even without using Mate.

preview tollbox.scss on github

# Placeholders

%clearfix
%box-sizing--border
%box-sizing--content
%truncate
%hide-text
%word-wrap
%noselect
%disabled

# Mixins

Media queries breakpoint

@include respond-to($device)
@include respond-to($phone, $tablet--xs)
@include respond-to-custom($target-1, $media-1, $target-2: null, $media-2: null)

One of the most important mixin responsible for media queries and breakpoints for the purpose of RWD.
Available media breakpoints: $mobile, $phone, $tablet, $tablet--xs, $desktop, $desktop--xl

$mobile is responsible for range phone + tablet.

Breakpoints are defined in main settings file

EXAMPLES:

        .element {
            font-size: 3rem;
        
            @include respond-to($mobile) {
                font-size: 1.6rem;
            }
        
            @include respond-to-custom(min-width, 750px, max-width, 850px) {
                bottom: 25%;
            }
        
            @include respond-to($phone, $tablet--xs){
                height: auto;
                overflow: initial;
            }
        }

Flex Box

@include display-flex($direction: null, $wrap: null, $justify-content: null, $align-items: null, $align-content: null)
@include flex-item($order: null, $flex-grow: null, $flex-shrink: null, $flex-basis: null, $align-self: null)

EXAMPLES:

        .example-flex {
            @include display-flex;
            > div {
                @include flex-item($flex-grow: 1);
            }
        }

        .example-flex-with-params {
            @include display-flex(row, wrap, null, stretch);
        }

        .example-flex-with-one-param {
            @include display-flex($wrap: wrap);
        }

Transforms

@include transform-custom($args...)
@include rotate($val)

Transitions

@include transition($list: all, $duration: $trans__base--duration, $timing: $trans__base--timing, $delay: $trans__base--delay)
@include transition-custom($args...)

EXAMPLES:

        .element {
            height: 500px;
            padding: 15px;
            margin-left: 90px;
            top: 50px;
            @include transition(margin-left);
        
            &:hover{
                margin-left: 180px
            }
        }
        
        .element {
            height: 500px;
            padding: 15px;
            margin-left: 90px;
            top: 50px;
            @include transition((height, top));
        
            &:hover{
                height: 700px;
                top: 55px;
                padding: 0;
            }
        }
        
        .element {
            height: 500px;
            padding: 15px;
            margin-left: 90px;
            top: 50px;
            @include transition((height, top), .25s, ease, .5s);
        
            &:hover{
                height: 700px;
                top: 55px;
                padding: 0;
            }
        }

Positioning

@include centerer($axis: auto)
@include coverer

Others

@include gradient($gradient-color-from, $gradient-color-to, $direction: to bottom, $gradient-from-loc: null, $gradient-to-loc: null, $type: linear)
@include font-size($size, $line-height: null)
@include animation($args...)
@include filter($args...) - Filters preview
@include perspective($size)
@include placeholder($color: $text__color--muted, $font-size: inherit, $font-family: $font__base--regular) - placeholder for form inputs
@include svg-bkg($color) - background-image with SVG