diff --git a/megatype/_config.scss b/megatype/_config.scss index 59a04f6..029d5fd 100644 --- a/megatype/_config.scss +++ b/megatype/_config.scss @@ -61,7 +61,7 @@ $baseline-scaling: false !default; // enable formal baseline grid // snaps all type to the baseline grid // for best results, declare spacing and leading using unitless numbers in typeset mixin -// can be disabled per-typeset mixin by passing last paramter ($snap) as false +// can be disabled per-typeset mixin by passing last parameter ($snap) as false $baseline-snap: true !default; // baseline subdivisions specify a fraction of the grid that type can be snapped to. @@ -98,6 +98,24 @@ $breakpoint-map: ( ) ) !default; +// map for semantic retrieval of brekpoints +// +// The key is the alias, and the value is a list of two values (min, max) +// meant to be the arguments of the media() mixin. +$breakpoint-aliases: ( + // basic min-max aliases + 'xs': (0, 1), + 's': (1, 2), + 'm': (2, 3), + 'l': (3, 4), + 'xl': (4, 0), +) !default; + +// More aliases can be added with the add-breakpoint-alias() mixin. +//@include add-breakpoint-alias('medium screen', (1, 3)); +//@include add-breakpoint-alias('large screen', (3, 0)); +//@include add-breakpoint-alias('medium or large screen', (1, 0)); + // default breakpoint. This is where the default html font size will be set, // media queries will be generated to either side to apply rootsizes at remaining breakpoints // eg: for mobile first set this to 0, for desktop first set this to your largest breakpoint (with this config, 4) diff --git a/megatype/_media.scss b/megatype/_media.scss index 94854e5..596727b 100644 --- a/megatype/_media.scss +++ b/megatype/_media.scss @@ -141,3 +141,55 @@ } } } + +// add breakpoint aliases that can be be used with the respond-to() mixin. +@mixin add-breakpoint-alias($alias, $breakpoint-range, $overwrite: false) { + $output: ($alias: $breakpoint-range); + + @if type-of($breakpoint-range) != 'list' or length($breakpoint-range) != 2 { + @warn "Your breakpoint range must be a list of exactly two values, corresponding to the parameters of the media() mixin."; + } + @else if length($breakpoint-aliases) == 0 { + $breakpoint-aliases: $output !global; + } + @else { + @if map-has-key($breakpoint-aliases, $alias) and $overwrite != true { + @warn "You already have a breakpoint aliased to `#{$alias}`, please choose another breakpoint alias, or pass in `$overwrite: true` to overwrite the previous breakpoint."; + $breakpoint-aliases: $breakpoint-aliases !global; + } + @else if not map-has-key($breakpoint-aliases, $alias) or $overwrite == true { + $breakpoint-aliases: map-merge($breakpoint-aliases, $output) !global; + } + } +} + +// respond to named breakpoints, code based on http://breakpoint-sass.com/ +@mixin respond-to($alias) { + @if type-of($breakpoint-aliases) != 'map' { + // Just in case someone writes gibberish to the $breakpoints variable. + @warn "Your breakpoint aliases aren't a map! `respond-to` expects a map. Please check the value of $breakpoint-aliases variable."; + @content; + } + @else if map-has-key($breakpoint-aliases, $alias) { + $breakpoint-range: map-get($breakpoint-aliases, $alias); + @if type-of($breakpoint-range) != 'list' or length($breakpoint-range) != 2 { + @warn "Your breakpoint range must be a list of exactly two values, corresponding to the parameters of the media() mixin."; + @content; + } + @else { + $min: nth($breakpoint-range, 1); + $max: nth($breakpoint-range, 2); + @include media($min, $max) { + @content; + } + } + } + @else if not map-has-key($breakpoint-aliases, $alias) { + @warn "`#{$alias}` isn't a defined breakpoint! Please add it using `$breakpoints: add-breakpoint(`#{$alias}`, $value);`"; + @content; + } + @else { + @warn "You haven't created any breakpoints yet! Make some already! `@include add-breakpoint-alias($alias, $breakpoint-range)`"; + @content; + } +}