jss-grid

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

• Import the grid() function.

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

• 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.

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

'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

'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

--
row
--

--
row n factor
--

Can be any valid CSS/JSS value.

Factor has to be an integer.