Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Current collection of mixins I use on all projects.
// Top left block to see what breakpoint you are on.
.mq-block {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
content: " ";
z-index: 999999;
}
@media only screen and (min-width : 1201px) {.mq-block {background-color: red}}
@media only screen and (max-width : 1200px) {.mq-block {background-color: orange}}
@media only screen and (max-width : 992px) {.mq-block {background-color: yellow}}
@media only screen and (max-width : 768px) {.mq-block {background-color: blue}}
@media only screen and (max-width : 480px) {.mq-block {background-color: green}}
@media only screen and (max-width : 320px) {.mq-block {background-color: purple}}
// Media Queries
@mixin mq($media-query) {
$mq-xl: "(min-width: 1201px)"; // red
$mq-lg: "(max-width: 1200px)"; // orange
$mq-md: "(max-width: 992px)"; // yellow
$mq-sm: "(max-width: 768px)"; // blue
$mq-xs: "(max-width: 480px)"; // green
$mq-xxs: "(max-width: 320px)"; // purple
@if $media-query == xs {
@media #{$mq-xs} {
@content;
}
} @else if $media-query == sm {
@media #{$mq-sm} {
@content;
}
} @else if $media-query == md {
@media #{$mq-md} {
@content;
}
} @else if $media-query == lg {
@media #{$mq-lg} {
@content;
}
} @else if $media-query == xl {
@media #{$mq-xl} {
@content;
}
}
}
// Helpers
@mixin ol($c:red) {
outline: 1px solid $c;
}
@mixin responsive() {
width: 100%;
max-width: 100%;
height: auto;
}
@mixin box-shadow($h:4px, $v:4px, $blur:0, $spread:0, $color:darken($body-bg,5%)) {
-webkit-box-shadow: $h $v $blur $spread $color;
box-shadow: $h $v $blur $spread $color;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
background-clip: padding-box;
}
// Flexible alignment for elements - center (default), vertical, horizontal or cancel for child elements
@mixin align($type) {
@if $type == horizontal {
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
} @else if $type == vertical {
position: relative;
left: 50%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
} @else if $type == cancel { // CANCEL mixin align for child elements
position: relative;
top: 0;
left: 0;
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
} @else if $type == parent { // Use on parent elements IF needed
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
} @else {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
// General Transition mixin
@mixin transition($selector:all, $animation:ease, $duration:.4s) {
-webkit-transition:$selector $animation $duration;
-moz-transition:$selector $animation $duration;
transition:$selector $animation $duration;
}
// Transforms
@mixin scale($amount:1.5) {
-webkit-transform: scale($amount);
-moz-transform: scale($amount);
transform: scale($amount);
}
@mixin rotate($degrees:-20deg) {
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin translate($x:100, $y:100) {
-webkit-transform: translate($x, $y);
-moz-transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin grayscale($percentage:100%) {
-webkit-filter: grayscale($percentage);
-moz-filter: grayscale($percentage);
-ms-filter: grayscale($percentage);
-o-filter: grayscale($percentage);
filter: grayscale($percentage);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
// CSS image masks and effects
@mixin mask($type: linear, $start: center top, $stop: center bottom, $color-1: rgba(0,0,0,1), $color-2: rgba(0,0,0,.6) ) {
mask-image: -webkit-gradient($type, $start, $stop,
color-stop(0.00, $color-1),
color-stop(0.35, $color-1),
color-stop(0.50, $color-2),
color-stop(0.65, $color-2),
color-stop(1.00, $color-2)
);
}
@mixin blur($length: 5px) {
-webkit-filter: blur($length);
filter: blur($length);
}
// Hover effects
/* Overline From Center */
@mixin hover-center($position: top, $border-color: $brand-primary, $border-height: 4px, $speed: 0.3s) {
position: relative;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
:before {
content: "";
position: absolute;
z-index: -1;
@if $position == top {
top: 0;
} @else if $position == bottom {
bottom: 0;
} @else {
top: 0;
}
right: 50%;
left: 50%;
height: $border-height;
background: $border-color;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: $speed;
transition-duration: $speed;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
:hover:before,
:focus:before,
:active:before {
left: 0;
right: 0;
}
}
// Equal columns & centering helper classes
// --------------------------------------------------
// 5 columns CLASS
.col-lg-five {@include make-lg-column(2.4)}
.col-md-five { @include make-md-column(2.4)}
.col-sm-five{ @include make-sm-column(2.4)}
// 7 columns CLASS
.col-lg-seven {@include make-lg-column(1.714)}
.col-md-seven { @include make-md-column(1.714)}
.col-sm-seven{ @include make-sm-column(1.714)}
// Related helper classes
.col-md-push-five {@include make-md-column-push(2.4)}
.col-md-pull-five {@include make-md-column-pull(2.4)}
.col-md-offset-five {@include make-md-column-offset(2.4)}
.col-md-push-seven {@include make-md-column-push(1.714)}
.col-md-pull-seven {@include make-md-column-pull(1.714)}
.col-md-offset-seven {@include make-md-column-offset(1.714)}
// Centering columns
// Add to .row (ie <div class="row row-centered">)
.row-centered {
text-align: center;
> [class*="col-"] {
display: inline-block;
float: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment