flexomatic.

A flexbox-based grid system for React built with styled-components.

Introduction

The current version of flexomatic has a small API, only exposing two components at the moment:

Grid

The Grid component initializes a grid section of your UI. Think of it as a row in bootstrap. It takes any number of Cell components as its child.

Cell

The Cell component renders individual columns of your grid. Each Cell takes up the same width by default.

Add another Cell component and see how the grid adapts. Click Next when you're ready to move on.

Note: The Demo component is used for example purposes. Include it as a child of your new Cell.


  <Grid>
    <Cell>
      <Demo>1</Demo>
    </Cell>
    <Cell>
      <Demo>2</Demo>
    </Cell>
  </Grid>
1
2

Grid Direction

You can adjust the direction of the grid using the direction prop. direction is an optional prop, which can take any of the following values:

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

Try adding any of these values to the direction prop on the Grid and watch how the UI changes.


<Grid direction="row">
  <Cell>
    <Demo>1</Demo>
  </Cell>
  <Cell>
    <Demo>2</Demo>
  </Cell>
  <Cell>
    <Demo>3</Demo>
  </Cell>
</Grid>
1
2
3

Grid Alignment

Grid alignment may come in to play if the heights of your Cell components differ. If you need control over grid alignment you can use the align prop.

align is an optional prop that takes takes any of the following values:

  • start
  • center
  • end
  • baseline

<Grid align="center">
  <Cell>
    <Demo>A bunch of nonsense text content to grow the height of this Cell muahaha!</Demo>
  </Cell>
  <Cell>
    <Demo>A medium amount of text content to grow this Cell.</Demo>
  </Cell>
  <Cell>
    <Demo>No respect!</Demo>
  </Cell>
</Grid>
A bunch of nonsense text content to grow the height of this Cell muahaha!
A medium amount of text content to grow this Cell.
No respect!

Grid Spacing

The spacing between Cell components in a grid can be thought of as "gutters". The default size for these gutters in flexomatic is '1em'. This value can be overriden using the spacing prop on the Grid component.

spacing takes a string value such as '1em' or '25px'.


<Grid spacing="25px">
  <Cell>
    <Demo>1</Demo>
  </Cell>
  <Cell>
    <Demo>2</Demo>
  </Cell>
  <Cell>
    <Demo>3</Demo>
  </Cell>
</Grid>
1
2
3

Cell Height

There are certain situations where you will want to have control over the height of a Cell. This can be achieved in a few ways.

  • If you want every Cell to have the same height, add the flexCells prop to the Grid parent. flexCells is an optional boolean prop type with a default value of false.

  • To manipulate the height of a single Cell component, add the flexed prop to the Cell. flexed is also an optional boolean prop type with a default value of false.

<Grid flexCells={false}>
  <Cell>
    <Demo>A bunch of nonsense text content to grow the height of this Cell muahaha!</Demo>
  </Cell>
  <Cell>
    <Demo>2</Demo>
  </Cell>
  <Cell flexed>
    <Demo>3</Demo>
  </Cell>
</Grid>
A bunch of nonsense text content to grow the height of this Cell muahaha!
2
3

Cell Width

By default, all Cell components take up the same width in a Grid. But you can target each individually and manipulate its width using the width prop.

width takes a number greater than 0 and less than or equal to 1. It is then used to calculate the Cell width as a percentage of the Grid width.

The example shows 3 Cell components, each with a differing width of 100%, 75% and 25% respectively.

Using keywords

You are also able to pass any of the following string keywords to the width prop:

  • 'full'
  • 'half'
  • 'third'
  • 'fourth'

Add a keyword to one of the Cell components and see how it responds.


<Grid>
  <Cell width={1}>
    <Demo>1</Demo>
  </Cell>
  <Cell width={3/4}>
    <Demo>2</Demo>
  </Cell>
  <Cell width={0.25}>
    <Demo>3</Demo>
  </Cell>
</Grid>
1
2
3

Media Queries

flexomatic supports multiple Cell widths at different screen sizes. At the moment, these screen sizes are:

  • Desktop: max-width: 1024px
  • Tablet: max-width: 768px
  • Base: min-width: 767px

You can size Cell components at each breakpoint by passing an array of numbers or keywords with the signature:

[base, tablet, desktop]

Play around with different width configurations and resize the browser to see the Cell components adapt.


<Grid>
  <Cell width={[1, 0.5, 0.25]}>
    <Demo>1</Demo>
  </Cell>
  <Cell width={['full', 1/2, 'fourth']}>
    <Demo>2</Demo>
  </Cell>
  <Cell width={[1, 'half', 1/4]}>
    <Demo>3</Demo>
  </Cell>
</Grid>
1
2
3

Nested Grids

The Grid component is fully nestable. Grids in Grids in Grids. Not much to say here. Go wild kids!


<Grid>
  <Cell>
    <Demo>
      <Grid>
        <Cell>
          <Demo>1</Demo>
        </Cell>
        <Cell>
          <Demo>2</Demo>
        </Cell>
      </Grid>
    </Demo>
  </Cell>
  <Cell>
    <Demo>3</Demo>
  </Cell>
  <Cell>
    <Demo>4</Demo>
  </Cell>
</Grid>
1
2
3
4