Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/devlint/gridlex
- Owner: devlint
- License: mit
- Created: 2015-06-25T15:09:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-16T15:23:44.000Z (almost 2 years ago)
- Last Synced: 2025-01-10T04:06:47.618Z (11 days ago)
- Topics: css, css-grid, css3, flexbox-grid, grid, sass, scss
- Language: CSS
- Homepage: http://gridlex.devlint.fr
- Size: 803 KB
- Stars: 1,377
- Watchers: 54
- Forks: 146
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
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.1Based 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