Namespace: bp

DD. bp

Breakpoints for JavaScript. Works with the Deloitte Digital SCSS @bp mixin
Version:
  • 1.0.0
Author:
  • Deloitte Digital Australia deloittedigital@deloitte.com.au
License:
  • MIT (http://www.opensource.org/licenses/mit-license.php)
Source:

Members

<private, static> _initBreakpoints

Sorts the breakpoints and assigns them to an associative array for more efficient lookup. Immediately invoked on initialisation
Source:

Methods

<private, static> _bpBetween(min, max, property) → {String}

Returns a min-width and max-width media query based on bp name (can be the same bp name) or px
Parameters:
Name Type Argument Default Description
min String | Number Breakpoint name as a string, or as a number in pixels
max String | Number Breakpoint name as a string, or as a number in pixels
property String <optional>
'width' Property to check using a media query. e.g. width or height
Source:
Returns:
Media query string
Type
String

<private, static> _bpIsValidForStatic(breakpoint, isMax) → {String}

Checks if the breakpoint provided falls inside the valid static min/max region
Parameters:
Name Type Argument Default Description
breakpoint String | Number Breakpoint name as a string, or as a number in pixels
isMax Boolean <optional>
false Flag to determine if the min or max of the breakpoint needs to be used
Source:
Returns:
The converted number in em as a string
Type
String

<private, static> _bpMax(max, property) → {String}

Returns a max-width media query based on bp name or px
Parameters:
Name Type Argument Default Description
max String | Number Breakpoint name as a string, or as a number in pixels
property String <optional>
'width' Property to check using a media query. e.g. width or height
Source:
Returns:
Media query string
Type
String

<private, static> _bpMin(min, property) → {String}

Returns a min-width media query based on bp name or px
Parameters:
Name Type Argument Default Description
min String | Number Breakpoint name as a string, or as a number in pixels
property String <optional>
'width' Property to check using a media query. e.g. width or height
Source:
Returns:
Media query string
Type
String

<private, static> _bpToEms(breakpoint, isMax) → {String}

Converts a breakpoint name/value (e.g. l) to the px variable then to ems
Parameters:
Name Type Argument Default Description
breakpoint String | Number Breakpoint name as a string, or as a number in pixels
isMax Boolean <optional>
false Flag to determine if the min or max of the breakpoint needs to be used
Source:
Returns:
The converted number in em as a string
Type
String

<private, static> _pxToEms(px) → {String}

Converts a number of pixels into em
Parameters:
Name Type Description
px Number Number in pixels
Source:
Returns:
The converted number in em as a string
Type
String

<static> get(min, max, property) → {String}

Breakpoint function that can take the input of a min and max breakpoint by name or number (in px) along with a property (like width or height) and returns the media query as a string
Parameters:
Name Type Argument Default Description
min String | Number Breakpoint name as a string, or as a number in pixels, or in comma separated string notation
max String | Number <optional>
0 Breakpoint name as a string, or as a number in pixels
property String <optional>
'width' Property to check using a media query. e.g. width or height
Source:
Returns:
Media query string
Type
String
Examples
// large and above
DD.bp.get('l');
// 300px and above
DD.bp.get(300);
// large and below
DD.bp.get(0, 'l');
// 300px and below
DD.bp.get(0, 300);
// Between small and large
DD.bp.get('s', 'l');
// Between 100px and 300px
DD.bp.get(100, 300);
// High resolution displays (can use 'hdpi' as well)
DD.bp.get('retina');
// Can mix and match names and numbers - between 200px and xlarge
DD.bp.get(200, 'xl');
// Between small and 960px
DD.bp.get('s', 960);
// Can use a single string (no spaces) - useful for passing through from HTML to JS
DD.bp.get('m,l');
// Can also mix names and numbers
DD.bp.get('xs,1000');

<static> getHeight(min, max) → {String}

Shortcut for the get() function that returns a height based media query and returns the media query as a string
Parameters:
Name Type Argument Default Description
min String | Number Breakpoint name as a string, or as a number in pixels, or in comma separated string notation
max String | Number <optional>
0 Breakpoint name as a string, or as a number in pixels
Source:
Returns:
Media query string
Type
String
Examples
// Height of 300px and above
DD.bp.getHeight(300);
// Height of 300px and below
DD.bp.getHeight(0, 300);
// Between 100px and 300px high
DD.bp.getHeight(100, 300);

<static> is(min, max, property) → {Boolean}

Breakpoint function that takes the same inputs as get() but instead of returning the media query as a string returns if the current page matches that query as a boolean using window.matchMedia(mq).matches
Parameters:
Name Type Argument Default Description
min String | Number Breakpoint name as a string, or as a number in pixels, or in comma separated string notation
max String | Number <optional>
0 Breakpoint name as a string, or as a number in pixels
property String <optional>
'width' Property to check using a media query. e.g. width or height
Source:
Returns:
Type
Boolean
Examples
// returns true if the page is between xs and s
DD.bp.is('xs,s');
DD.bp.is('xs','s');
// returns true if the page is between 0 and 300px wide
DD.bp.is('0,300');
DD.bp.is(0, 300);

<static> isHeight(min, max) → {Boolean}

Shortcut for the is() function that returns a height based media query and returns the media query as a boolean
Parameters:
Name Type Argument Default Description
min String | Number Breakpoint name as a string, or as a number in pixels, or in comma separated string notation
max String | Number <optional>
0 Breakpoint name as a string, or as a number in pixels
Source:
Returns:
Type
Boolean
Example
// returns true if the page is between 0 and 300px high
DD.bp.isHeight('0,300');
DD.bp.isHeight(0, 300);

<static> options(opts) → {Boolean}

User updatable options
Parameters:
Name Type Description
opts DD.bp.Options Options inside the library to be updated
Source:
Returns:
Type
Boolean
Examples
// update the base font size only
DD.bp.options({
  baseFontSize: 14
});
// update the breakpoints
DD.bp.options({
  breakpoints: [
    { name: 'small', px: 400 },
    { name: 'medium', px: 800 },
    { name: 'large', px: 1200 }
  ]
});

Type Definitions

BreakpointOptions

Valid options for the Breakpoints array
Type:
  • Object
Properties:
Name Type Description
name String Name of the breakpoint e.g. 's', 'm', 'l'
px Number Number in px for the size of the breakpoint
Source:

Options

Valid options for the Breakpoints library
Type:
  • Object
Properties:
Name Type Argument Description
baseFontSize Number <optional>
Number in px to be used as a base font size in order to calculate em values
breakpoints DD.bp.BreakpointOptions[] <optional>
Source: