Skip to content
Teeny-tiny flexbox grid for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
package
README.md
package-lock.json

README.md

ffx

Teeny-tiny flexbox grid for React. 2kb gzipped.

js-standard-style

Features/Goals

  1. No boilerplate, no config
  2. Outputs Real CSS™
  3. Nestable
  4. Uses relative units (em)
  5. SSR API

Usage

ffx exports two components, Flex and Box. Flex is designed to be the wrapper and immediate parent of Box.

import { Flex, Box } from 'ffx'

<Flex>
  <Box />
  <Box />
</Flex>

Examples:

// 1em gutter
<Flex gutter={1} />

// 1em gutter, 2em gutter above 800px
<Flex gutter={[ 1, [ 800, 2 ] ]} />

// wrappable flexbox
<Flex wrap={true} />

// wrappable flexbox, nowrap above 800px
<Flex wrap={[ true, [ 800, false ] ]} />

// passed directly to align-items
<Flex alignItems='flex-start' />

// passed directly to justifyContent
<Flex justifyContent='flex-start' />

// 50% wide
<Box width={1/2} /> // or <Box width={0.5} />

// 100% wide, 50% wide above 800px
<Box width={[ 1, [ 800, 1/2 ] ]} />

// 200px wide
<Box width='200px' />

// fill available space
<Box width='auto' />

// 200px wide, auto width above 800px
<Box width={[ '200px', [ 800, 'auto' ] ]} />

// flex order
<Box order={-1} />

// flex order
<Box order={[ -1, [ 800, 'unset' ] ]} />

// offset by 25%
<Box offset={1/4} width={1/2} />

// offset by 50% above 800px
<Box offset={[[800, 1/2]]} width={[ 1, [ 800, 1/2 ] ]} />

CSS output from above elements:

.⚡︎0{margin-left: -0.5em; margin-right: -0.5em}.⚡︎1{flex-wrap: nowrap}.⚡︎3{margin-left: -0em; margin-right: -0em}.⚡︎4{flex-wrap: wrap}@media(min-width:50em){.⚡︎5{flex-wrap: nowrap}}@media(min-width:50em){.⚡︎2{margin-left: -1em; margin-right: -1em}}

Nesting

Grids are fully nestable.

<Flex gutter={1}>
  <Box width={1/3} />
  <Box width={2/3}>
    <Flex gutter={1}>
      <Box width={1/2} />
      <Box width={1/2} />
    </Flex>
  </Box>
</Flex>

SSR

This isn't production code, just a simplified example.

import { getCSS } from 'ffx'

const html = renderToString(<App />)
const css = getCSS()

res.send(`
<!DOCTYPE html>
<html>
  <head>
    <style id="ffx">${css}</style>
  </head>
  <body>${html}</body>
</html>
`)

MIT License

You can’t perform that action at this time.