api

variables

blueq-breakpoints

$blueq-breakpoints: (
  xxs: 240px,
  xs: 320px,
  s: 480px,
  m: 600px,
  l: 768px,
  xl: 1024px,
  xxl: 1200px,
  xxxl: 1600px
) !default;

Description

Default breakpoints. Map of key value pairs representing [breakpoint-name]:[breakpoint-value].

Type

Map

Used by

[function] blueq-bp

blueq-adjust

$blueq-adjust: true !default;

Description

Whether to adjust the max width media queries down by 1 pixel

Type

Boolean

Used by

[mixin] blueq-max
[mixin] blueq-minmax

functions

blueq-bp

@function blueq-bp($size) { ... }

Description

Fetch a breakpoint value from the $blueq-breakpoints map

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	The breakpoint alias from the `$blueq-breakpoints`	`String` or `Number`	—none

Requires

[variable] blueq-breakpoints

mixins

blueq-min

@mixin blueq-min($size) { ... }

Description

Generates a min-width media query

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	The breakpoint alias from the `$blueq-breakpoints` map or an actual unit size.	`String` or `Number`	—none

Content

This mixin allows extra content to be passed (through the @content directive).

blueq-max

@mixin blueq-max($size) { ... }

Description

Generates a max-width media query. If the size is one of the $blueq-breakpoints values then it will be adjusted to that width minus the equivalent of 1 pixel to prevent overlap with min width media queries. To switch off this behaviour globally set $blueq-adjust: false;. To switch off this behaviour for a specific instance pass false as the second mixin paramater

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	The breakpoint alias from the `$blueq-breakpoints` map or an actual unit size.	`String` or `Number`	—none

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

[variable] blueq-adjust

blueq-minmax

@mixin blueq-minmax($size) { ... }

Description

Generates a min-width and max-width media query range

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	The breakpoint alias from the `$blueq-breakpoints` map or an actual unit size.	`String` or `Number`	—none

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

[variable] blueq-adjust