User feedback and messaging is essential in UI design. Using a cross-brand palette of reserved, contextual colours provides a flexible, consistent message system for common user interactions.
1.0.0

Alerts in text

Convey meaning through colour using our cross-brand, reserved contextual colour palette.

loading example… 
<p class="text-success">
	I'm text-success. I'm accessible.
</p>

CSS

Main classes:
  • text-success
  • text-info
  • text-warning
  • text-danger

LESS

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

Alert boxes

Use alert boxes to differentiate and emphasise inline messaging. These are simple functional elements designed to clearly separate messaging from content. Avoid formatting text.
Add the close button to allow the message to be dismissed and removed from the content flow.

loading example… 
<div class="alert alert-success" role="alert">
	<button type="button" class="alert-close js-alertclose icon icon-cross" data-grunticon-embed>close</button>

	<strong>HERE!</strong> YOUR ALERT TEXT!
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in forms - validation

Contextual styles for error, warning, and success on form controls. Any label, .form-control, and .help-block within that element will receive the validation styles.

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

loading example… 
<div class="alert-form has-danger">
	<input type="text" class="input-field" placeholder="I'm a default text input" aria-describedby="txt5">
	<p id="txt5" class="alert-form-msg">YOUR ALERT MESSAGE HERE.</p>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in text

Convey meaning through colour using our cross-brand, reserved contextual colour palette.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<p class="text-success">
	I'm text-success. I'm accessible.
</p>

CSS

Main classes:
  • text-success
  • text-info
  • text-warning
  • text-danger

LESS

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

Alert boxes

Use alert boxes to differentiate and emphasise inline messaging. These are simple functional elements designed to clearly separate messaging from content. Avoid formatting text.
Add the close button to allow the message to be dismissed and removed from the content flow.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert alert-success" role="alert">
	<button type="button" class="alert-close js-alertclose icon icon-cross" data-grunticon-embed>close</button>

	<strong>HERE!</strong> YOUR ALERT TEXT!
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in forms - validation

Contextual styles for error, warning, and success on form controls. Any label, .form-control, and .help-block within that element will receive the validation styles.

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

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert-form has-danger">
	<input type="text" class="input-field" placeholder="I'm a default text input" aria-describedby="txt5101">
	<p id="txt5101" class="alert-form-msg">YOUR ALERT MESSAGE HERE.</p>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

The main mixin is called: _alerts(WBC)
This module comes with the usual init method:
  • GUI.alerts.init();
1.0.2

Alerts in text

Convey meaning through colour using our cross-brand, reserved contextual colour palette.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<p class="text-success">
	I'm text-success. I'm accessible.
</p>

CSS

Main classes:
  • text-success
  • text-info
  • text-warning
  • text-danger

LESS

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

Alert boxes

Use alert boxes to differentiate and emphasise inline messaging. These are simple functional elements designed to clearly separate messaging from content. Avoid formatting text.
Add the close button to allow the message to be dismissed and removed from the content flow.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert js-alert alert-success" role="alert">
	<button type="button" class="alert-close js-alertclose icon icon-cross" data-grunticon-embed>close</button>

	<strong>HERE!</strong> YOUR ALERT TEXT!
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in forms - validation

Contextual styles for error, warning, and success on form controls. Any label, .form-control, and .help-block within that element will receive the validation styles.

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

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert-form has-danger">
	<input type="text" class="input-field" placeholder="I'm a default text input" aria-describedby="txt5102">
	<p id="txt5102" class="alert-form-msg">YOUR ALERT MESSAGE HERE.</p>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in text

Convey meaning through colour using our cross-brand, reserved contextual colour palette.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<p class="text-success">
	I'm text-success. I'm accessible.
</p>

CSS

Main classes:
  • text-success
  • text-info
  • text-warning
  • text-danger

LESS

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

Alert boxes

Use alert boxes to differentiate and emphasise inline messaging. These are simple functional elements designed to clearly separate messaging from content. Avoid formatting text.
Add the close button to allow the message to be dismissed and removed from the content flow.
For a more friendly look, add an icon but make sure you have the icon in your blend.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert js-alert alert-success" role="alert">
	<button type="button" class="alert-close js-alertclose icon icon-cross" data-grunticon-embed>close</button>

	<span class="alert-icon icon icon-size-md icon-alert" data-grunticon-embed></span>

	<div class="alert-body">
		<strong>HERE!</strong> YOUR ALERT TEXT!
	</div>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in forms - validation

Contextual styles for error, warning, and success on form controls. Any label, .form-control, and .help-block within that element will receive the validation styles.

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

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert-form has-danger">
	<input type="text" class="input-field" placeholder="I'm a default text input" aria-describedby="txt5103">
	<p id="txt5103" class="alert-form-msg">YOUR ALERT MESSAGE HERE.</p>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in text

Convey meaning through colour using our cross-brand, reserved contextual colour palette.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<p class="text-success">
	I'm text-success. I'm accessible.
