Grid

Beauter supports the responsive grid system, using the most common 12 column grid system. and also 5 column grid recent since the recent 0.3 release. The structure of the grid is that a row consists of 12 columns (or 5) 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} in a global css.

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

5 Column

<div class="row">
<div class="col m1-5 ">1</div>
<div class="col m1-5 ">2</div>
<div class="col m1-5 ">3</div>
<div class="col m1-5 ">4</div>
<div class="col m1-5 ">5</div>
</div>

<div class="row">
<div class="col m1-5 ">1</div>
</div>
<div class="row">
<div class="col m2-5 ">2</div>
</div>
<div class="row">
<div class="col m3-5 ">3</div>
</div>
<div class="row">
<div class="col m4-5 ">4</div>
</div>
<div class="row">
<div class="col m12 ">5</div>
</div>

12 Column

Example

<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>