Alerts

Provide meaningful feedback messages across the website in response to user actions.

Building the markup

Wrap any text and an optional close button and one of the modifier class names. The default alert is a notice message with a light orange as background.

      
<div class="alert">
  <a href="#" class="close">x</a>
  This is an alert
</div> 
      
    

Alert variations

You can change the .alert element look & feel by appending class modifiers, such as for colors and appeareance.

   
<div class="alert [primary danger success]">This is an alert</div>
<div class="alert [round radius]">This is an alert</div>
   

Available sass variables

You can customize the alerts really easy by changing the our Sass variables.

  
//General settings
$alert-padding: px-to-rems(9) px-to-rems(40) px-to-rems(9) px-to-rems(16) !default;
$alert-margin-bottom: px-to-rems(20) !default;
$alert-font-size: px-to-rems(13) !default;
$alert-font-weight: normal !default;
$alert-default-background: #e67e22 !default;

//Close settings
$alert-close-font-size: px-to-rems(16) !default;
$alert-close-opacity: 0.3 !default;
$alert-close-hover-opacity: 0.5 !default;
$alert-close-padding: px-to-rems(5) !default;
$alert-close-color: #333 !default;

//Variations
$alert-radius: px-to-rems(3) !default;
$alert-round: px-to-rems(1000) !default;

//Alert styles
$alert-border-width: px-to-rems(1) !default;
$alert-border-style: solid !default;

//Background variations
$alert-primary-background: #3498db !default;
$alert-success-background: #2ecc71 !default;
$alert-danger-background: #e74c3c !default;
  

Advance usage

Don't feel like using the built-in alerts work for you?, don't worry we have included a mixin for you to create your own.

     
@mixin alert($background-color: $alert-default-background, $include-radius: true, $include-round: true) {
  @include alert-base;
  @include alert-style($background-color);

  .close { @include alert-close; }
  @if $include-radius {
    &.radius { @include border-radius($alert-radius); }
  }

  @if $include-round {
  &.round { @include border-radius($alert-round) }
  }
}
     
  

Creating your alerts

So to create your own alerts simply call the mixin like shown below, and send the variables you want to change to meet your needs.

       
 .my-super-alert {
    @include alert;
 } 
       
    

       
<div class="my-super-alert">This is an alert</div>
       
    

Further usage...

For a more advance usage for creating alerts, check out the _alerts.scss file.