Breakpoints for JavaScript. Works with the Deloitte Digital SCSS @bp mixin
- Version:
- 1.0.0
- Copyright:
- 2012-2014 Deloitte Digital Australia - http://www.deloittedigital.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
- Source:
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 -
Options
-
Valid options for the Breakpoints library
Type:
- Object
- Source:
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>