Create Alerts in Bedrock

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:

 

 

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.

 

 

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

 

 

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

 

 

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

 

 

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.

 

 

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.