@djx/grid v0.2.0

@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

For more variables see here