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

Category: CSS & CSS3 , Notification , Recommended | May 7, 2018
Author: gustavoquinalha
Views Total: 2,117
Official Page: Go to website
Last Update: May 7, 2018
License: MIT

Preview:

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

Description:

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>

You Might Be Interested In:


Leave a Reply