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.

Alerts

1.0.0

Alerts in text

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

<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(BOM)
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.

<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(BOM)
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.

<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(BOM)
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.

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(BOM)
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.

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(BOM)
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.

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(BOM)
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.

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(BOM)
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.

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(BOM)
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 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(BOM)
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.

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(BOM)
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 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(BOM)
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 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(BOM)
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.

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(BOM)
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 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(BOM)
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 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(BOM)
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.

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(BOM)
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 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(BOM)
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 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(BOM)
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(BOM)
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(BOM)
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(BOM)
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.2

Alerts in text

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

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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(BOM)
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.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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(BOM)
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.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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="txt5202">
	<p id="txt5202" 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(BOM)
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.3

Alerts in text

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

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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(BOM)
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.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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-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(BOM)
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.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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="txt5203">
	<p id="txt5203" 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(BOM)
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.
3.0.0

Alert text

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

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

Demo

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependencies: GUI-buttons v4.0.0, GUI-icons v2.0.0
  • Alerts module consists of three alert types...
    • Text (alert): simple inline text styling
    • Alert: structured (block) alert without icon text wrapping (maintains left text edge)
    • Alert form: validation styling for forms
  • Changed alert close button markup structure for consistency; close icon now inside button
  • Alert close button now leverages .btn-link; Alerts module now has a Buttons (and Icons) dependency
  • Alert padding (right-side) is now consistent with other sides; whether or not close button exists
  • Alert body wraps around icon in XS breakpoint; reducing unnecessary left-side whitespace
  • Alert body vertically aligns with icon if needed (small and xsmall disregard); also considers responsive icon sizing
  • Removed flex layout, max-height restrictions and scrolling
  • Alert form (validation) messages now support icons, font-size decreased from 13px to 12px
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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)
<!-- Paragraph (block) -->
<p class="text-{TYPE}">
	{ALERT_TEXT}
</p>

<!-- Span (inline) -->
<span class="text-{TYPE}">
	{ALERT_TEXT}
</span>

CSS

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

LESS

The main mixin is called: _alerts(BOM)
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. Add a suitable alert icon for a more engaging effect.

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

Demo

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependencies: GUI-buttons v4.0.0, GUI-icons v2.0.0
  • Alerts module consists of three alert types...
    • Text (alert): simple inline text styling
    • Alert: structured (block) alert without icon text wrapping (maintains left text edge)
    • Alert form: validation styling for forms
  • Changed alert close button markup structure for consistency; close icon now inside button
  • Alert close button now leverages .btn-link; Alerts module now has a Buttons (and Icons) dependency
  • Alert padding (right-side) is now consistent with other sides; whether or not close button exists
  • Alert body wraps around icon in XS breakpoint; reducing unnecessary left-side whitespace
  • Alert body vertically aligns with icon if needed (small and xsmall disregard); also considers responsive icon sizing
  • Removed flex layout, max-height restrictions and scrolling
  • Alert form (validation) messages now support icons, font-size decreased from 13px to 12px
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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)
<!-- Alert (with small icon for XS breakpoint) and close button -->
<div class="alert alert-{TYPE} alert-box js-alert" role="alert">
	<button type="button" class="alert-close btn btn-link js-alertclose">
		<span class="icon icon-close" [data-grunticon-embed]></span>
	</button>
	<span class="alert-icon icon icon-info icon-small icon-medium-sm" [data-grunticon-embed]></span>
	<div class="alert-body">
		<strong>{ALERT_TEXT_BOLD}</strong> {ALERT_TEXT}
	</div>
</div>

<!-- Alert without close button or icon -->
<div class="alert alert-{TYPE} alert-box" role="alert">
	<div class="alert-body">
		<strong>{ALERT_TEXT_BOLD}</strong> {ALERT_TEXT}
	</div>
</div>

CSS

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

LESS

The main mixin is called: _alerts(BOM)
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

Contextual styles for form input fields with error, warning and success states. The input field and help text will receive the validation styling.

Input Fields and Icons are an independent ingredients (dependencies) so make sure you include them in your blend if necessary.

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependencies: GUI-buttons v4.0.0, GUI-icons v2.0.0
  • Alerts module consists of three alert types...
    • Text (alert): simple inline text styling
    • Alert: structured (block) alert without icon text wrapping (maintains left text edge)
    • Alert form: validation styling for forms
  • Changed alert close button markup structure for consistency; close icon now inside button
  • Alert close button now leverages .btn-link; Alerts module now has a Buttons (and Icons) dependency
  • Alert padding (right-side) is now consistent with other sides; whether or not close button exists
  • Alert body wraps around icon in XS breakpoint; reducing unnecessary left-side whitespace
  • Alert body vertically aligns with icon if needed (small and xsmall disregard); also considers responsive icon sizing
  • Removed flex layout, max-height restrictions and scrolling
  • Alert form (validation) messages now support icons, font-size decreased from 13px to 12px
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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)
<!-- Text input alert -->
<div class="alert-form has-{ALERT_TYPE}">
	<label for="{INPUT_ID}">{LABEL_TEXT}</label>
	<input type="text" id="{INPUT_ID}" class="input-field" placeholder="{PLACEHOLDER_TEXT}" aria-describedby="{ALERT_MESSAGE_ID}">
	<p id="{ALERT_MESSAGE_ID}" class="alert-form-msg">{ALERT_MESSAGE}</p>
</div>

