Reflexbox

WARNING: Only for Infotech Group employee usage!

Responsive react flexbox grid system on steroids.

Differences from the original version 3.0.1

- Support special units (ui, md, bl) for all quantities
- Support height, (min|max)-height, (min|max)-width
- Alternate dimensions

Getting Started

``
npm install @infotech/reflexbox
`

`jsx
import React from 'react'
import { Box } from '@infotech/reflexbox'

class Component extends React.Component {
render() {
return (

Box A
Box B

)
}
}
`

Usage

`jsx
// Fractional width


// Pixel width


// Responsive widths


// Special units


// Padding


// Responsive padding


// Margin


// Responsive margin


// top, right, bottom, left
mt={1}
mr={2}
mb={3}
ml={2}
/>

// x-axis


// y-axis


// min/max width, min/max-height
minw="1ui"
maxw="2bl"
minh="1md"
maxw="5bl"
/>

// align-items: center


// justify-content: space-between


// Flex wrap


// Flex direction column


// Order


// flex: 1 1 auto

`

API

$3

Primitive for controlling width, height, margin, padding and more.

$3

Both and share the same props.

- w (number|array|string) sets width, where numbers 0-1 are percentage values, larger numbers are pixel values, and strings are raw CSS values with units.
- h (number|array|string) sets height in the same way as width
- minw (number|array|string) sets min-width
- maxw (number|array|string) sets max-width
- minh (number|array|string) sets min-height
- maxh (number|array|string) sets max-height
- flex (boolean) sets display: flex
- wrap (boolean) sets flex-wrap: wrap
- column (boolean) sets flex-direction: column
- auto (boolean) sets flex: 1 1 auto
- order (number) sets order
- align (string) sets align-items
- justify (string) sets justify-content

#### Margin and Padding

Margin and padding props accept numbers 0-4 for values from the spacing scale [ 0, 8, 16, 32, 64 ].
Numbers greater than 4 will be used as pixel values.
Negative values can be used for negative margins.
Strings can be passed for special units, and other CSS values, e.g. mx='auto'

- m (number|string) margin based on a scale from 0–4.
- mx (number|string) x-axis margin based on a scale from 0–4.
- my (number|string) y-axis margin based on a scale from 0–4.
- mt (number|string) margin-top based on a scale from 0–4.
- mb (number|string) margin-bottom based on a scale from 0–4.
- ml (number|string) margin-left based on a scale from 0–4.
- mr (number|string) margin-right based on a scale from 0–4.
- p (number|string) padding based on a scale from 0–4.
- px (number|string) x-axis padding based on a scale from 0–4.
- py (number|string) y-axis padding based on a scale from 0–4.
- pt (number|string) padding-top based on a scale from 0–4.
- pb (number|string) padding-bottom based on a scale from 0–4.
- pl (number|string) padding-left based on a scale from 0–4.
- pr (number|string) padding-right based on a scale from 0–4.

$3

All props accept arrays as values for mobile-first responsive styles.

`jsx
// Set widths for different breakpoints, starting from smallest to largest
// This example will be 100% width below the smallest breakpoint,
// then 50% and 25% for the next two breakpoints respectively

`

Null values can be passed to the array to skip a breakpoint.

`jsx

`




Configuration

Values for the breakpoints and space scale can be configured with
React Context.

Context can be set manually or with the component.


`jsx
import React from 'react'
import { ReflexProvider, Flex, Box } from '@infotech/reflexbox'

const space = [ 0, 6, 12, 18, 24 ]
const breakpoints = [ 32, 48, 64 ]

class App extends React.Component {
render () {
return (
space={space}
breakpoints={breakpoints}>

Box
Box
Box
Box


)
}
}
`

Higher Order Component

The core Reflexbox higher-order component can be used on any element that accepts className as a prop.

`jsx
import React from 'react'
import { reflex } from '@infotech/reflexbox'
import MyInput from './MyInput'

const FlexInput = reflex(MyInput)

const App = () => (



)
``

MIT License