Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@lekoala
Created February 20, 2023 17:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lekoala/22179f272a76df682a5882cf791da499 to your computer and use it in GitHub Desktop.
Save lekoala/22179f272a76df682a5882cf791da499 to your computer and use it in GitHub Desktop.
// Split bootstrap media queries by stylesheet
// @link https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/
// Sample usage:
// <link href="/css/default.min.css" rel="stylesheet" />
// <link href="/css/mobile.min.css" media="screen and (max-width: 767.98px)" rel="stylesheet" />
// <link href="/css/tablet.min.css" media="screen and (min-width: 768px) and (max-width: 991.98px)" rel="stylesheet" />
// <link href="/css/desktop.min.css" media="screen and (min-width: 992px)" rel="stylesheet" />
// <link href="/css/print.min.css" media="print" rel="stylesheet" />
// @include media-breakpoint-only(xs) => mobile.scss
// @include media-breakpoint-only(sm) => mobile.scss
// @include media-breakpoint-only(md) => mobile.scss
// @include media-breakpoint-down(md) => mobile.scss (no need for media query wrapper)
// @include media-breakpoint-down(sm) => mobile.scss
// @include media-breakpoint-only(md) => tablet.scss
// @include media-breakpoint-between(md, lg) => tablet.scss
// @include media-breakpoint-up(lg) => desktop.scss (no need for media query wrapper)
// @include media-breakpoint-up(xl) => desktop.scss
// @include media-breakpoint-up(xxl) => desktop.scss
// @include media-breakpoint-only(xl) => desktop.scss
// @include media-breakpoint-only(xxl) => desktop.scss
$css-sheet: null !default;
$css-sheet-only: (
xs: "mobile",
sm: "mobile",
md: "tablet",
lg: "desktop",
xl: "desktop",
xxl: "desktop",
) !default;
@mixin media-default() {
@if ($css-sheet and $css-sheet != "default") {
// Skip
} @else {
@content;
}
}
// This tweaked version has special support for mobile stylesheets
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$include: true;
$max: breakpoint-max($name, $breakpoints);
@if ($css-sheet) {
// Don't include mobile specific breakpoints except in mobile sheet
@if ($name == "sm" or $name == "md" or $name == "xs") {
$include: false;
}
@if ($css-sheet == "mobile") {
// Include mobile specific breakpoints
@if ($name == "sm" or $name == "md" or $name == "xs") {
$include: true;
// On md, it's already the max on mobile
@if $name == "md" {
$max: false;
}
} @else {
// Skip other breakpoints (lg, xl, xxl)
}
}
}
@if $include {
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
}
// This tweaked version has special support for desktop stylesheets
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$include: true;
$min: breakpoint-min($name, $breakpoints);
@if ($css-sheet) {
// Don't include desktop specific breakpoints except on desktop sheet
@if ($name == "lg" or $name == "xl" or $name == "xxl") {
$include: false;
}
@if ($css-sheet == "desktop") {
// include desktop specific breakpoint
@if ($name == "lg" or $name == "xl" or $name == "xxl") {
$include: true;
// It's already the lowest of desktop
@if $name == "lg" {
$min: false;
}
} @else {
// Skip other breakpoints (xs, sm, md) on desktop
$include: false;
}
}
}
@if $include {
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
}
// Support break point only through $css-sheet-only mapping
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next, $breakpoints);
$include: true;
// Check if we are using the right css sheet
@if ($css-sheet and $css-sheet != "default") {
$only-sheet: map-get($css-sheet-only, $name);
@if ($only-sheet and $only-sheet != $css-sheet) {
// Ignore if not on the right sheet
$include: false;
}
}
@if $include {
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($name, $breakpoints) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($next, $breakpoints) {
@content;
}
}
}
}
// Limited support for tablet styles
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@if ($css-sheet and $css-sheet != "tablet" and ($lower == "md" and $upper == "lg")) {
// Ignore md => lg, it should only be included in tablet.css
} @else {
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($lower, $breakpoints) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($upper, $breakpoints) {
@content;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment