Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ffx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ffx

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

Features/Goals

No boilerplate, no config
Outputs Real CSS™
Nestable
Uses relative units (em)
SSR API

Usage

Basic usage could look like this:

import { Flex, Box } from 'ffx'

<Flex gutter={1} wrap={true}>
  <Box width={1/4}>...</Box>
  <Box width={'200px'}>...</Box>
  <Box width={'auto'}>...</Box>
  <Box width={[ 1, [900, 1/2] ]}>...</Box>
</Flex>

SSR

Pseudo-code:

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>
`)

API

In order to define breakpoints, some properties accept arrays of values (responsive-config). For example, in the below example, the Box is 100% wide below 900 pixels, and 50% wide above 900px:

<Box width={[
  1,
  [900, 1/2]
]} />

All config values:

Flex
- gutter - integer or responsive-config, values are converted to em units i.e. 2 becomes 2em
- wrap - boolean or responsive-config
- alignItems - string, passed directly to align-items: <config> CSS property
- justifyContent - string, passed directly to justify-content: <config> CSS property
Box
- width - integer, string, or responsive-config
- order - integer or responsive-config
- offset - integer, string, or responsive-config

TODO

Docs need work, I know.

MIT License