Popovers add small overlays of content for housing secondary information. It’s important to keep secondary information simple and to a minimum. Also, avoid complex functionality.

Modals

1.0.0

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example… 
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(WBC)
This module comes with the usual init method and a public method:
  • GUI.modals.init();
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
1.0.1

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example…

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(WBC)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
2.0.0

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example…

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(WBC)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
2.0.1

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example…

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! 👏
  • The headline in modals was hanging a bit low. We put it up again, tucked it’s shirt in and ironed it’s pants. Now the modal is presentable again. (#219)

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(WBC)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
2.0.2

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We removed the border around the modal. Why? Because you couldn’t see it. (#240)

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! 👏
  • The headline in modals was hanging a bit low. We put it up again, tucked it’s shirt in and ironed it’s pants. Now the modal is presentable again. (#219)

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(WBC)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only

Popovers

1.0.0

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example… 
<div class="popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(WBC)
This module comes with the usual init method:
  • GUI.popovers.init();
1.0.1

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example…

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(WBC)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.0.0

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example…

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(WBC)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.0.1

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
loading example…

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.1

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)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(WBC)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.0.2

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The popover demanded space in the flow on initial page load. Really that didn’t make any sense as the popover was hidden at first and hidden things don’t need no space in the flow. No more space flowing! (#203)

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.1

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)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(WBC)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.

Tooltips

1.0.0

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo
loading example… 
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(WBC)
This module comes with the usual init method:
  • GUI.tooltips.init();
1.0.1

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo
loading example…

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(WBC)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.
2.0.0

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo
loading example…

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(WBC)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.
2.0.1

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • When attaching tooltips to a button element the tooltip got cut off. We explained to buttons that interrupting a well articulated tooltip is rude. Now tooltips won’t stop in the middle of (#220)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140) 
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(WBC)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.