super-simple-flex-grid-react

A react implementation of the [Super Simple Flex Grid]

$3

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

$3

- 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]

$3

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

$3

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

const FlexGridExample = () => (


Col Grow 2


Center


Col Grow 2


);
`

$3

##### GridRow
| Prop | Type | Description |
| ----------- | -------- | ------------------------------- |
| children | any | Child 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:
`css
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`

$3

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

$3

`sh
$ npm test
``

$3

* 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

[Demo]:
[NPM]:
[Github]:


[customClass]:
[center]:
[centerH]:
[centerV]:
[startH]:
[endH]:
[startV]:
[endV]:
[spaceAround]:
[spaceBetween]:
[grow]:
[shrink]:
[ellipsis]:
[noMargin]:


[Super simple flex grid]:
[React]:
[Webpack]:
[Babel]:
[ESLint]:
[Mocha]:
[Chai]:
[Enzyme]:
[istanbul]: