Jump To:

  1. Variables
    1. $config
    2. $sizes
  2. Mixins
    1. set()
    2. set-sizes()
    3. min()
    4. max()
    5. min-max()
    6. from()
    7. from-each()
    8. embed-for-scripts()
  3. Functions
    1. get()
    2. get-sizes()
    3. get-size()
    4. get-size-value()
    5. exists()

Breakpoint

Utilities for working with breakpoints

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "base":      16px,
  "default" :  "small",
  "gap":       0.01em,
  "null-name": "none",
);
File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: variable
  • Lines (comments): 10-15
  • Lines (code): 17-22

Map Properties

Name Type Default Description
base Number 16px Assumed pixel base, can change based on users font settings so this is just to get us in the ballpark. Note this is not the base font size but the user agent's or user's browser preference. This number is just being used for calculating estimated em sizes from average base. Since pixels are easier to understand but since we allow the user to set their font size. All of our css is relative to that, including most of the layout (rems, other relative units)
gap Number 0.01em The amount to offset min from max media queries incase you are using both (prevent overlap)
null-name String "none" The name of the space from 0 to the first breakpoint (doesn't really matter) used when passing breakpoints to JS via content property (see breakpoint.embed-for-scripts() or cssvar.declare-breakpoint-sizes()) to pass breakpoints to JS. The js ui/breakpoints.js module provides methods for interacting with breakpoints in JS.
default String "small" The name of the breakpoint that is considered the major change (ie desktop to mobile) used by other modules/components

$sizes

Variable Type: Map

The default breakpoint sizes

  • Map of breakpoints
  • Each property is the breakpoints name
  • Each value is that breakpoints point (set in em by default)
$sizes: (
  "small"  : utils.pixel-to-em(680px, get("base")),
  "medium" : utils.pixel-to-em(1200px, get("base")),
  "large"  : utils.pixel-to-em(1500px, get("base"))
);
File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: variable
  • Lines (comments): 47-51
  • Lines (code): 53-57

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 24-27
  • Lines (code): 29-31

Examples

Change default name

@include ulu.breakpoint-set(( "default" : "mini" ));

Parameters

Name Type Description
$changes Map Map of changes

Require

set-sizes()

Mixin

Update the breakpoint sizes map

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 59-66
  • Lines (code): 68-70

Examples

Changing the medium breakpoint and adding jumbo

@include ulu.breakpoints-set-sizes((
  "medium" : 50em,
  "jumbo" : 100em
));

Parameters

Name Type Description Default
$changes Map A map to merge into the breakpoints map
$merge-mode Map Merge strategy see, utils.map-merge options null

Require

min()

Mixin

Create a media query that matches the min-width for a given size

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 116-125
  • Lines (code): 127-133

Examples

@include ulu.breakpoints-min("small") {
  // Your styles
}
@media screen and (min-width: 42.5em) {
   // Your Styles
}

Parameters

Name Type Description
$size String The name of the breakpoint size

Require

max()

Mixin

Create a media query that matches the max-width for a given size

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 135-144
  • Lines (code): 146-152

Examples

@include breakpoints.max("medium") {
  // Your styles
}
@media screen and (max-width: 42.4em) {
   // Your Styles
}

Parameters

Name Type Description
$size Number The name of the breakpoint size

Require

min-max()

Mixin

Create a media query that matches between two breakpoint sizes

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 154-164
  • Lines (code): 166-173

Examples

@include breakpoints.min-max("small", "medium") {
  // Your styles
}
@media screen and (min-width: 42.5) and (max-width: 75em) {
   // Your Styles
}

Parameters

Name Type Description
$size-min String The name of the smallest breakpoint size
$size-max String The name of the largest breakpoint size

Require

from()

Mixin

Create a media query from a specific size in either direction

  • This is for mostly programmatic usage, so that a user could pass a breakpoint configuration that may contain values that go in either direction
  • This way you don't need to repeat conditions (ie if min ... else ...)
File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 175-185
  • Lines (code): 187-199

Examples

$size: map.get($user-breakpoint, "size");
$dir: map.get($user-breakpoint, "direction");
@include breakpoints.from($size, $dir) {
  // Your styles
}

Parameters

Name Type Description
$name String The name of the breakpoint size
$direction String The direction the media query should target (min

Throw

  • ULU: Mixin error (breakpoint.from), incorrect argument

Require

from-each()

Mixin

Utility Method for iterating over a map of breakpoints and apply styles

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 201-208
  • Lines (code): 210-228

Examples

@include breakpoints.fromEach($breakpoints) using ($props) {
  width: map.get($props, "width");
}

Parameters

Name Type Description
$breakpoints String A map with breakpoints direction will be pulled from each items "direction" property, if direction is missing and no breakpoint will wrap the code
$options String A map with options to change the behavior
$options.directionRequired Boolean Require direction throw error if missing direction

Throw

  • ULU: Missing required

Require

embed-for-scripts()

Mixin

Attaches breakpoints to an element pseudo content for access via script

  • Note you can also use cssvar.declare-breakpoints to get a similar implementation with css custom-properties
  • Use with ulu/js/breakpoints (class has options for content property or css custom property)
  • Breakpoints always min-width (upwards) for javascript setup
File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: mixin
  • Lines (comments): 230-233
  • Lines (code): 235-245

Require

Functions

get()

Function

Get a config option

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: function
  • Lines (comments): 33-41
  • Lines (code): 43-45

Examples

Example usage

.test-get {
  font-size: ulu.breakpoint-get("base");
}
.test-get {
  font-size: 16px;
}

Parameters

Name Type Description
$name Map Name of property

Returns

Type Description
* Property Value

Require

get-sizes()

Function

Get all breakpoint sizes

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: function
  • Lines (comments): 72-81
  • Lines (code): 83-85

Examples

Example usage

.test-get {
  $sizes: ulu.breakpoint-get-sizes();
  height: map.get($sizes, "medium");
}
.test-get {
  height: 76em;
}

Returns

Type Description
Map Map of breakpoints (equivalent to $sizes)

Require

get-size()

Function

Get a specific breakpoint's raw value/size

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: function
  • Lines (comments): 87-89
  • Lines (code): 90-93

Parameters

Name Type Description
$size String The name of the size to get

Returns

Type Description
Number The sizes value

Require

get-size-value()

Function

Get a specific breakpoint's size's value and optionally specify max to get the ending/max value for a breakpoint

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: function
  • Lines (comments): 95-97
  • Lines (code): 99-105

Parameters

Name Type Default Description
$max Boolean false Get the max value

Returns

Type Description
Number The value for the given size

Require

exists()

Function

Check if a specific size exist

File Information
  • File: _breakpoint.scss
  • Group: breakpoint
  • Type: function
  • Lines (comments): 107-109
  • Lines (code): 111-114

Parameters

Name Type Description
$name String The breakpoint size to check if exists

Returns

Type
Boolean

Require