JarCastingGridlex
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 just wanna use it in my page!
To use Gridlex out of the box, call the gridlex.min.css file in your project :
Via CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">
or
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridlex.min.css" integrity="sha256-z8OrWCce0gDjwavCHKqxiPIo74u8go25fRiqW6jefXk=" crossorigin="anonymous">
I want to include it in my source files!
Just include gridlex/src/gridlex.scss and update the $gl- vars:
| Variable names | Default value |
|---|---|
$gl-colCount: |
12 |
$gl-gridName: |
grid |
$gl-colName: |
col |
$gl-attributeName: |
class |
$gl-gutter: |
1rem |
$gl-gutter-vertical: |
1rem |
$gl-mq-width: |
'max-width' |
$gl-mq-list: |
|
Install via Npm
npm install gridlex --save
Install via Bower
bower install gridlex --save
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)
| CSS Media Query | Applies | Usage |
|---|---|---|
@media screen and (max-width: 36rem) |
Max 576px | _xs-* |
@media screen and (max-width: 48em) |
Max 768px | _sm-* |
@media screen and (max-width: 64em) |
Max 1024px | _md-* |
@media screen and (max-width: 80em) |
Max 1280px | _lg-* |
See more : http://gridlex.devlint.fr