<!-- Select input alert with icon -->
<div class="alert-form has-{ALERT_TYPE}">
	<label for="{INPUT_ID}">{LABEL_TEXT}</label>
	<select class="input-field" id="{INPUT_ID}" aria-describedby="{ALERT_MESSAGE_ID}">
		<option>Please select</option>
		<option>Option A</option>
		<option>Option B</option>
		<option>Option C</option>
		<option>Option D</option>
		<option>Option E</option>
		<option>Option F</option>
		<option>Option G</option>
	</select>
	<p id="{ALERT_MESSAGE_ID}" class="alert-form-msg">
		<span class="icon icon-{NAME} icon-small" [data-grunticon-embed]></span>
		{ALERT_MESSAGE}
	</p>
</div>

CSS

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

LESS

The main mixin is called: _alerts(BOM)
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.
4.0.0

Alert text

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

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, HTML, but not: JS
  • Removed alert form message styling (.alert-form-msg); now managed by the new Form-Base module as .form-error-message. Note: These form error messages no longer require a parent .has-* class (e.g. .has-danger), and are now positioned above the input control for better UX and a11y support, text sizing increased to 14px
  • Alert boxes are now using Flexbox; providing a more robust method to style alert icon and text layout
  • Ensure any text, headings and lists inside alert boxes is styled with the appropriate colour
  • Alert body hidden overflow removed; child element focus outline offset styling no longer chopped
  • New .alert-heading style; resets any top margin

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependencies: GUI-buttons v4.0.0, GUI-icons v2.0.0
  • Alerts module consists of three alert types...
    • Text (alert): simple inline text styling
    • Alert: structured (block) alert without icon text wrapping (maintains left text edge)
    • Alert form: validation styling for forms
  • Changed alert close button markup structure for consistency; close icon now inside button
  • Alert close button now leverages .btn-link; Alerts module now has a Buttons (and Icons) dependency
  • Alert padding (right-side) is now consistent with other sides; whether or not close button exists
  • Alert body wraps around icon in XS breakpoint; reducing unnecessary left-side whitespace
  • Alert body vertically aligns with icon if needed (small and xsmall disregard); also considers responsive icon sizing
  • Removed flex layout, max-height restrictions and scrolling
  • Alert form (validation) messages now support icons, font-size decreased from 13px to 12px
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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)
<!-- Paragraph (block) -->
<p class="text-{TYPE}">
	{ALERT_TEXT}
</p>

<!-- Span (inline) -->
<span class="text-{TYPE}">
	{ALERT_TEXT}
</span>

CSS

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

LESS

The main mixin is called: _alerts(BOM)
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. Add a suitable alert icon for a more engaging effect.

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, HTML, but not: JS
  • Removed alert form message styling (.alert-form-msg); now managed by the new Form-Base module as .form-error-message. Note: These form error messages no longer require a parent .has-* class (e.g. .has-danger), and are now positioned above the input control for better UX and a11y support, text sizing increased to 14px
  • Alert boxes are now using Flexbox; providing a more robust method to style alert icon and text layout
  • Ensure any text, headings and lists inside alert boxes is styled with the appropriate colour
  • Alert body hidden overflow removed; child element focus outline offset styling no longer chopped
  • New .alert-heading style; resets any top margin

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependencies: GUI-buttons v4.0.0, GUI-icons v2.0.0
  • Alerts module consists of three alert types...
    • Text (alert): simple inline text styling
    • Alert: structured (block) alert without icon text wrapping (maintains left text edge)
    • Alert form: validation styling for forms
  • Changed alert close button markup structure for consistency; close icon now inside button
  • Alert close button now leverages .btn-link; Alerts module now has a Buttons (and Icons) dependency
  • Alert padding (right-side) is now consistent with other sides; whether or not close button exists
  • Alert body wraps around icon in XS breakpoint; reducing unnecessary left-side whitespace
  • Alert body vertically aligns with icon if needed (small and xsmall disregard); also considers responsive icon sizing
  • Removed flex layout, max-height restrictions and scrolling
  • Alert form (validation) messages now support icons, font-size decreased from 13px to 12px
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduce module modifier CSS over-specificity
  • Remove duplicated alert label styling (already in Labels module) (#364)
  • Update internal icon sizing classes to new naming convention

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Tweaking has alert class to apply alert colour to input and textarea content so they are more visible. (#315)

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)
<!-- Alert (with small icon for XS breakpoint) and close button -->
<div class="alert alert-{TYPE} alert-box js-alert" role="alert">
	<button type="button" class="alert-close btn btn-link js-alertclose">
		<span class="sr-only">Close</span>
		<span class="icon icon-close" aria-hidden="true" data-grunticon-embed></span>
	</button>
	<span class="alert-icon icon icon-info icon-small icon-medium-sm" aria-hidden="true" data-grunticon-embed></span>
	<div class="alert-body">
		<!-- Heading (optional) -->
		<!-- Nb. Tabindex="-1" for programmatically set focus -->
		<h3 class="alert-heading" tabindex="-1">{ALERT_HEADING}</h3>

		<strong>{ALERT_TEXT_BOLD}</strong> {ALERT_TEXT}
	</div>
</div>

<!-- Alert without close button or icon -->
<div class="alert alert-{TYPE} alert-box" role="alert">
	<div class="alert-body">
		<strong>{ALERT_TEXT_BOLD}</strong> {ALERT_TEXT}
	</div>
</div>

CSS

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

LESS

The main mixin is called: _alerts(BOM)
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.