@djx/grid

Representing a configurable flexgrid

Installation

npm install --save @djx/grid

Usage

Make sure you import the component somewehere in your application first:

import '@djx/grid';

You can then use it like normal web components in your markup:

<djx-grid>
  <djx-grid-row>
    <djx-grid-col xs="12" lg="6">
      <span>Width 12 at XS and 6 at LG</span>
    </djx-grid-col>
    <djx-grid-col xs="12" lg="6">
      <span>Width 12 at XS and 6 at LG</span>
    </djx-grid-col>
  </djx-grid-row>
  <djx-grid-row>
    <djx-grid-col xs="12" lg="[6, 3]">
      <span>Width 12 at XS and 6 with 3 offset at LG</span>
    </djx-grid-col>
    <djx-grid-col xs="12" lg="[6, 3]">
      <span>Width 12 at XS and 6 with 3 offset at LG</span>
    </djx-grid-col>
  </djx-grid-row>
  <djx-grid-row>
    <djx-grid-col xs="6" lg="[6, 0, 2]">
      <span>Width 6 at XS and 6 with 0 offset and switched order at LG</span>
    </djx-grid-col>
    <djx-grid-col xs="6" lg="[6, 0, 1]">
      <span>Width 6 at XS and 6 with 0 offset switched order at LG</span>
    </djx-grid-col>
  </djx-grid-row>
</djx-grid>

The value for the breakpoints has always this format: number or [ number, number?, number? ]

[ number, number?, number? ] translates to [ width, offset, order ]

Variables

| Name | Description | Default | | --------- | ------------- | ------- | | DJX_GRID.columns | The max colums to render | 12 | | DJX_GRID.gutterMin | Min width of the gutter | 20px | | DJX_GRID.gutterMax| Max width of the gutter | 20px | | DJX_GRID.marginMin | | Min left and right margin | 30px | | DJX_GRID.marginMax | Max left and right margin | 70px |

For more variables see here