Accoutrement 4.0.5

Media Queries

$breakpoints (map)

scss 
$breakpoints: () !default;

Establish a map of named breakpoints.

If using Accoutrement Scale, you can use the scale syntax for describing size-relationships and adjustments – and even reference $sizes as though they are $breakpoints. Otherwise, the map should contain only valid CSS length values.

Since 0.1.0:

  • BREAKING: Uses the new shared map syntax, for internal references and adjustments

Examples

scss defining breakpoints 
tools.$breakpoints: (
  'small': 30em,
  'medium': 45em,
);
scss using Accoutrement-scale 
tools.$breakpoints: (
  'small': 30em ('convert-units': 'browser-ems'),
  'medium': '#small' ('times': 1.5),
);

Related

PX, EM, or REM Media Queries? [external]

@function break()

Return a breakpoint from the $breakpoint map, or the Accoutrement-scale $sizes map if it’s available.

Since 1.0.0:

  • NEW: Accepts $do map argument, for on-the-fly adjustments
  • NEW: Accepts $source map argument, for custom breakpoint source-palette
  • NEW: Accepts $scale boolean argument, to turn off access to scale plugin $sizes map

Parameters & Return

$break: (string)

The name or value of a breakpoint

$do: null (map | null)

A map of function/ratio adjustments to run on the returned value

$source: $breakpoints (map)

Optional Accoutrement-format map of breakpoints to use as the origin palette

$scale: true (boolean)

By default, we merge in any $sizes available from the scale plugin – making both $breakpoints and $sizes keys available

@return (length)

The retrieved value of a named breakpoint

@error

$break is not a valid length or keyword

Requires

@function compile()

@function get() [private]

@function error() [private]

$sizes (map)

Used By

@mixin below()

@mixin above()

@mixin between()

@mixin below()

Generate a max–<width/height> query, for styling elements below the given viewport width.

To help with overlapping min/max queries, we remove 1px (or 0.01em) from every max value by default. You can adjust that setting to adjust min values or avoid adjustments using the global $adjust-query-overlap setting.

Since 2.0.0:

  • BREAKING: min/max adjustments applied to all units (not only px/em/rem)
  • NEW: min/max adjustments respect $adjust-query-overlap global setting

Parameters

$max: (length | string)

The name of a documented breakpoint/size, or an arbitarty length to use in the query.

$prop: 'width' ('width' | 'height')

The property (width or height) to test against, for a result of e.g. (max-width: 30em).

Examples

scss 
@include tools.below(30em) {
  html { background: red; }
}
css compiled 
@media (max-width: 29.99em) {
  html {
    background: red;
  }
}
scss 
tools.$breakpoints: ('red': 30em);

@include tools.below('red') {
  html { background: red; }
}
css compiled 
@media (max-width: 29.99em) {
  html {
    background: red;
  }
}

Requires

@function break()

@function nudge-query() [private]

@mixin above()

Generate a min-<width/height> query, for styling elements above the given viewport width.

To help with overlapping min/max queries, we remove 1px (or 0.01em) from max values by default. You can adjust that setting to adjust min values or avoid adjustments using the global $adjust-query-overlap setting.

Since 2.0.0:

  • BREAKING: min/max adjustments applied to all units (not only px/em/rem)
  • NEW: min/max adjustments respect $adjust-query-overlap global setting

Parameters

$min: (length | string)

The name of a documented breakpoint/size, or an arbitrary length to use in the query.

$prop: 'width' ('width' | 'height')

The property (width or height) to test against, for a result of e.g. (min-width: 30em).

Examples

scss 
@include tools.above(50em) {
  html { background: green; }
}
css compiled 
@media (min-width: 50em) {
  html {
    background: green;
  }
}
scss 
tools.$breakpoints: ('green': 50em);

@include tools.above('green') {
  html { background: green; }
}
css compiled 
@media (min-width: 50em) {
  html {
    background: green;
  }
}

Requires

@function break()

@function nudge-query() [private]

@mixin between()

Generate a min-and-max-<width/height> query, for styling elements between given viewport widths.

To help with overlapping min/max queries, we remove 1px (or 0.01em) from every max value by default. You can adjust that setting to adjust min values or avoid adjustments using the global $adjust-query-overlap setting.

Since 2.0.0:

  • BREAKING: min/max adjustments applied to all units (not only px/em/rem)
  • NEW: min/max adjustments respect $adjust-query-overlap global setting

Parameters

$min: (length | string)

The name of a documented breakpoint/size, or an arbitarty length to use as a minimum in the query.

$max: (length | string)

The name of a documented breakpoint/size, or an arbitarty length to use as a maximum in the query.

$prop: 'width' ('width' | 'height')

The property (width or height) to test against, for a result of e.g. (min-width: 30em).

Examples

scss 
@include tools.between(30em, 50em) {
  html { background: yellow; }
}
css compiled 
@media (min-width: 30em) and (max-width: 49.99em) {
  html {
    background: yellow;
  }
}
scss 
tools.$breakpoints: (
  'red': 30em,
  'green': 50em,
);

@include tools.between('red', 'green') {
  html { background: yellow; }
}
css compiled 
@media (min-width: 30em) and (max-width: 49.99em) {
  html {
    background: yellow;
  }
}

Requires

@function break()

@function nudge-query() [private]

Query Utils

$adjust-query-overlap ('min' | 'max' | false)

scss 
$adjust-query-overlap: 'max' !default;

When using both min- and max- media-queries, you will often get a 1px or 1em overlap where neither or both queries are applied. In order to avoid that, we nudge the max- value down by default. Set this variable to min to nudge min- values up, or false to keep both min and max values un-adjusted,

Since 2.0.0:

  • NEW: Allows you to override global max-adjustment default

Related

Prevent Double Breakpoints [external]