Documentation

Everything you can do with Beauter


Grid


Beauter supports the responsive grid system, using the most common 12 column grid system. The structure of the grid is that a row consists of 12 columns and their size and existence is controlled by media queries. That is, its dependent on the size of the device hence it makes it responsive.

For general responsiveness, you can use the 'm' prefix, e.g. class="col m4" which operates for the screen size more than that of a tablet. For larger screens such as desktops, you can use the 'd' prefix. If you want to force a column to a particular size, use 'f' prefix'.

By default, beauter adds a 15px padding in the columns. This can be set to zero by adding _noPadding to the specific columns or by using .col {padding:0px}

If you are currently using a mobile device, please tilt your device to landscape mode to see the columns distinctly

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

<div class="row"> <div class="col m3">col-3</div> <div class="col m9">col-9</div> </div> <div class="row"> <div class="col m3">col-3</div> <div class="col m3">col-3</div> <div class="col m3">col-3</div> <div class="col m3">col-3</div> </div> <div class="row"> <div class="col m2">col-2</div> <div class="col m6">col-6</div> <div class="col m4">col-4</div> </div>

col-3
col-9
col-3
col-3
col-3
col-3
col-2
col-6
col-4


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