# jss-grid

> Define CSS Grids using visual syntax.

Latest version **0.1.11** (published 2017-08-22) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install jss-grid
pnpm add jss-grid
yarn add jss-grid
bun add jss-grid
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2017-08-22 |
| First published | 2017-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | janoluhs |
| Maintainers | janoluhs |

## Links

- npm: https://www.npmjs.com/package/jss-grid
- npm.io page: https://npm.io/package/jss-grid

## Recent versions

- 0.1.11 (latest) — 2017-08-22
- 0.1.10 — 2017-08-22
- 0.1.9 — 2017-08-22
- 0.1.8 — 2017-08-22
- 0.1.7 — 2017-08-22
- 0.1.6 — 2017-08-22
- 0.1.5 — 2017-08-22
- 0.1.4 — 2017-08-22
- 0.1.3 — 2017-08-22
- 0.1.2 — 2017-08-21
- 0.1.1 — 2017-08-21
- 0.1.0 — 2017-08-21

## README

# jss-grid

---

Makes CSS Grid code *readable* by giving it a **visual syntax**.

100% native Javascript, no dependencies.


## Install

`npm install --save jss-grid`

`yarn add jss-grid`

## Usage

1. Import the `grid()` function.

2. Spread `...` the return value of `grid()` in the desired JSS class.

3. Sketch your grid in a `` `template literal` `` string.

   * Columns use `| |` (pipe) delimiters
   * Rows use `--` (dash) delimiters.
   * Gaps use `{ }` (curly braces).
   * The entire sketch must be wrapped in ` `` ` , normal strings aren't multiline.

```js
import grid from 'jss-grid'

const styles = {
  className: {
    background: '#eee',
    ...grid(
      `
      {1em, 2em} | 1fr | 8fr | 1fr |
      --
      15fr
      --
      1fr
      --
      `
    )
  }
}
```

NOTE: You can [add any # of columns/rows (of the same size) by adding `n` followed by a factor](#multiple-columns-or-rows-of-the-same-size) inside a column or row definition.

## Reference

### ...grid()


`grid()` returns an object, therefore you must spread the result of the function call in your JSS.

### grid()

`( sketch ) => gridProperties`

`( template literal string ) => object`

Takes sketch `` `template literal` `` and returns object of CSS/JSS grid properties.

Do not call `grid()` with (multiple) normal strings.

### sketch

`` ` ``
```
{row gap, column gap} | column | column | column | column |
--
row
--
row
--
```
`` ` ``

Whitespace and line breaks don't matter.

But each group of definitions (gaps, columns and rows) **must** *begin* and *end* with their respective delimiters. In other words, don't forget to place `|`, `--`, `{` and `}` and their correct positions.

Example.

This template string literal

`` ` ``
```
{1em, 2em} | 1fr | 8fr | 1fr |
--
15fr
--
1fr
--
```
`` ` ``

creates these JSS properties
 
```js
'grid-template-columns': '1fr 8fr 1fr',
'grid-template-rows': '15fr 1fr',
'grid-row-gap': '1em',
'grid-column-gap': '2em',
```

### Multiple columns or rows of the same size

You can add multiple columns/rows of the same size by adding `n` followed by a integer factor inside a column or row definition. 

`1em n 8` will add 8 columns/rows of `1em`.

The proper order of columns/rows before and after multiplication is maintained.

The following example

`` ` ``
```
{5%} | 1fr | 2fr n 11 |
--
1fr n 10
--
2fr
--
```
`` ` ``

produces

```js
'grid-template-columns': '1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr',
'grid-template-rows': '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr',
'grid-gap': '5%',
```

### Gaps

`{ grid gap }`

`{ row gap, column gap }`

`{ row gap, }` `{ , column gap }`

One value defines gap for BOTH rows and column.

Two comma-separated values define DIFFERENT gaps.

One value WITH comma defines row gap OR column gap.

### Columns

`| column |`

`| column n factor |`

Can be any valid CSS/JSS value.

Factor has to be an integer.

### Rows

```js
--
row
--
```
```js
--
row n factor
--
```

Can be any valid CSS/JSS value.

Factor has to be an integer.

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