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-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) { ... }
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;
}
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: "";
}
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;
}