Overview

Responsive utilizes several advanced techniques in order to provide a true cross browser experience. Within the core these are exposed via jQuery to all the plugins and to all developers allowing them to expand upon the framework.

General Tools

The following tools are used for the general running of the framework.

$.pseudoUnique(length)

Returns a pseudo unique alpha-numeric string of the given length. Defaults to 8 which gives a very low collision rate.

$.support.currentGrid()

Returns an object indicating what grid range the current browser width is within.

grid: The current applied grid; either , s, m, or l.
index: The index of the current grid in the range. Zero based.
range: An array containing the available grid range.

$.debounce()

Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked.

function: The function to debounce.
wait: The number of milliseconds to delay.
immediate: Specify execution on the leading edge of the timeout.

:attrStart(value) selector

This selector matches any target that contains an attribute starting with the given value.

$.buildDataOptions($elem, options, prefix, namespace)

Creates an object containing options populated from an elements data attributes.

$elem: The object representing the DOM element.
options: The object to extend.
prefix: The prefix with which to identify the data attribute.
namespace: The namespace with which to segregate the data attribute.

Transition Tools

The following methods aid with the management of CSS transitions.

$.support.transition: Returns an object with a single property .end if the browser supports CSS transitions. Otherwise; false.
$(target).redraw(): Forces the browser to repaint which will trigger a CSS transition.
$(target).ensureTransitionEnd(duration): Ensures that the transition end callback is triggered after the given duration in milliseconds. If no duration is set then it will attempt to work out the transition time using the elements style rules.
$(target).onTransitionEnd(callback): Performs the given callback function at the end of a CSS transition.

Touch Tools

The following methods aid with the management of touch detection and support.

$.support.touchEvents

Returns true if the browser supports touch events. Otherwise; false.

$.support.pointerEvents

Returns true if the browser supports pointer events. Otherwise; false.

swipe event

A special event that can be bound or unbound to an target using jquery'son() and off(). This allows the element to register and respond to swipe actions.

The following data can be passed to handler in event.data when the event is triggered.

touchAction: The touch action to respond to which restricts the direction that you can scroll within. pan-x, pan-y, or the default none
sensitivity: Defined as a percentage of the target elements height or width. Defaults to 5.

Once bound the element exposes the following events. These can be suffixed on initialization.

swipestart

This event is fired immediately when a swipe instance is detected on pointer down. The event data contains three custom properties:

x: The horizontal position in pixels within the current viewport.
y: The vertical position in pixels within the current viewport.
time: The current Date.

swipemove

This event is fired when the pointer is moved across the surface of the device. The event data contain the custom property delta:

x: The horizontal position in pixels within the current viewport.
y: The vertical position in pixels within the current viewport.

swipeend

This event is fired immediately when on pointer up or mouse leave. The event data contains three custom properties:

delta: The horizontal and vertical position in pixels within the current viewport.
direction: The direction of the swipe: up, down, left, right.
duration: The time in milliseconds between the beginning and end of a swipe action instance.