@union/gridlex

2.5.1 • Public • Published

Gridlex

Just a Flexbox Grid System

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

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

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

I want to include it in my source files!

Just include gridlex/src/gridlex.less or gridlex/src/gridlex.scss and update the $gl- vars:

Variable names Default value
$gl-gridName: grid
$gl-colName: col
$gl-attributeName: class
$gl-gutter: 1rem
$gl-gutter-vertical: 1rem
$gl-mq-list:
(
lg: "screen and (max-width: 80em)", // max 1280px
md: "screen and (max-width: 64em)", // max 1024px
sm: "screen and (max-width: 48em)", // max 768px
xs: "screen and (max-width: 36rem)" // 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)

<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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
2.5.12latest

Version History

VersionDownloads (Last 7 Days)Published
2.5.12

Package Sidebar

Install

npm i @union/gridlex

Weekly Downloads

2

Version

2.5.1

License

MIT

Last publish

Collaborators

  • unionadmin
  • mdavis1