- An HTML centric approach to Flexbox, with emphasis on customizability through props.
- 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.
$ npm i super-simple-flex-grid-react
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> );
| Prop | Type | Description |
|---|---|---|
| children | any | Child <FlexCell /> components |
| customClass | string |
Custom class |
| 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;
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
$ npm test- 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
MIT