Package Exports

grid-template-parser

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (grid-template-parser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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

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

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

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

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

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

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

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

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

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

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