Bedrock is an open source, lightweight and feature-rich front-end framework for developing responsive, mobile first websites and web apps that I created and maintain.Using Bedrock, I’m going to show you how-to create alerts, which are actionable feedback messages.

There are four different styles of alerts and you can customize the colours for each one using CSS or Sass.

Alerts Example

Here is what the four different types of alerts we can create look like:

Bedrock alerts

HTML

All alerts start by using the alert CSS class:

<div class="alert" role="alert">
    <p>Alert text goes here.</p>
</div>

After the alert CSS class, we will add one of four contextual classes. If you don’t use a contextual class, the alert base will be used, which contains very little styling.

The four contextual classes are: alert-info, alert-success, alert-warning and alert-error.

alert-info is for telling the end user that there is information that they should consider.

<div class="alert alert-info" role="alert">
    <p>Alert text goes here.</p>
</div>

alert-success is for telling the end user that the action performed was successful.

<div class="alert alert-success" role="alert">
    <p>Alert text goes here.</p>
</div>

alert-warning is for telling the end user that the action performed might be wrong or could cause problems.

<div class="alert alert-warning" role="alert">
    <p>Alert text goes here.</p>
</div>

alert-error is for telling the end user that the action performed was done incorrectly in part or whole.

<div class="alert alert-error" role="alert">
    <p>Alert text goes here.</p>
</div>

Links in Alerts

If you want to add links in alerts, that’s not a problem; all you have to do is add a CSS class to the link itself: alert-link. This CSS class works for all alerts.

<div class="alert" role="alert">
    <p>Alert text goes here <a href="#" class="alert-link">link text</a>.</p>
</div>

Customize Alerts using Sass

Bedrock is built with Sass and by using Sass we can easily customize the alert.

Firstly, download Bedrock and unzip/unpack it.

Open the unpacked folder and then navigate to the partials directory in the sass directory. The CSS for the alerts can be found in the _alerts.scss file.