Media Queries, Breakpoints

media-queries-breakpoints.scss

// ————————————————————————————————————o usage —>
// 
// // w/o orientation
// @include bp("medium") {
//   .class {
//     width: 100%;
//   }
// }

// // portrait
// @include bp("medium", "portrait") {
//   .class {
//     width: 100%;
//   }
// }

// // landscape
// @include bp("medium", "landscape") {
//   .class {
//     width: 100%;
//   }
// }



$breakpoints: (
  "640": 640px,
  "768": 768px,
  "1024": 1024px,
  "1280": 1280px,
  "1536": 1536px,

  "xsmall": 320px,
  "iphone": 493px,
  "small": 480px,
  "medium": 672px,
  "large": 1056px,
  "xlarge": 1312px,
  "max": 1584px,
) !default;

/// Mixin to manage responsive breakpoints
/// Addapted from Kitty Giraudel
/// 
/// @param {String} $breakpoint - Breakpoint name
/// @param {String} $orientation - Optional orientation (portrait or landscape)
/// @require $breakpoints
@mixin bp($breakpoint, $orientation: null) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Base media query
    $media-query: "(min-width: #{map-get($breakpoints, $breakpoint)})";

    // Add orientation if provided
    @if $orientation == "portrait" {
      $media-query: "#{$media-query} and (orientation: portrait)";
    } @else if $orientation == "landscape" {
      $media-query: "#{$media-query} and (orientation: landscape)";
    }

    // Apply the media query
    @media #{$media-query} {
      @content;
    }
  }

  // If the key doesn't exist in the map
  @else {
    @warn "no value could be retrieved from `#{$breakpoint}`. "
          + "available breakpoints are: #{map-keys($breakpoints)}.";
  }
}