This styleguide uses a lot of mixins throughout its code. We encourage you to use these where necessary.
Tablet breakpoint (see $bp-tablet defined in _vars.scss). This asumes a min-width as defined by the variable.
@mixin tablet {
@include breakpoint($bp-tablet) {
@content;
}
}
@include tablet { ... }
Tablet-only breakpoint (see $bp-tablet defined in _vars.scss). This asumes a min-width as defined by the $bp-tablet variable and a max-width as defined by the $bp-desktop variable.
@mixin tablet-only {
@include breakpoint($bp-tablet $bp-desktop) {
@content;
}
}
@include tablet-only { ... }
Desktop breakpoint (see $bp-tablet defined in _vars.scss). This asumes a min-width as defined by the variable.
@mixin desktop {
@include breakpoint($bp-desktop) {
@content;
}
}
@include desktop { ... }
For modern browsers
table
rather than block
is only necessary if using
:before
to contain the top-margins of child elements.Source: http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix() {
&::before,
&::after {
display: table; // 2
content: ' '; // 1
}
&::after {
clear: both;
}
}
@include clearfix();
Adds active, visited, hover and focus states to elements like links or buttons etc…
@mixin color-element-states($color, $color-hover, $property: "color") {
#{$property}: $color;
&:active,
&:visited {
@content;
}
&:hover,
&:focus {
#{$property}: $color-hover;
}
}
@include color-element-states($link-color, $link-color-hover);
Sass CSS triangle mixin, create any kind of triangles with ease Forked from https://github.com/juanbrujo/triangle-mixin.less
@mixin triangle($direction, $size-h, $size-v, $color) {
display: block;
width: 0;
height: 0;
transform: scale(.9999);
border-style: solid;
content: '';
@if $direction == top {
border-width: 0 $size-v $size-h;
border-color: transparent transparent $color;
}
@if $direction == bottom {
border-width: $size-v $size-h 0 $size-v;
border-color: $color transparent transparent;
}
@if $direction == left {
border-width: $size-v $size-h $size-v 0;
border-color: transparent $color transparent transparent;
}
@if $direction == right {
border-width: $size-v 0 $size-v $size-h;
border-color: transparent transparent transparent $color;
}
@if $direction == topright {
border-width: 0 $size-h $size-v 0;
border-color: transparent $color transparent transparent;
}
@if $direction == bottomright {
border-width: 0 0 $size-h $size-v;
border-color: transparent transparent $color;
}
@if $direction == bottomleft {
border-width: $size-h 0 0 $size-v;
border-color: transparent transparent transparent $color;
}
@if $direction == topleft {
border-width: $size-h $size-v 0 0;
border-color: $color transparent transparent;
}
}
@include triangle(bottomright,$square,$square,$color);
This mixin is used throughout components in the style guide to “themify” them. This means that when we use the themify mixin on a color, this color can be different based on the section the component is in.
It uses a SASS map $themes
to loop over the different sections defined in _vars.scss
.
@mixin themify($themes: $themes) {
@each $theme, $colors in $themes {
@include themify-map($colors);
// Apply the default section as default color scheme if there is no section
// defined in the DOM.
@if $theme == "default" {
@content;
}
.section--#{$theme} &,
*[class*="section--"] .section--#{$theme} & {
@content;
}
}
}
@include themify(
color: $color-blue;
);
This mixins is used to create a Bootstrap style row which adds negative margins to the div.
@mixin make-row($gutter: $gutter-width) {
@include clearfix();
margin-right: -($gutter / 2);
margin-left: -($gutter / 2);
}
@include make-row;
Create a column applied to mobile layouts.
@mixin make-mobile-column($columns, $gutter: $gutter-width) {
position: relative;
width: percentage(($columns / $grid-columns));
min-height: 1px;
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
float: left;
}
@include make-mobile-column(6);
Create a column applied to tablet layouts.
@mixin make-tablet-column($columns, $gutter: $gutter-width) {
position: relative;
min-height: 1px;
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
@media (min-width: $bp-tablet) {
width: percentage(($columns / $grid-columns));
float: left;
}
}
@include make-tablet-column(6);
Create a column applied to desktop layouts.
@mixin make-desktop-column($columns, $gutter: $gutter-width) {
position: relative;
min-height: 1px;
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
@media (min-width: $bp-desktop) {
width: percentage(($columns / $grid-columns));
float: left;
}
}
@include make-desktop-column(6);