As the label suggests helpers are random classes or code that you can use to add functionality and assist with front end development.

Javascript Helpers

1.0.0

Smarts in the JavaScript framework to optimise page performance. For example de-bugging, throttling and debouncing.

The JavaScript framework comes with three public methods:
  • GUI.DEBUG To toggle debugging information simply run GUI.DEBUG = true || false
  • GUI.debounce() A common debounce method. Read more here
  • GUI.throttle() A common throttle method. Read more here
1.0.1

Smarts in the JavaScript framework to optimise page performance. For example de-bugging, throttling and debouncing.

The JavaScript framework comes with three public methods:
  • GUI.DEBUG To toggle debugging information simply run GUI.DEBUG = true || false
  • GUI.detectCSS() A simple feature detection method. Run GUI.detectCSS('animation') and get a boolean value back for wether or not the feature is supported.
  • GUI.debounce() A common debounce method. Read more here
  • GUI.throttle() A common throttle method. Read more here

What’s new since v1.0.0

This version changed: JS, but not: HTML CSS/LESS
  • Sometimes we need to find out if a CSS property is supported by the current browser. Nosy as we are, like checking the Facebook profile of an ex-boyfriend... We now have a feature detection method that handles very simple CSS properties. Go and detect, I'm sure CSS won't mind. #162
2.0.0

Smarts in the JavaScript framework to optimise page performance. For example de-bugging, throttling and debouncing.

The JavaScript framework comes with three public methods. You can read a more detail breakdown in our getting-started section.
  • GUI.DEBUG To toggle debugging information simply run GUI.DEBUG = true || false
  • GUI.DEBUGfilter Filter debug messages with this array. Show only messages from eg alerts run: GUI.DEBUGfilter = ['alerts']
  • GUI.detectCSS() A simple feature detection method. Run GUI.detectCSS('animation') and get a boolean value back for wether or not the feature is supported.
  • GUI.debounce() A common debounce method. Read more on CSS-tricks
  • GUI.throttle() A common throttle method. Read more on CSS-tricks

What’s new since v1.0.1

This version changed: JS but not: HTML, CSS/LESS
  • Our debugging messages when switched on in the GUI can be quite noisy. To find zen in all the noise we added a filter to the debugger. Now you can only tune into the module you want to debug. Read more about using the JavaScript framework.

What’s new since v1.0.0

This version changed: JS, but not: HTML CSS/LESS
  • Sometimes we need to find out if a CSS property is supported by the current browser. Nosy as we are, like checking the Facebook profile of an ex-boyfriend... We now have a feature detection method that handles very simple CSS properties. Go and detect, I'm sure CSS won't mind. #162

Accessibility Helpers

1.0.0

Skip links

Used mainly by screen reader users for bypassing or "skipping" over repetitive web page content. 

<a class="sr-skiplink" href="#content">Skip to main content</a>

LESS

The main mixin is called: _accessibility-helpers(WBC)

Screen reader only text

Hides an element to all devices except screen readers. 

<span class="sr-only">Text hidden from user but visible to screen readers</span>

LESS

The main mixin is called: _accessibility-helpers(WBC)
2.0.0

Skip links

Used mainly by screen reader users for bypassing or "skipping" over repetitive web page content.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<a class="sr-skiplink" href="#content">Skip to main content</a>

LESS

The main mixin is called: _accessibility-helpers(WBC)

Screen reader only text

Hides an element to all devices except screen readers.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<span class="sr-only">Text hidden from user but visible to screen readers</span>

LESS

The main mixin is called: _accessibility-helpers(WBC)
2.0.1

Skip links

Used mainly by screen reader users for bypassing or "skipping" over repetitive web page content.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<a class="sr-skiplink" href="#content">Skip to main content</a>

LESS

The main mixin is called: _accessibility-helpers(WBC)

Screen reader only text

Hides an element to all devices except screen readers.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<span class="sr-only">Text hidden from user but visible to screen readers</span>

LESS

The main mixin is called: _accessibility-helpers(WBC)