Toolkit
Mixins
This is a set of basic mixins built into Superkube. Mixins speed up and simplify routine work by allowing complex things to be done with one SCSS command.
Background #
background
Syntax
background($color)
background($color-map)
This mixin creates a background color or gradient with background-gradient
mixin if map is specified as param.
Example
// Color
$color: palette(white)
// Mixin
.item {
@include background($color);
}
Output
.item {
background-color: var(--color);
}
Example
// Map
$color: (
from: palette(white),
to: palette(neutral, lighter),
deg: 90deg // optional
);
// Mixin
.item {
@include background($color);
}
Output
.item {
background-color: var(--color-from);
background-image: linear-gradient(
90deg,
var(--color-from) 0%,
var(--color-to) 100%
);
}
background-gradient
Syntax
background-gradient($color-map, $deg: 180deg)
This mixin creates two-color linear or radial gradient.
Linear Gradient
// Map
$color: (
from: palette(white),
to: palette(neutral, lighter)
);
// Mixin
.item {
@include background-gradient($color);
}
// Specified direction
.item {
@include background-gradient($color, 90deg);
}
Output
.item {
background-color: var(--color-from);
background-image: linear-gradient(
180deg,
var(--color-from) 0%,
var(--color-to) 100%
);
}
// Specified direction
.item {
background-color: var(--color-from);
background-image: linear-gradient(
90deg,
var(--color-from) 0%,
var(--color-to) 100%
);
}
Radial Gradient
// Map
$color: (
from: palette(white),
to: palette(neutral, lighter)
);
// Mixin
.item {
@include background-gradient($color, radial);
}
Output
.item {
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
.item {
@include background-image(photo.jpg, photo-2x.jpg, 800px);
}
Output
.item {
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) { ... }
Generators #
generate-type
This mixin generates font size modifiers for modules.
@include generate-type(modulename);
@include generate-type(modulename, target);
Let's say $scales
has the specified module font size.
// =Scales
$scales: (
type: (
my-module: (
small: 13px,
default: 15px,
large: 18px
)
)
);
Include the generator mixin.
.my-module {
@include generate-type(my-module);
}
Output
.my-module {
font-size: 15px;
}
.my-module-small {
font-size: 13px;
}
.my-module-large {
font-size: 18px;
}
Specifying the target
argument, sets the nested block to which the font size will be applied.
.my-module {
@include generate-type(my-module, '.my-module-item');
}
Output
.my-module .my-module-item {
font-size: 15px;
}
.my-module-small .my-module-item {
font-size: 13px;
}
.my-module-large .my-module-item {
font-size: 18px;
}
generate-variants
This mixin generates module modifiers from $colors
and $variants
maps.
@include generate-variants(prefix, modulename);
@include generate-variants(prefix, modulename, nested);
Let's say we have the specified properties and colors in $variants
and $colors
.
// =Colors
$colors: (
my-module: (
default: (
color: palette(black),
background-color: palette(neutral, lightest)
),
primary: (
color: palette(primary, base),
background-color: palette(primary, lightest)
)
)
);
// =Variants
$variants: (
default: (
padding: 4rem
),
large: (
padding: 8rem
)
);
Include the generator mixin.
.my-module {
@include generate-variants('.my-module', my-module);
}
Output
.my-module {
color: var(--color);
background-color: var(--color);
padding: 4rem;
}
.my-module-primary {
color: var(--color);
background-color: var(--color);
}
.my-module-large {
padding: 8rem;
}
By specifying the nested
argument, we tell the mixin to generate nested blocks with states.
Here's what states can be:
- base
- hover
- focus
- hoverfocus
- before
- after
- first-child
- last-child
- active
- disabled
// =Colors
$colors: (
my-module: (
default: (
item: (
background-color: palette(neutral, lightest)
),
link: (
base: (
color: palette(black)
),
hover: (
color: palette(negative, base)
)
)
),
primary: (
item: (
background-color: palette(primary, lightest)
),
link: (
base: (
color: palette(primary, base)
),
hover: (
color: palette(primary, base)
)
)
)
)
);
// =Variants
$variants: (
default: (
padding: 4rem
),
large: (
padding: 8rem
)
);
Include the generator mixin with nested
argument.
.my-module {
@include generate-variants('.my-module', my-module, true);
}
Output
.my-module {
padding: 4rem;
.my-module-item {
background-color: var(--color);
}
.my-module-link {
color: var(--color);
}
.my-module-link:hover {
color: var(--color);
}
}
.my-module-primary {
.my-module-item {
background-color: var(--color);
}
.my-module-link {
color: var(--color);
}
.my-module-link:hover {
color: var(--color);
}
}
.my-module-large {
padding: 8rem;
}
Outset #
outset-both
This mixin increases the width of the block to both ends.
.item-outset-both {
@include outset-both(40px);
}
Output
.item-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.
.item-outset-left {
@include outset-left(40px);
}
Output
.item-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.
.item-outset-right {
@include outset-right(40px);
}
Output
.item-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.
.item-outset-none {
@include outset-none;
}
Output
.item-outset-none {
width: auto;
max-width: none;
transform: translateX(0);
left: initial;
}
Text #
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);
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
.hero {
margin-left: auto;
margin-right: auto;
}
uncentered
Cancels horizontal centering of the block.
.hero {
@include uncentered;
}
Output
.hero {
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: "";
}