A flexbox grid system built with styled-components and based on the Solved by Flexbox implementation
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.
__tests__
docs
src
.babelrc
.eslintrc.js
.gitignore
.npmignore
README.md
package.json
yarn.lock

README.md

Flexomatic

A component-based flexbox grid system for React, built with styled-components and based on the Solved by Flexbox implementation.

Why should you use this?

flexomatic aims to be a very simple, lightweight grid system with a flexible API that allows you to get up and running in seconds. It is based on the methodology proposed in Solved by Flexbox, where the goal is to expose a minimal grid system that doesn't weigh the user down with a multitude of options.

Features

  • Each Cell component is the same width by default
  • Full control over individual Cell components, including width and alignment
  • Responsive, with media query support
  • Nested Grids

Getting started

yarn add flexomatic

Note that flexomatic lists styled-components as a peerDependency, therefore it expects you to have styled-components already installed in your project.

import React from 'react'
import { Grid, Cell } from 'flexomatic'

const App = () => (
  <Grid>
    <Cell>1</Cell>
    <Cell>2</Cell>
    <Cell>3</Cell>
  </Grid>
)

Grid

The parent container that initializes a grid. Think of it like a row in bootstrap.

import { Grid } from 'flexomatic'

<Grid />

Available props

flexCells

If passed to the Grid component, all Cell children will have a display property of flex.

direction

Sets the flex-direction of the grid. Available options:

  • row (default)
  • row-reverse
  • column
  • column-reverse

align

Aligns Cell children using the align-items style. Available options:

  • start
  • center
  • end
  • baseline

spacing

A string value representing the default space between Cell components, or the "gutters" (default: "1em").

Cell

The individual columns of a grid.

import { Cell } from 'flexomatic'

<Cell />

Available props

flexed

Assigns an individual Cell's display property to flex. This is useful if you want to make a specific Cell a flex parent without doing so to its siblings.

width

Explicitly sets the width of a Cell as a percentage value using a number greater than 0 and less than or equal to 1.

  // as number
  <Cell width={1} />    // width: 100%

  <Cell width={1/2} />  // width: 50%

  <Cell width={0.25} /> // width: 25%

You can also use keywords full, half, third, and fourthto set the width.

  // as keyword
  <Cell width="full" /> // width: 100%

  <Cell width="half" /> // width: 50%
keyword Width
full 100%
half 50%
third 33.33%
fourth 25%

Multiple widths

The Cell component supports multiple widths for different screen sizes. You can achieve this by passing an array to the width prop. flexomatic supports 3 screen sizes:

Base Tablet Desktop
768px 1024px

Each item in the array represents a different size.

  // as array
  <Cell width={[base, tablet, desktop]} />

  <Cell width={[1, 0.5, 0.25]} />

  <Cell width={['full', 'half', 'fourth']} />

The examples above will result in the styling:

.Cell {
  width: 100%;

  @media (min-width: 768px) {
    width: 50%;
  }

  @media (min-width: 1024px) {
    width: 25%;
  }
}

Note that it's not necessary to pass exactly 3 values to the width array, but more than 3 will result in an error.

Contributing

I'd love to get some feedback and contribution from the community. Feel free to file an issue, create a pull request, or leave some feedback as to how you think this project can be improved! 😄