Module: breakpoints

Adding horizontal and vertical breakpoints, similar use case to media queries, but with js API.

Source:

Example

Example usage of module

// JS:
JS.Responsive
    .init()
    .addHorizontalBreakPoint('micro', 420)
    .addHorizontalBreakPoint('tiny', 478)
    .addHorizontalBreakPoint('small', 768)
    .addHorizontalBreakPoint('medium', 992)
    .addHorizontalBreakPoint('large', 1230);

// CSS:
#github-ribbon {
	    position: absolute;
	    top: -(5/$font-size)+rem;
     ...

     html.medium-less & {
		    height: (88/$font-size)+rem;
		    padding: 0;
		    border: 0;
		    background-color: transparent;
	    }

     html.small-less & {
		    display: none;
	    }
}

CSS classes


$breakpointName$-more
applied when display size is higher or equal to provided size for the name
$breakpointName$-less
applied when display size is smaller than provided size for the name
$breakpointName$
applied when display size is higher or equal to provided size and less then next breakpoint size if any

Methods


JS.Responsive.addHorizontalBreakPoint(name, width)

Sets a new horizontal break point for responsive styling.

Parameters:
NameTypeDescription
nameString

Unique name of given break point. Only lower case letters and comma is allowed /[a-z-]+/

widthNumber

Width size in pixels.

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object
Example
JS.Responsive.addHorizontalBreakPoint('medium', 960);

JS.Responsive.addVerticalBreakPoint(name, height)

Sets a new vertical break point for responsive styling.

Parameters:
NameTypeDescription
nameString

Unique name of given break point. Only lower case letters and comma is allowed /[a-z-]+/

heightNumber

Height size in pixels.

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object
Example
JS.Responsive.addVerticalBreakPoint('vertical-medium', 960);

JS.Responsive.disableHorizontalBreakPoints( [_keepActualClasses])

Disable horizontal break points checking and remove all class names from HTML element.

Parameters:
NameTypeArgumentDescription
_keepActualClassesBoolean<optional>

If true, keeps (freezes) actual class names in HTML element.

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object

JS.Responsive.disableVerticalBreakPoints( [_keepActualClasses])

Disable vertical break points checking and remove all class names from HTML element.

Parameters:
NameTypeArgumentDescription
_keepActualClassesBoolean<optional>

If true, keeps (freezes) actual class names in HTML element.

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object

JS.Responsive.enableHorizontalBreakPoints()

Enable horizontal break points checking (if was disabled before).

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object

JS.Responsive.enableVerticalBreakPoints()

Enable vertical break points checking (if was disabled before).

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object

JS.Responsive.getActualHorizontalBreakPoint()

Returns name of actual horizontal break point.

Since:
  • 3.0.0

Source:
Returns:

Name of actual horizontal break point or null if no horizontal break point is set.

Type:
String|null

JS.Responsive.getActualVerticalBreakPoint()

Returns name of actual vertical break point.

Since:
  • 3.0.0

Source:
Returns:

Name of actual vertical break point or null if no vertical break point is set.

Type:
String|null

JS.Responsive.getDocumentHeight()

Returns current document height in pixels (can be smaller than window size because scrollbar reduces it).

Since:
  • 3.0.0

Source:
Returns:
Type:
Number
Example
if (JS.Responsive.getDocumentWidth()>JS.Responsive.getWindowHeight()) ...

JS.Responsive.getDocumentWidth()

Returns current document width in pixels (can be smaller than window size because scrollbar reduces it).

Since:
  • 3.0.0

Source:
Returns:
Type:
Number
Example
if (JS.Responsive.getDocumentWidth()>JS.Responsive.getDocumentHeight()) ...

JS.Responsive.getWindowHeight()

Returns current window height in pixels.

Since:
  • 3.0.0

Source:
Returns:
Type:
Number
Example
if (JS.Responsive.getWindowWidth()>JS.Responsive.getWindowHeight()) ...

JS.Responsive.getWindowWidth()

Returns current window width in pixels.

Since:
  • 3.0.0

Source:
Returns:
Type:
Number
Example
if (JS.Responsive.getWindowWidth()>JS.Responsive.getWindowHeight()) ...

JS.Responsive.isDisabledHorizontalBreakPoints()

Returns if is horizontal break points checking disabled.

Since:
  • 3.0.0

Source:
Returns:
Type:
Boolean

JS.Responsive.isDisabledVerticalBreakPoints()

Returns if is vertical break points checking disabled.

Since:
  • 3.0.0

Source:
Returns:
Type:
Boolean

JS.Responsive.removeHorizontalBreakPoint(name)

Removes a horizontal break point for responsive styling.

Parameters:
NameTypeDescription
nameString

Existing name of break point.

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object
Example
JS.Responsive.removeHorizontalBreakPoint('medium');

JS.Responsive.removeVerticalBreakPoint(name)

Removes a vertical break point for responsive styling.

Parameters:
NameTypeDescription
nameString

Existing name of break point.

Since:
  • 3.0.0

Source:
Returns:

this - for chaining.

Type:
Object
Example
JS.Responsive.removeVerticalBreakPoint('vertical-medium');

Events


changedBreakPointHorizontal
changedBreakPointVertical