Everything you can do with Beauter

Alert Messages

Beauter can add various types of alert messages which are dynamic. Click on the "x" symbol to close the alert message.


Using modifiers like _primary, _success, _shadow, _box etc will further shape and alter the design of the alert boxes. Learn more here.


The static alert boxes

A simple static fixed alert box.
<div class="alert">
A simple static fixed alert box.

Dynamic Alert Boxes

× Woah! A dynamic alert box with close button.
<div class="alert _warning _shadow _box">
  <span class="-close">×</span>
  <strong>Woah!</strong> A dynamic alert box with close button.

Script to manage every alert on a page

var close = document.getElementsByClassName("-close");
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function(){
        var div = this.parentElement; = "0";       
        setTimeout(function(){ = "none"; }, 600);


Counters can be used to show numerical counts like number of notifications etc.

<span class="count">3</span>


  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017