Documentation

Everything you can do with Beauter

Alert Messages

Beauter can add various types of alert messages which are dynamic. You can also use -close class and add a × 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.

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>

Note that you need to include beauter.js at the end for the dynamic actions of -close symbol. See how here.

Counter

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

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

Now using both together

You got 5 unread messages!
<div class="alert _nightblue">
  You got <span class="count _danger">5</span> unread messages!
</div>

Sitemap ..

Code licensed under MIT
Docs under CC BY NC SA 4.0.
Designed with
outboxcraft logoOutboxcraft
© 2017