Originally just 8 Sass mixins you must have in your toolbox, now there are more!
Usage:
.panel-thin {
@include size(2rem 100%);
}
.panel-square {
@include size(480px)
}
Usage:
@include keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
.element {
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
}
Usage:
body {
@include background-image('pattern');
}
Usage:
.sidebar {
width: 60%
float: left;
margin: 0 2% 0 0;
@include bp-small {
width: 100%;
float: none;
margin: 0;
}
}
Usage:
p {
@include font-size(14px)
}
Usage:
.container-with-floated-children {
@extend %clearfix;
}
Usage:
.faded-text {
@include opacity(0.8);
}
Usage:
a {
color: gray;
@include transition(color .3s ease);
&:hover {
color: black;
}
}
Usage:
.visually-hidden {
@extend %visuallyhidden;
}
Usage:
.field-info {
@include triangle('up', color: #008)
background-color: #008;
color: white;
}