@lalomts/flexgrid-js v1.0.0

flexgrid-js

flexgrid-js is customizable implementation of flexboxgrid.css built using the features of jss, providing the functionality of the 12 column grid with a simple API.

Install

flexgrid-js is available as an npm package

npm

npm install @lalomts/flexgrid-js

yarn

yarn add @lalomts/flexgrid-js

Usage

Configure the grid

The grid uses the flexboxgrid.css attributes by default. In order to override them, you need to pass an object as argument to the .grid() method.

const gridConfig = { 
  gutterWidth: 16, 
  outerMargin:8 
}

<div className={ FlexGrid.grid(gridConfig)}>  </div> 

Adding rows

Rows can also have several attributes that can be customized in relation to the viewport's width. To configure a row, you pass an object to the .col() method.

const rowConfig = {
  align: { 
    xs: ['bottom'], 
    lg: ['center']
  }
}

<div className={ FlexGrid.row(rowConfig)}> </div>

Adding columns

Just as with rows, columns' attributes need to be configured with an object value passed to the .col()method. There's no need to specify a value for each viewport size, just add the needed viewport values to the desired attribure keys.

const colConfig = { 
  size: {
    xs: 9, 
    md: 3, 
    lg: 6
   }, 
  reverse: {
    xs: true
  }, 
  hidden: {
    lg: true
  }
}

<div className={ FlexGrid.col(colConfig)}> </div>

A complete example

import FlexGrid from '@lalomts/flexgrid-js'

class Home extends Component {
  render() {

  const columnConfig = { 
    size: { 
      xs: 9,
      md: 3, 
      lg: 6}, 
    offset: {
      xs: 4, 
      xl: 2
    }
  }
  
  return (
    <div className={ FlexGrid.grid({ gutterWidth: 8, xl: 1400 })}> 
      <div className={FlexGrid.row({ reverse: true })}>
          <div className={FlexGrid.col( columnConfig )}>
              //Your content 
          </div>
      </div>
    </div>
  )
 }
}

Attributes

The attributes and possible values for each element of the grid:

Grid

Row

Column

Licence

MIT