Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
SaaS Mixin for mobile-first responsive styling
With Bootstrap 4 values:
@mixin breakpoint($point) {
@if $point == sm {
@media (min-width: 576px) { @content; }
}
@if $point == md {
@media (min-width: 768px) { @content; }
}
@else if $point == lg {
@media (min-width: 992px) { @content; }
}
@else if $point == xl {
@media (min-width: 1200px) { @content; }
}
}
With Bootstrap 3 values:
@mixin breakpoint($point) {
@if $point == sm {
@media (min-width: 768px) { @content; }
}
@if $point == md {
@media (min-width: 992px) { @content; }
}
@else if $point == lg {
@media (min-width: 1200px) { @content; }
}
@else if $point == xl {
@media (min-width: 1500px) { @content; }
}
}
Owner

jchaney01 commented Jan 30, 2016

Use this like this:

.someClass {
    font-size:20px;
    @include breakpoint(md) {
        font-size:30px;
    }
}

This will make all font sizes 20px for .someClass up to (but not including) the breakpoint defined as md. Once the width of the browser reaches or exceeds the md breakpoint size, the font size for .someClass will be 30px;

This is a mobile-first approach meaning you are overriding smaller viewport sizes, not larger ones. This approach is preferred because mobile layouts are generally usable on desktops but not vise-versa. It is also desired not to include additional mixins like the Neat Grid and others provide which allow "exactly at" or desktop-first approaches in addition to mobile first because it promotes inconsistency across team members.

This technique also groups styling for various sizes together so you are not constantly scrolling around to style a specific element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment