README
react-lightweight-grid
Component for React to create a grid system structure in a project. It is developed by oscmedgon. There is no demo version at this moment, watch the repo to stay tunned.
The grid structure helps developing a responsive site without tons of css.
The package doesn't use bootstrap, uses sass and css grid to creare a really simple but effective grid.
Installation
$ npm i react-lightweight-grid
Usage
import React from 'React'
import {Grid, Col, Row} from 'react-lightweight-grid';
const gridTest = () => (
<Grid>
<h1>Nested components</h1>
<p>Any nested component without a col component with size propierties fits all the grid</p>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
First element
</Col>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
Second element
</Col>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
Third element
</Col>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
Fourth element
</Col>
<Row>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
First element
</Col>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
Second element
</Col>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
Third element
</Col>
<Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
Fourth element
</Col>
</Row>
</Grid>
)
Support
This component it's planned to implement more features, stay tunned.