Skip to content

Instantly share code, notes, and snippets.

@lvl99
Last active March 2, 2016 10:20
Show Gist options
  • Save lvl99/0821bf849135db335d09 to your computer and use it in GitHub Desktop.
Save lvl99/0821bf849135db335d09 to your computer and use it in GitHub Desktop.
This is just a few ramshackle mixins I put together based on a theory. Don't know if they're suitable for production yet, but check it out. Please note that it's all only supported by `min/max-width`, no pixel density or orientation conditions, or even anything other than the `screen` media type.
/*
* SCSS Dynamic Breakpoint Media Queries
* Author: Matt Scheurich <matt@lvl99.com>
*
* This is just a few ramshackle mixins I put together based on a theory.
* Don't know if they're suitable for production yet, but check it out.
* Please note that it's all only supported by `min/max-width`, no pixel
* density or orientation, or even anything other than the `screen` media type.
*/
// Breakpoints
$width-desktop: 1600px;
$width-laptop-max: $width-desktop - 1;
$width-laptop: 1200px;
$width-tablet-l-max: $width-laptop - 1;
$width-tablet-l: 1024px;
$width-tablet-p-max: $width-tablet-l - 1;
$width-tablet-p: 800px;
$width-mobile-l-max: $width-tablet-p - 1;
$width-mobile-l: 600px;
$width-mobile-p-max: $width-mobile-l - 1;
$width-mobile-p: 300px;
// Single media query
@mixin media( $min-width: 0, $max-width: false, $media: 'screen' ) {
$media-query: '#{$media}';
@if $min-width >= 0 {
$media-query: '#{$media-query} and (min-width: #{$min-width})';
}
@if $max-width and $max-width >= 0 {
$media-query: '#{$media-query} and (max-width: #{$max-width})';
}
@media #{$media-query} {
@content;
}
}
// Multiple media queries (using only device names; see device-#{$device} )
// @example @include devices(mobile, tablet) { @content; }
@mixin devices($devices...) {
$media-query: '';
$i: 0;
$total-devices: length($devices);
@if $total-devices > 0 {
// Generate media query
@each $device in $devices {
$i: $i + 1;
// Add multiple
@if $i > 1 {
$media-query: '#{$media-query},';
}
// Desktop
@if $device == 'desktop' {
$media-query: '#{$media-query} screen and (min-width: #{$width-desktop})';
// Laptop
} @else if $device == 'laptop' {
$media-query: '#{$media-query} screen and (min-width: #{$width-laptop}) and (max-width: #{$width-laptop-max})';
// Computer
} @else if $device == 'computer' {
$media-query: '#{$media-query} screen and (min-width: #{$width-tablet-l})';
// Tablet (Landscape)
} @else if $device == 'tablet-l' {
$media-query: '#{$media-query} screen and (min-width: #{$width-tablet-l}) and (max-width: #{$width-tablet-l-max})';
// Tablet (Portrait)
} @else if $device == 'tablet-p' {
$media-query: '#{$media-query} screen and (min-width: #{$width-tablet-p}) and (max-width: #{$width-tablet-p-max})';
// Tablet
} @else if $device == 'tablet' {
$media-query: '#{$media-query} screen and (min-width: #{$width-tablet-p}) and (max-width: #{$width-tablet-l-max})';
// Mobile (Landscape)
} @else if $device == 'mobile-l' {
$media-query: '#{$media-query} screen and (min-width: #{$width-mobile-l}) and (max-width: #{$width-mobile-l-max})';
// Mobile (Portrait)
} @else if $device == 'mobile-p' {
$media-query: '#{$media-query} screen and (max-width: #{$width-mobile-p-max})';
// Mobile
} @else if $device == 'mobile' {
$media-query: '#{$media-query} screen and (max-width: #{$width-mobile-l-max})';
}
}
// Doits!
@media #{$media-query} {
@content;
}
}
}
// Desktop
@mixin device-desktop {
@include media($width-desktop) {
@content;
}
}
// Laptop
@mixin device-laptop {
@include media($width-laptop, $width-laptop-max) {
@content;
}
}
// Computer (tablet-l, laptop, desktop)
@mixin device-computer {
@include media($width-tablet-l) {
@content;
}
}
// Tablet (landscape)
@mixin device-tablet-l {
@include media($width-tablet-l, $width-tablet-l-max) {
@content;
}
}
// Tablet (portrait)
@mixin device-tablet-p {
@include media($width-tablet-p, $width-tablet-p-max) {
@content;
}
}
// Tablet
@mixin device-tablet {
@include media($width-tablet-p, $width-tablet-l-max) {
@content;
}
}
// Mobile (landscape)
@mixin device-mobile-l {
@include media($width-mobile-l, $width-mobile-l-max) {
@content;
}
}
// Mobile (portrait)
@mixin device-mobile-p {
// Technically it'd be from 0 to next breakpoint...
@include media(0, $width-mobile-p-max) {
@content;
}
}
// Mobile
@mixin device-mobile {
@include media(0, $width-mobile-l-max) {
@content;
}
}
// Show/hide `display` type depending on device
$display-types: ('inline', 'block', 'inline-block', 'table');
@mixin show-hide-display-types($class-name: false) {
@if $class-name {
$class-name: '-#{$class-name}';
}
// Show/hide each display type
@each $display-type in $display-types {
// Set specific .show class for display-type
.show#{$class-name}-#{$display-type} {
display: $display-type;
}
}
.hide#{$class-name} {
display: none;
}
}
@mixin hide-display-types-by-device($devices...) {
$hide-selector: '';
$i: 0;
@each $device in $devices {
@each $display-type in $display-types {
$i: $i + 1;
// Add comma for multiple devices
@if $i > 1 {
$hide-selector: '#{$hide-selector}, ';
}
// Add $device-type
$hide-selector: '#{$hide-selector} .show-#{$device}-#{$display-type}';
}
}
#{$hide-selector} {
display: none;
}
}
// Show/hide elements based on @media breakpoints
@include device-computer {
@include show-hide-display-types('computer');
@include hide-display-types-by-device('tablet', 'mobile');
}
@include device-desktop {
@include show-hide-display-types('desktop');
@include hide-display-types-by-device('tablet', 'mobile');
}
@include device-laptop {
@include show-hide-display-types('laptop');
@include hide-display-types-by-device('tablet', 'mobile');
}
@include device-tablet {
@include show-hide-display-types('tablet');
@include hide-display-types-by-device('computer', 'desktop', 'laptop', 'mobile');
}
@include device-mobile {
@include show-hide-display-types('mobile');
@include hide-display-types-by-device('computer', 'desktop', 'laptop', 'tablet');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment