# gridlex

> Just a Flexbox Grid System

Latest version **2.7.1** (published 2018-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install gridlex
pnpm add gridlex
yarn add gridlex
bun add gridlex
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.1 |
| Published | 2018-02-26 |
| First published | 2015-11-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 552.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1368 |
| Author | https://github.com/devlint |
| Maintainers | webdevlint |
| Keywords | css, grid, col, sass, scss, mediaqueries, flexbox |

## Links

- npm: https://www.npmjs.com/package/gridlex
- Repository: https://github.com/devlint/gridlex
- Homepage: http://gridlex.devlint.fr
- Issues: https://github.com/devlint/gridlex/issues
- npm.io page: https://npm.io/package/gridlex

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 2.7.1 (latest) — 2018-02-26
- 2.7.0 — 2018-02-23
- 2.6.1 — 2017-11-21
- 2.6.0 — 2017-11-16
- 2.5.0 — 2017-11-08
- 2.4.2 — 2017-11-06
- 2.4.1 — 2017-09-06
- 2.4.0 — 2017-07-17
- 2.3.7 — 2017-06-13
- 2.3.6 — 2017-06-12
- 2.3.4 — 2017-06-12
- 2.3.3 — 2017-06-12
- 2.3.2 — 2017-06-12
- 2.3.1 — 2017-04-12
- 2.3.0 — 2017-04-11
- … 17 more at https://npm.io/package/gridlex/versions

## 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 cdnjs:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">
```

**I want to include it in my source files!**

Just include gridlex/src/gridlex.scss 
and 
update the $gl- vars:
<table>
    <thead>
    <tr>
        <th>Variable names</th>
        <th>Default value</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><code>$gl-colCount:</code></td>
        <td><code>12</code></td>
    </tr>
    <tr>
        <td><code>$gl-gridName:</code></td>
        <td><code>grid</code></td>
    </tr>
    <tr>
        <td><code>$gl-colName:</code></td>
        <td><code>col</code></td>
    </tr>
    <tr>
        <td><code>$gl-attributeName:</code></td>
        <td><code>class</code></td>
    </tr>
    <tr>
        <td><code>$gl-gutter:</code></td>
        <td><code>1rem</code></td>
    </tr>
    <tr>
        <td><code>$gl-gutter-vertical:</code></td>
        <td><code>1rem</code></td>
    </tr>
    <tr>
        <td><code>$gl-mq-width:</code></td>
        <td><code>'max-width'</code></td>
    </tr>
    <tr>
        <td><code>$gl-mq-list:</code></td>
        <td><pre><code>(
         lg: 80em, // max 1280px
         md: 64em, // max 1024px
         sm: 48em, // max 768px
         xs: 36em // up to 576px
 )</code></pre></td>
    </tr>
    </tbody>
</table>

### 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
<div class="grid-1">
	<div class="col">...</div>
</div>
```

**2- The precise. Compose cell by cell (with class like `.col-*`)**
```html
<div class="grid">
	<div class="col-12">...</div>
</div>
```

**3- The automatic. Just add number of cells you want in the grid (`.grid > .col`)**
```html
<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`)
<table>
<thead>
	<tr>
		<th>CSS Media Query</th>
		<th>Applies</th>
		<th>Usage</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td><code>@media screen and (max-width: 36rem)</code></td>
		<td>Max 576px</td>
		<td><code><b>_xs</b>-*</code></td>
	</tr>
	<tr>
		<td><code>@media screen and (max-width: 48em)</code></td>
		<td>Max 768px</td>
		<td><code><b>_sm</b>-*</code></td>
	</tr>
	<tr>
		<td><code>@media screen and (max-width: 64em)</code></td>
		<td>Max 1024px</td>
		<td><code><b>_md</b>-*</code></td>
	</tr>
	<tr>
		<td><code>@media screen and (max-width: 80em)</code></td>
		<td>Max 1280px</td>
		<td><code><b>_lg</b>-*</code></td>
	</tr>
</tbody>
</table>

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

---
_Source: https://npm.io/package/gridlex · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._