Basic Use
Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the span of each column with the small-#, medium-#, and large-# classes.
lotus one is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
Large / 1 row contains 12 columns
Medium / 1 row contains 8 columns
Small / 1 row contains 4 columns
4 columns
1 column
1 column
4 columns
3 columns
2 columns
4 columns
4 columns
1 column
HTML
<div class="row">
<div class="small-full medium-full large-full">...</div>
</div>
<div class="row">
<div class="small-1 medium-1 large-4">...</div>
<div class="small-2 medium-3 large-4">...</div>
<div class="small-1 medium-4 large-4">...</div>
</div>