Super-simple-flex-grid-react NPM

super-simple-flex-grid-react

A react implementation of the Super Simple Flex Grid

What the grid is

An HTML centric approach to Flexbox, with emphasis on customizability through props.

What the grid is not

Viewport-specific responsive: In the real world, design often requires pixel perfect implementation. Having responsive styles dictated in HTML through viewport-grow1/grow2/hide/show classes as well as custom css is a pain and hassle to maintain. With this grid system, all responsive behavior is handled with custom CSS.

Installing

$ npm i super-simple-flex-grid-react

Usage

import { FlexRow as Row, FlexCell as Col } from 'node_modules/super-simple-flex-grid-react';

const FlexGridExample = () => (
  <Row>
    <Col grow={2}>
      Col Grow 2
    </Col>
    <Col center customClass={exampleClass}>
      Center
    </Col>
    <Col grow={2}>
      Col Grow 2
    </Col>
  </Row>
);

Options

GridRow

Prop	Type	Description
children	any	Child `<FlexCell />` components
customClass	`string`	Custom class

GridCell

Prop	Type	Description	CSS
children	any	content of cells
customClass	`string`	custom class
center	`bool`	center	`justify-content: center; align-items: center;`
centerH	`bool`	center horizontally	`justify-content: center`
centerV	`bool`	center vertically	`align-items: center`
startH	`bool`	start horizontally	`justify-content: flex-start`
endH	`bool`	end horizontally	`justify-content: flex-end`
startV	`bool`	start vertically	`align-items: flex-start`
endV	`bool`	end vertically	`align-items: flex-end`
spaceAround	`bool`	space around	`justify-content: space-around`
spaceBetween	`bool`	space between	`justify-content: space-between`
shrink	`bool`	shrink	`flex-shrink: 1; flex-grow: 0; flex-basis: inherit;`
noMargin	`bool`	no margin	`margin: 0 !important`
grow	`int`	grow	`flex-grow: x`
ellipsis	`bool`	ellipse text	`overflow: hidden` ^1

^1 Ellipsis prop also adds a child div that contains the following CSS:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Tech

Super-simple-flex-grid-react uses a number of open source projects:

Super simple flex grid - super simple flex grid
React - view library
Webpack - module bundler
Babel - javaScript compiler
ESLint - lint all the things
Tesing
- Mocha - test framework
- Chai - testing assertion library
- Enzyme - testing utility for React
- istanbul - test coverage generator