@labeg/gridlex
v3.0.15
Published
Just a Flexbox Grid System
Downloads
181
Maintainers
Readme
Gridlex
!!! Fork !!!
Fork for drop deprecated node-sass and support sass 2. The original repository you can find here.
Just a Flexbox Grid System
Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.
The concept is simple: you need to wrap your .col
in a .grid
.
What can we expect?
- Basically each column is the same width as every other cell in the grid.
- But you can add sizing classes to individual columns.
- For responsive designs, you can add classes based on media-queries.
- Top, bottom, or middle. For the grid. And for the columns.
- Grids can be nested. Always. Directly in a column.
Sass, CSS?
I want to include it in my source files!
Just include gridlex/src/gridlex.scss and update the $gl- vars:
Install via Npm
npm install @labeg/gridlex --save-dev
3 ways to use Gridlex
1- The basic. Just add a class .grid-*
(from -1 to -12)
<div class="grid-1">
<div class="col">...</div>
</div>
2- The precise. Compose cell by cell (with class like .col-*
)
<div class="grid">
<div class="col-12">...</div>
</div>
3- The automatic. Just add number of cells you want in the grid (.grid > .col
)
<div class="grid">
<div class="col">...</div>
<div class="col">...</div>
</div>
Gridlex and media-queries
Because of responsive, you sometimes need to change the size of columns: with this keys as classes you can control your layout by media-queries.
Columns can be hidden at breakpoints using _*-0
(e.g. col-4_md-6_sm-0
)
See more : http://labeg.github.io/gridlex/