Flex React v1.3.1

Flex React is a grid-based set of components for React. It offers the following features:

• Created to be a lightweight grid solution
• Component-based grid system
• Styles written using CSS flexbox
• All styling used is prefixed to work across browsers
• Only peer-dependency is React
• Designed to help build mobile-responsive applications
• Easy to use!

As of v1.2.6, there is no padding prop in any component.

In a later version I may add a method to create a wrapper around these components to specify padding, but I could not resolve a specific style bug where an overflow of Col inside a Row would cause issues.

As a result, Grid has no actual purpose as of v1.2.6.

In the meantime, this package will have no supported way of creating 'gutters'/padding between components. Thanks

Install

npm install --save flex-react

If you don't see any styling appear, import this file somewhere high-level in your app:

import 'flex-react/dist/style.css';

Example

import React, { Component } from 'react';
import { Grid, Row, Col } from 'flex-react';


class Example extends Component {
    render() {
        return (
            <Grid className="example">
                <Row>
                    <Col sm={6}>
                        <p>Apart from on mobile, this will take up 50% of the row!</p>
                    </Col>

                    <Col sm={6}>
                        <p>And this will take up the other 50%!</p>
                    </Col>
                </Row>

                <Row center>
                    <Col xs={4}>
                        <p>This will be centered!</p>
                    </Col>
                </Row>

                <Row>
                    <Col xs={4} xsOffset={4}>
                        <p>This is another way to make something centered!</p>
                    </Col>
                </Row>

                <Row spaceBetween>
                    <Col sm={3}>
                        <p>This will be aligned on the left,</p>
                    </Col>

                    <Col sm={3}>
                        <p>and this will be aligned on the right!</p>
                    </Col>
                </Row>
            </Grid>
        );
    }
}

Notes

Components

Col

Row

Grid

Development

To begin development, run the following:

npm start

This will host a webpack dev server at localhost:3000 where you can play around with the components.

The main file/'test harness' is located under /dev and webpack will serve them from /dev-build.

To modify the components themselves, simply edit them under the /src directory.

To build the files, simply run:

npm run build

File an issue for any bugs found, or if you want any features added. I'm happy to always keep improving this package, let me know if you run into any errors.

Thanks!