@djx/grid

0.2.0 • Public • Published

@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

Package Sidebar

Install

Weekly Downloads

71

Version

0.2.0

License

ISC

Unpacked Size

3.37 kB

Total Files

3

Last publish

Collaborators

  • dorfjungs.account
  • schmidtsonian
  • joshuakeck