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.

$3

- 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.

$3

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:`	`( lg: 80em, // max 1280px md: 64em, // max 1024px sm: 48em, // max 768px xs: 36em // up to 576px )`

$3

npm install @labeg/gridlex --save-dev

$3

1- The basic. Just add a class .grid-* (from -1 to -12)
``

html

	...

2- The precise. Compose cell by cell (with class like .col-*)`html

...

3- The automatic. Just add number of cells you want in the grid (.grid > .col)`html


		...

		...


$3

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://labeg.github.io/gridlex/