Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/devlint/gridlex

Just a CSS Flexbox Grid System
https://github.com/devlint/gridlex

css css-grid css3 flexbox-grid grid sass scss

Last synced: 4 days ago
JSON representation

Just a CSS Flexbox Grid System

Awesome Lists containing this project

README

        

# Gridlex
## Just a Flexbox Grid System

[![Join the chat at https://gitter.im/devlint/gridlex](https://badges.gitter.im/devlint/gridlex.svg)](https://gitter.im/devlint/gridlex?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
v. 2.7.1

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:
```html

```
or
```html

```
[![](https://data.jsdelivr.com/v1/package/npm/gridlex/badge)](https://www.jsdelivr.com/package/npm/gridlex)

**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
)


### 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)**
```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


...

...


```

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