React Flex Grid

:fire: In active development :fire:

A simple React based grid system using flex. Uses 12 columns based on the 8px grid system.

To do

• [x] Examples website
• [ ] Project level config
• [x] Testing
• [x] Refine docs

Examples

React Flex Grid Examples

Installation

@nathansearles/react-flex-grid

#Yarn
yarn add @nathansearles/react-flex-grid

#NPM
npm install @nathansearles/react-flex-grid

Column

| Prop | Description | Keys | Values | Types | | ---------- | ----------------------------- | ----------------------- | --------------------------------------------------------------------- | ----------------------- | | columns | Define columns by breakpoint | xs, sm, md, lg, xl, xxl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | string:string\|number | | offsets | Define offsets by breakpoint | xs, sm, md, lg, xl, xxl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string:number | | ordering | Define ordering by breakpoint | xs, sm, md, lg, xl, xxl | any number | string:number |

Examples

Columns

<Column columns={{ xs: 12, md: 10, xl: 8 }}>Lorem ipsum...</Column>

Offsets

<Column offsets={{ xs: 1, md: 2, xl: 4 }}>Lorem ipsum...</Column>

Ordering

<Column ordering={{ xs: 1, md: 2, xl: 1 }}>Lorem ipsum...</Column>

Row

| Prop | Description | Keys | Values | Types | | --------- | ------------------------------------------ | ----------------------- | ---------------------------------- | --------------- | | justify | Define justification by breakpoint | xs, sm, md, lg, xl, xxl | "normal", "start", "center", "end" | string:string | | align | Define alignment by breakpoint | xs, sm, md, lg, xl, xxl | "normal", "start", "center", "end" | string:string | | spacing | Define gutter spacing * 8px by breakpoint | xs, sm, md, lg, xl, xxl | 0 , 1 , 2 , 3 , 4 | string:number |

Examples

Justify

<Row justify={{ xs: 'center', md: 'start', xl: 'end' }}>Lorem ipsum...</Row>

Align

<Row align={{ xs: 'center', md: 'start', xl: 'end' }}>Lorem ipsum...</Row>

Spacing

<Row align={{ xs: 'center', md: 'start', xl: 'end' }}>Lorem ipsum...</Row>

Simple example

import { Container, Row, Column } from '@nathansearles/react-flex-grid';

function App() {
  return (
    <Container>
      <Row>
        <Column columns={{ xs: 12, md: 6, lg: 4 }}>
          <h2>Lorem ipsum dolor sit amet...</h2>
        </Column>
        <Column columns={{ xs: 12, md: 6, lg: 4 }}>
          <h2>Lorem ipsum dolor sit amet...</h2>
        </Column>
      </Row>
    </Container>
  );
}