Create Elegant Alerts And Notices Using Pure CSS – Alerts.css

Alerts.css is a CSS only alerts component which helps you create elegant, responsive, dismissable alerts and notices with custom icons, position, colors, and sizes.

How to use it:

Install & Download.

# Yarn
$ yarn add @gustavoquinalha/alerts-css
# NPM
$ npm install @gustavoquinalha/alerts-css --save

Insert the stylesheet ‘alerts-css.min.css’ into the document.

<link rel="stylesheet" href="/path/to/alerts-css.min.css">

Load the JavaScript ‘alerts-css.min.js’ for the fade animation & dismissable functionality.

<script src="/path/to/alerts.min.js"></script>

Load the Font Awesome (or any other iconic font library) for the alert icons.

<link rel="stylesheet" 
     href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" 
     integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" 
     crossorigin="anonymous">

Create a basic alert box on the webpage.

<div class="alert" style="animation-delay: .2s">
  <div class="alert--icon">
    <i class="fas fa-bell"></i>
  </div>
  <div class="alert--content">
    Alert Content
  </div>
  <div class="alert--close">
    <i class="far fa-times-circle"></i>
  </div>
</div>

Adjust the size of the alert box with the following classes:

• alert_sm: small size
• alert_lg: large size

<div class="alert alert_sm" style="animation-delay: .1s">
  <div class="alert--icon">
    <i class="fas fa-bell"></i>
  </div>
  <div class="alert--content">
    Small Alert
  </div>
  <div class="alert--close">
    <i class="far fa-times-circle"></i>
  </div>
</div>
<div class="alert alert_lg" style="animation-delay: .3s">
  <div class="alert--icon">
    <i class="fas fa-bell"></i>
  </div>
  <div class="alert--content">
    Large Alert
  </div>
  <div class="alert--close">
    <i class="far fa-times-circle"></i>
  </div>
</div>

The library also comes with 5 themes from which you can choose for your web app:

• alert_success
• alert_info
• alert_danger
• alert_warning
• alert_dark

<div class="alert alert_success">
  <div class="alert--icon">
    <i class="fas fa-check-circle"></i>
  </div>
  <div class="alert--content">
    Success Alert
  </div>
  <div class="alert--close">
    <i class="far fa-times-circle"></i>
  </div>
</div>

You can also create sticky alerts and notices that will always display on the screen and OPTIONALLY dismiss after a certain timeout.

<div class="fixed-alerts fixed-alerts_top fixed-alerts_left">
                  
  <div class="alert alert_info alert_none alert-fade" id="alert-top-left" data-fade-time="3">
    <div class="alert--icon">
      <i class="fas fa-check-circle"></i>
    </div>
    <div class="alert--content">
      Sticky Alert
    </div>
    <div class="alert--close">
      <i class="far fa-times-circle"></i>
    </div>
  </div>
  
</div>