Documentation

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.

base
alert
object
-close

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

Example

The static alert boxes

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

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.
</div>

Script to manage every alert on a page

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

Counter


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

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


News

  • 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