Everything you can do with Beauter

bol{;} Methodology

Beauter is based on an experimental methodology called bol by Shubham Ramdeo.

bol stands for .base .-object ._layer.

Hence the naming concentions which are to be followed in Beauter as as follows:

  1. All the basic base objects like html tags, and primary div classes are named directly like .base {;} in the CSS and can be accessed directly by base.
  2. All the dependent objects and elements which cannot be used stand alone are named with a hyphen like .-object {;} in the CSS and can be accessed by -object.
  3. All the independent utilities, modifiers and styling layers which can be mixed up together are named with an underscore like ._layer {;} in the CSS and can be accessed by _layer.


  • 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