@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
DJX_GRID.marginMax	Max left and right margin	70px

For more variables see here