</p>

CSS

Main classes:
  • text-success
  • text-info
  • text-warning
  • text-danger

LESS

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

Alert boxes

Use alert boxes to differentiate and emphasise inline messaging. These are simple functional elements designed to clearly separate messaging from content. Avoid formatting text.
Add the close button to allow the message to be dismissed and removed from the content flow.
For a more friendly look, add an icon but make sure you have the icon in your blend.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert js-alert alert-success" role="alert">
	<button type="button" class="alert-close js-alertclose icon icon-cross" data-grunticon-embed>close</button>

	<span class="alert-icon icon icon-size-md icon-alert" data-grunticon-embed></span>

	<div class="alert-body">
		<strong>HERE!</strong> YOUR ALERT TEXT!
	</div>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in forms - validation

Contextual styles for error, warning, and success on form controls. Any label, .form-control, and .help-block within that element will receive the validation styles.

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

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert-form has-danger">
	<input type="text" class="input-field" placeholder="I'm a default text input" aria-describedby="txt5104">
	<p id="txt5104" class="alert-form-msg">YOUR ALERT MESSAGE HERE.</p>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in text

Convey meaning through colour using our cross-brand, reserved contextual colour palette.

loading example…

What’s new since v1.0.4

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

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<p class="text-success">
	I'm text-success. I'm accessible.
</p>

CSS

Main classes:
  • text-success
  • text-info
  • text-warning
  • text-danger

LESS

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

Alert boxes

Use alert boxes to differentiate and emphasise inline messaging. These are simple functional elements designed to clearly separate messaging from content. Avoid formatting text.
Add the close button to allow the message to be dismissed and removed from the content flow.
For a more friendly look, add an icon but make sure you have the icon in your blend.

loading example…

What’s new since v1.0.4

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

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert js-alert alert-success" role="alert">
	<button type="button" class="alert-close js-alertclose icon icon-cross" data-grunticon-embed>close</button>

	<span class="alert-icon icon icon-size-md icon-alert" data-grunticon-embed></span>

	<div class="alert-body">
		<strong>HERE!</strong> YOUR ALERT TEXT!
	</div>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in forms - validation

Contextual styles for error, warning, and success on form controls. Any label, .form-control, and .help-block within that element will receive the validation styles.

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

loading example…

What’s new since v1.0.4

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

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert-form has-danger">
	<input type="text" class="input-field" placeholder="I'm a default text input" aria-describedby="txt5200">
	<p id="txt5200" class="alert-form-msg">YOUR ALERT MESSAGE HERE.</p>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in text

Convey meaning through colour using our cross-brand, reserved contextual colour palette.

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

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

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<p class="text-success">
	I'm text-success. I'm accessible.
</p>

CSS

Main classes:
  • text-success
  • text-info
  • text-warning
  • text-danger

LESS

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

Alert boxes

Use alert boxes to differentiate and emphasise inline messaging. These are simple functional elements designed to clearly separate messaging from content. Avoid formatting text.
Add the close button to allow the message to be dismissed and removed from the content flow.
For a more friendly look, add an icon but make sure you have the icon in your blend.

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

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

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert js-alert alert-success" role="alert">
	<button type="button" class="alert-close js-alertclose icon icon-cross" data-grunticon-embed>close</button>

	<span class="alert-icon icon icon-size-md icon-alert" data-grunticon-embed></span>

	<div class="alert-body">
		<strong>HERE!</strong> YOUR ALERT TEXT!
	</div>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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

Alerts in forms - validation

Contextual styles for error, warning, and success on form controls. Any label, .form-control, and .help-block within that element will receive the validation styles.

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

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

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

This version changed: CSS/LESS, HTML and JS
  • Fixed flexbox bug with a handy workaround. (#194)
  • Worked on the no-js fallback and made usability of large alerts better. Not that you should use large alert messages. Let's keep those grumpy messages as short as possible.
  • Icons in those handy alert messages are now tinting the way they should have right from the start. (#190)

What’s new since v1.0.2

This version changed: CSS/LESS, HTML and JS
  • You know the feeling when you're trying to buy a beer at the corner pub on a Friday afternoon after you've just finished a sprint that was particularly difficult and the alert message says: "No more funds" and you know you left the other card at home and never got around to setup cardless cash? Long story short: You now get to make that alert message a bit easier on the eyes by adding icons inside of it to help make Friday afternoons fun again. (#177)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • 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)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • As the built-in faux italic cut off the descenders in alert messages, we changed the font style to a more native style. (#130) 
<div class="alert-form has-danger">
	<input type="text" class="input-field" placeholder="I'm a default text input" aria-describedby="txt5201">
	<p id="txt5201" class="alert-form-msg">YOUR ALERT MESSAGE HERE.</p>
</div>

CSS

Modifier classes:
  • alert-success
  • alert-info
  • alert-warning
  • alert-danger

LESS

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