gridlex 0,1,2,1,2,0 grunt Bower npm

Just a CSS Flexbox Grid System

2 years after MIT

Gridlex

Just a Flexbox Grid System

Join the chat at https://gitter.im/devlint/gridlex v. 2.2.2

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.

Less, 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 cdnjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.2/gridlex.min.css">

Via jsdelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.2.2/gridlex.min.css">

I want to include it in my source files!

Because I'm working with Less, Gridlex comes first in Less (with less-compilation Grunt task).

But there is the same version in Sass in the src folder.

Include gridlex/src/gridlex.less or gridlex/src/gridlex.scss

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: 35.5em) Max 568px _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-*

Install

npm

npm install gridlex --save

bower

bower install gridlex --save

See more : http://gridlex.devlint.fr

Related Repositories

awesome-css

awesome-css

A curated list of awesome CSS frameworks, libraries and software. ...


Top Contributors

oneTea devlint sconstantinides arhoads PeterDaveHello vlsoprun gitter-badger

Dependencies

package version
dev cssnano ^3.10.0
node-sass ^4.5.3
postcss-cli ^4.1.0

Releases

-   2.2.2 zip tar
-   2.2.1 zip tar
-   2.2.0 zip tar
-   2.1.1 zip tar
-   2.1.0 zip tar
-   2.0.9 zip tar
-   2.0.8 zip tar
-   2.0.7 zip tar
-   2.0.6 zip tar
-   2.0.5 zip tar
-   2.0.4 zip tar
-   2.0.3 zip tar
-   2.0.2 zip tar
-   2.0.1 zip tar
-   2.0.0 zip tar
-   1.0.1 zip tar
-   1.0.0 zip tar