LIME GRID is a 12-column fluid grid. inspired by flexboxgrid.
You can apply different gutter widths from mobile to large desktop.
The goal is to improve the quality of UI with each optimized design.
Please check the table below for how it works at each breakpoint.
Extra Small (xs) <576px |
Small (sm) >=576px |
Medium (md) >=768px |
Large (lg) >=992px |
Extra Large (xl) >=1200px |
|
---|---|---|---|---|---|
Container width | auto | 540px | 720px | 960px | 1150px |
Gutter width | 20px | 20px | 30px | 30px | 40px |
Outside gutter width | 15px | 15px | 15px | 15px | 20px |
The above is the default setting. You can customize the settings by using PostCSS.
See README for details.
It is a usage similar to Bootstrap and flexboxgrid in order to lower learning cost.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"></div>
</div>
<!-- All breakpoints -->
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
</div>
<!-- Only necessary breakpoints -->
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
If you always have the same number of columns, you can use Shorthand.
<div class="container">
<div class="row">
<!-- Very short -->
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<!-- Extra small -->
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
The column is automatically sized according to the number of columns.
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
Supports nested grids. as well as other frameworks.
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-4"></div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
</div>
</div>
Offset by the specified column.
<div class="container">
<div class="row">
<!-- Shorthand -->
<div class="col-offset-11 col-1"></div>
<!-- Breakpoint -->
<div class="col-xs-offset-11 col-xs-1 ..."></div>
<div class="col-sm-offset-11 col-xs-1 ..."></div>
<div class="col-md-offset-11 col-xs-1 ..."></div>
<div class="col-lg-offset-11 col-xs-1 ..."></div>
<div class="col-xl-offset-11 col-xs-1 ..."></div>
</div>
</div>
Sets the horizontal and vertical alignment position.
<div class="row row-xs-start">
<div class="col-6"></div>
</div>
<div class="row row-xs-center">
<div class="col-6"></div>
</div>
<div class="row row-xs-end">
<div class="col-6"></div>
</div>
<div class="row row-xs-top">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row row-xs-middle">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row row-xs-bottom">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row row-xs-end row-xs-bottom row-md-center row-md-middle">
<div class="col-4"></div>
<div class="col-4"></div>
</div>
Set the column distribution method.
<div class="row row-xs-around">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
<div class="row row-xs-between">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
Sets the order of columns.
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<!-- Always -->
<div class="col col-first">6</div>
<!-- Breakpoint -->
<div class="col col-xs-first">6</div>
</div>
<div class="row">
<!-- Always -->
<div class="col col-last">1</div>
<!-- Breakpoint -->
<div class="col col-xs-last">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
Reverse the order of the columns.
<div class="row row-xs-reverse">
<div class="col-2">1</div>
<div class="col-2">2</div>
<div class="col-2">3</div>
<div class="col-2">4</div>
<div class="col-2">5</div>
<div class="col-2">6</div>
</div>