Skip to content

Instantly share code, notes, and snippets.

@ken717w
Last active October 10, 2019 07:36
Show Gist options
  • Save ken717w/50241c99ef340642e94380866f3e6439 to your computer and use it in GitHub Desktop.
Save ken717w/50241c99ef340642e94380866f3e6439 to your computer and use it in GitHub Desktop.
Responsive utilities
@media (max-width: 1199px) {
[data-display-min="wide"] {
display: none !important;
}
}
@media (min-width: 1200px) {
[data-display-max="desktop"] {
display: none !important;
}
}
@media (max-width: 991px) {
[data-display-min="desktop"] {
display: none !important;
}
}
@media (min-width: 992px) {
[data-display-max="tablet"] {
display: none !important;
}
}
@media (max-width: 767px) {
[data-display-min="tablet"] {
display: none !important;
}
}
@media (min-width: 768px) {
[data-display-max="mobile"] {
display: none !important;
}
}
@media (max-width: 360px) {
[data-display-min="mobile"] {
display: none !important;
}
}
@media (min-width: 361px) {
[data-display-max="mini"] {
display: none !important;
}
}
// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----
$screen-breakpoints: (
"wide": 1200px,
"desktop": 992px,
"tablet": 768px,
"mobile": 361px,
"mini": 0px
);
$screen-names: map-keys($screen-breakpoints);
@for $i from 1 through length($screen-names) {
$screen-name: nth($screen-names, $i);
$screen-breakpoint: map-get($screen-breakpoints, $screen-name);
@if ($i > 1) {
// Find the screen breakpoint of the wider level
$prev-screen-name: nth($screen-names, $i - 1);
$prev-screen-breakpoint: map-get($screen-breakpoints, $prev-screen-name);
@media (min-width: $prev-screen-breakpoint) {
[data-display-max="#{$screen-name}"] {
display: none !important;
}
}
}
@if ($i < length($screen-names)) {
@media (max-width: $screen-breakpoint - 1px) {
[data-display-min="#{$screen-name}"] {
display: none !important;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment