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.

Demo | NPM | Github

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

Running the tests

$ npm test

To do

• Rename FlexRow and FlexCell components to Row and Col
• Use CSS Modules
• Create Codepen example
• Add Karma and get rid of test classes
• Add outstanding tests
• Configure Travis to push to Github
• Remove unnecessary props, such as startH and startV

License

MIT