1.1.0 • Published 4 years ago
@levibeach/grid v1.1.0
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░▓▓▓▓▓▓░░░▓▓▓▓▓▓░░░▓▓▓▓▓▓░░▓▓▓▓▓▓░░░░░░░░░░░░░░░░
░░░░░░░░░░░░▓▓░░░░░░░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░░░░░░░░░░░
░░░░░░░░░░░░▓▓░░▓▓▓▓░░▓▓▓▓▓▓░░░░░░▓▓░░░░▓▓░░░░▓▓░░░░░░░░░░░░░░
░░░░░░░░░░░░▓▓░░░░▓▓░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░░░░░░░░░░░
░░░░░░░░░░░░░░▓▓▓▓▓▓░░▓▓░░░░▓▓░░▓▓▓▓▓▓░░▓▓▓▓▓▓░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Grid is a collection of mixins and variables to create your own css layout framework quickly. It relies on calc()
and advanced CSS selectors.
Setup
- Clone the repo or
npm install lmbgrid
- Include the
_grid.scss
file in your Sass
Usage
.grid-container-element {
$grid-children: '.grid-column-element' !global;
@include grid-container();
@include grid(1, 2, 4, 5);
}
.grid-column-element {
...
}
The above styles will result in a .grid-container-element
which has 4 columns and the layout will be something like this:
| 1 | 2 | 4 | 5 |
Or you can also just do one-off columns like this:
.grid-column-element {
@include grid-col(6);
}
Variables
$grid-gutters 10px
Sets the width of the gutters between the columns.
$grid-columns 12
Sets the number of columns to run the column/gutter calculations against.
$grid-children div
Sets the element that will be used when running the grid()
mixin.
Demo
You can see it in action here.
1.1.0
4 years ago