grid-template-parser

A simple CSS Grid template parser

Installation

npm install --save grid-template-parser

Basic usage

Parse a grid template

import {grid} from 'grid-template-parser';

const areas = grid(`
  "a a a b b"
  "a a a b b"
  ". . c c c"
  "d d d d d"
`);

// → {
//   width: 5,
//   height: 4,
//   areas: {
//     a: {
//       column: {start: 1, end: 4, span: 3},
//       row: {start: 1, end: 3, span: 2},
//     },
//     b: {
//       column: {start: 4, end: 6, span: 2},
//       row: {start: 1, end: 3, span: 2},
//     },
//     c: {
//       column: {start: 3, end: 6, span: 3},
//       row: {start: 3, end: 4, span: 1},
//     },
//     d: {
//       column: {start: 1, end: 6, span: 5},
//       row: {start: 4, end: 5, span: 1},
//     },
//   },
// }

Build a grid template

import {template} from 'grid-template-parser';

const areas = template({
  width: 5,
  height: 4,
  areas: {
    a: {
      column: {start: 1, end: 4, span: 3},
      row: {start: 1, end: 3, span: 2},
    },
    b: {
      column: {start: 3, end: 6, span: 3},
      row: {start: 3, end: 5, span: 2},
    },
  },
});

// → `"a a a . ."
//    "a a a . ."
//    ". . b b b"
//    ". . b b b"`

An helper is provided to declare areas more intuitively. The following example is equivalent to the previous:

import {template, area} from 'grid-template-parser';

const a = area({
  x: 0,
  y: 0,
  width: 3,
  height: 2,
});

const b = area({
  x: 2,
  y: 2,
  width: 3,
  height: 2,
});

const areas = template({
  width: 5,
  height: 4,
  areas: {a, b},
});

// → `"a a a . ."
//    "a a a . ."
//    ". . b b b"
//    ". . b b b"`

API

grid(template)

Parses a grid template and returns an object representation.

Arguments

1. template string The grid template to parse.

Returns

Grid An object representation of the grid template.

Example

import {grid} from 'grid-template-parser';

const areas = grid(`
  "a a a b b"
  "a a a b b"
  ". . c c c"
  "d d d d d"
`);

// → {
//   width: 5,
//   height: 4,
//   areas: {
//     a: {
//       column: {start: 1, end: 4, span: 3},
//       row: {start: 1, end: 3, span: 2},
//     },
//     b: {
//       column: {start: 4, end: 6, span: 2},
//       row: {start: 1, end: 3, span: 2},
//     },
//     c: {
//       column: {start: 3, end: 6, span: 3},
//       row: {start: 3, end: 4, span: 1},
//     },
//     d: {
//       column: {start: 1, end: 6, span: 5},
//       row: {start: 4, end: 5, span: 1},
//     },
//   },
// }

template(grid)

Builds a grid template from an object representation.

Arguments

1. grid Grid The grid to build.

Returns

string The equivalent grid template.

Example

import {template} from 'grid-template-parser';

const areas = template({
  width: 5,
  height: 4,
  areas: {
    a: {
      column: {start: 1, end: 4, span: 3},
      row: {start: 1, end: 3, span: 2},
    },
    b: {
      column: {start: 3, end: 6, span: 3},
      row: {start: 3, end: 5, span: 2},
    },
  },
});

// → `"a a a . ."
//    "a a a . ."
//    ". . b b b"
//    ". . b b b"`

rect(area)

Converts an area into a rect.

Arguments

1. area Area The area to convert.

Returns

Rect The equivalent rect.

Example

import {rect} from 'grid-template-parser';

const r = rect({
  column: {start: 1, end: 4, span: 3},
  row: {start: 1, end: 3, span: 2},
});

// → {
//     x: 0,
//     y: 0,
//     width: 3,
//     height: 2,
//   }

area(rect)

Converts a rect into an area.

Arguments

1. rect Rect The rect to convert.

Returns

Area The equivalent area.

Example

import {area} from 'grid-template-parser';

const a = area({
  x: 0,
  y: 0,
  width: 3,
  height: 2,
});

// → {
//     column: {start: 1, end: 4, span: 3},
//     row: {start: 1, end: 3, span: 2},
//   }

minColumnStart(grid)

Finds the min column start of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min column start.

Example

import {grid, minColumnStart} from 'grid-template-parser';

const min = minColumnStart(grid(`
  ". . a a a"
  ". b b b b"
  ". . . c c"
`));

// → 2

maxColumnStart(grid)

Finds the max column start of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max column start.

Example

import {grid, maxColumnStart} from 'grid-template-parser';

const max = maxColumnStart(grid(`
  ". . a a a"
  ". b b b b"
  ". . . c c"
`));

// → 4

minColumnEnd(grid)

Finds the min column end of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min column end.

Example

import {grid, minColumnEnd} from 'grid-template-parser';

const min = minColumnEnd(grid(`
  "a a . . ."
  "b b b b ."
  "c c c . ."
`));

// → 3

maxColumnEnd(grid)

Finds the max column end of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max column end.

Example

import {grid, maxColumnEnd} from 'grid-template-parser';

const max = maxColumnEnd(grid(`
  "a a . . ."
  "b b b b ."
  "c c c . ."
`));

// → 5

minRowStart(grid)

Finds the min row start of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min row start.

Example

import {grid, minRowStart} from 'grid-template-parser';

const min = minRowStart(grid(`
  ". . . ."
  "a a . ."
  "a a b b"
  "a a b b"
`));

// → 2

maxRowStart(grid)

Finds the max row start of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max row start.

Example

import {grid, maxRowStart} from 'grid-template-parser';

const max = maxRowStart(grid(`
  ". . . ."
  "a a . ."
  "a a b b"
  "a a b b"
`));

// → 3

minRowEnd(grid)

Finds the min row end of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The min row end.

Example

import {grid, minRowEnd} from 'grid-template-parser';

const min = minRowEnd(grid(`
  "a a b b"
  "a a b b"
  ". . b b"
  ". . . ."
`));

// → 3

maxRowEnd(grid)

Finds the max row end of all grid areas.

Arguments

1. grid Grid The grid to analyze.

Returns

number The max row end.

Example

import {grid, maxRowEnd} from 'grid-template-parser';

const max = maxRowEnd(grid(`
  "a a b b"
  "a a b b"
  ". . b b"
  ". . . ."
`));

// → 4

Types

Track

type Track = {
  start: number,
  end: number,
  span: number,
};

Area

type Area = {
  row: Track,
  column: Track,
};

Rect

type Rect = {
  x: number,
  y: number,
  width: number,
  height: number,
};

Grid

type Grid = {
  width: number,
  height: number,
  areas: {[key: string]: Area},
};

License

MIT