Namespace: bp

Members

<private, static> _initBreakpoints

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

Source:

• dd.breakpoints.js, line 82

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:

• dd.breakpoints.js, line 287

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:

• dd.breakpoints.js, line 204

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:

• dd.breakpoints.js, line 270

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:

• dd.breakpoints.js, line 254

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:

• dd.breakpoints.js, line 172

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:

• dd.breakpoints.js, line 159

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:

• dd.breakpoints.js, line 350

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:

• dd.breakpoints.js, line 392

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:

• dd.breakpoints.js, line 418

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:

• dd.breakpoints.js, line 446

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:

• dd.breakpoints.js, line 489

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:

• dd.breakpoints.js, line 450

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:

• dd.breakpoints.js, line 452