Mixins

Background #

background-gradient

Syntax

background-gradient($color-map, $deg: 180deg)

This mixin creates two-color linear or radial gradient.

Linear Gradient

// Map (in vars/colors)
$colors: (
    ...
    gradient: (
        alpha: (
            from: palette(white),
            to: palette(neutral, lighter)
        )
    )
    ...
);

// Mixin
.block-1 {
    @include background-gradient(color(gradient, alpha));
}

// Specified direction
.block-2 {
    @include background-gradient(color(gradient, alpha), 90deg);
}

Output

.block-1 {
    background-color: var(--color-from);
    background-image: linear-gradient(
        180deg,
        var(--color-from) 0%,
        var(--color-to) 100%
    );
}

// Specified direction
.block-2 {
    background-color: var(--color-from);
    background-image: linear-gradient(
        90deg,
        var(--color-from) 0%,
        var(--color-to) 100%
    );
}

Radial Gradient

// Map (in vars/colors)
$colors: (
    ...
    gradient: (
        alpha: (
            from: palette(white),
            to: palette(neutral, lighter)
        )
    )
    ...
);

// Mixin
.block {
    @include background-gradient(color(gradient, alpha), 'radial');
}

Output

.block {
    background-color: var(--color-from);
    background-image: radial-gradient(
        var(--color-from),
        var(--color-to)
    );
}

background-image

Syntax

background-image($file1, $file2, $width: auto, $height: auto)

This mixin sets the image as a background for high resolution screens.

Example

.block {
    @include background-image(photo.jpg, photo-2x.jpg, 800px);
}

Output

.block {
    background-image: url(photo.jpg);

    @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (min--moz-device-pixel-ratio: 2),
      only screen and (min-device-pixel-ratio: 2) {
        background-image: url(photo-2x.jpg);
        background-size: 800px auto;
    }
}

Breakpoint #

for-lg

This mixin defines styles for large screens from 1442px by default.

@include for-lg {
    ... content ...
}

Output

@media only screen and (min-width: 1442px)  {
    ... content ...
}

for-md

This mixin defines styles for medium (tablet) screens up to 1024px by default.

@include for-md {
    ... content ...
}

Output

@media only screen and (max-width: 1023px) {
    ... content ...
}

for-sm

This mixin defines styles for small (mobile) screens up to 768px by default.

@include for-sm {
    ... content ...
}

Output

@media only screen and (max-width: 767px)  {
    ... content ...
}

not-sm

This mixin defines styles for all screens except small (mobile) ones from 768px by default.

@include not-sm {
    ... content ...
}

Output

@media only screen and (min-width: 768px)  {
    ... content ...
}

breakpoint

This mixin defines custom breakpoints.

// min-width 768px;
@include breakpoint($min: 768px) {}

// min-width 768px and max-width 1024px;
@include breakpoint(768px, 1024px) {}

// max-width 1024px;
@include breakpoint($max: 1024px) {}

Container #

container

Sets the width of the container from the values specified in the $containers map.

Example

// Map (in vars/scales)
$containers: (
    small: 400px,
    medium: 800px,
    base: 1200px,
    large: 100%
);

// Mixin
.hero-container {
    @include container; // base by default
}
.hero-container-large {
    @include container(large);
}

Output

.hero-container {
    max-width: 1200px;
}
.hero-container-large {
    max-width: 100%;
}

container columns

Sets the width of the container depending on the specified number of columns. The number of columns is defined in the $grid map. By default, the framework generates 12 columns from container-1 to container-12.

Example

.hero-container {
    @include container(8);
}

Output

.hero-container {
    max-width: width-of-8-columns;
}

edges

Sets the left and right padding for the container from the values specified in the $edges map.

Example

// Map (in vars/scales)
$edges: (
    base: 5rem,
    large: 8rem
);

// Mixin
.hero-container {
    @include container;
    @include edges; // base by default
}
.hero-container-large {
    @include container(large);
    @include edges(large);
}

// Irregular edges
.hero-container-edges-base-large {
    @include container(large);
    @include edges(base, large);
}

Output

.hero-container {
    max-width: 1200px;
    padding-left: 5rem;
    padding-right: 5rem;
}
.hero-container-large {
    max-width: 100%;
    padding-left: 8rem;
    padding-right: 8rem;
}

// Irregular edges
.hero-container-edges-base-large {
    max-width: 100%;
    padding-left: 5rem;
    padding-right: 8rem;
}

Flex #

flex-layout

This mixin creates the flex container.

.flex-container {
    @include flex-layout;
}

Output

.flex-container {
    display: flex;
    @media only screen and (max-width: 767px)  {
        flex-direction: column;
    }
}

flex-sidebar

This mixin creates a sidebar with the specified width inside the flex container. The width is specified in pixels, percent, or any other units.

.flex-container-sidebar {
    @include flex-sidebar(300px);
}

Output

.flex-container-sidebar {
    flex: 0 0 300px;
    @media only screen and (max-width: 767px)  {
        flex: 0 0 100%;
    }
}

flex-content

This mixin defines the content area inside flex container.

.flex-container-content {
    @include flex-content;
}

Output

.flex-container-content {
    flex-grow: 1;
    min-width: 0;
}

flex-auto

This mixin creates a block with an automatic width inside the flex container.

.flex-auto {
    @include flex-auto;
}

Output

.flex-auto {
    flex: 1 1 auto;
}

flex-column

This mixin creates a flex-column block inside a flex container.

.flex-column {
    @include flex-column;
}

Output

.flex-column {
    display: flex;
    flex: 1;
    flex-direction: column;
}

Grid #

This mixin creates a grid with the specified parameters.

Example

@include grid($my-grid-8)

Where $my-grid-8 is passed as a map, for example:

$my-grid-8: (
    gridname: my-grid-8,
    columnname: column,
    columns: 8,
    gutter: 6rem,
    gap: 6rem
);

As a result, with this map, the mixin will create a grid with eight columns and the class my-grid-8. You can use it in HTML like this:

<div class="my-grid-8">
    <div class="column column-4">...</div>
    <div class="column column-4">...</div>
</div>

Outset #

outset-both

This mixin increases the width of the block to both ends.

.outset-both {
    @include outset-both(40px);
}

Output

.outset-both {
    position: relative;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
    transform: translateX(-50%) translate3d(0,0,0);
    left: 50%;
}

outset-left

This mixin increases the width of the block to the left.

.outset-left {
    @include outset-left(40px);
}

Output

.outset-left {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    transform: translateX(-40px) translate3d(0,0,0);
}

outset-right

This mixin increases the width of the block to the right.

.outset-right {
    @include outset-right(40px);
}

Output

.outset-right {
    position: relative;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    transform: translateX(40px) translate3d(0,0,0);
    left: -40px;
}

outset-none

This mixin resets all specified outset for the block.

.block-outset-none {
    @include outset-none;
}

Output

.block-outset-none {
    width: auto;
    max-width: none;
    transform: translateX(0);
    left: initial;
}

Text #

text-gradient

Sets the gradient for text. Defaults with an angle of 90 degrees.

// Map (in vars/colors)
colors: (
    ...
    text-gradient: (
        alpha: (
            from: palette(active, base),
            to: palette(active, dark)
        )
    )
    ...
);

// Mixin
h1 {
    @include text-gradient(color(text-gradient, alpha));
}

// optional gradient angle
h1 {
    @include text-gradient(color(text-gradient, alpha), 0deg);
}

Output

background-image: linear-gradient(
    90deg,
    var(-color-from),
    var(-color-to)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

dropcap

Syntax

dropcap($size, $line: 1.5, $lines: 3, $magic1: 1, $magic2: 1)

• $size — font size of the text
• $line — line height of the text
• $lines — how many lines of the text should be dropcap
• $magic1 — adjust font size
• $magic2 — adjust line height

This mixin creates dropcaps in the text.

.dropcap:first-letter {
    @include dropcap(16px, 1.5, 3);
    font-family: 'Times New Roman', serif;
}

Utility #

transition

Syntax

transition($transition: all .2s  linear)

This mixin provides a shorthand syntax for transitions.

@include transition;
@include transition(all .2s ease-in-out);
@include transition(opacity 1s ease-in, width .2s ease-in);

Output

transition: all .2s linear;
transition: all .2s ease-in-out;
transition: opacity 1s ease-in, width .2s ease-in;

placeholder

Sets the color for placeholders in inputs.

@include placeholder(color(placeholder));

Output

&::-webkit-input-placeholder {
    color: var(--color-placeholder);
}
&::-moz-placeholder {
    color: var(--color-placeholder);
}
&::-ms-input-placeholder {
    color: var(--color-placeholder);
}
&::placeholder {
    color: var(--color-placeholder);
}

centered

Center the block horizontally.

.hero {
    @include centered;
}

Output

margin-left: auto;
margin-right: auto;

uncentered

Cancels horizontal centering of the block.

.hero {
    @include uncentered;
}

Output

margin-left: initial;
margin-right: initial;

stretched

Stretches the link to the width and height of the whole block.

.item {
    position: relative;
}
.item a {
    @include stratched;
}

Output

.item {
    position: relative;
}
.item a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

close

Syntax

close($size: 1em, $weight: 1px, $color: #000)

This mixin generates a close icon of the specified size and color.

.icon-close {
    @include close(20px, 2px, color(icon, alpha));
}

close-color

Changes the color for close icon.

.icon-close-negative {
    @include close-color(color(icon, negative));
}