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>
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>
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>
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>
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 theflexCells
prop to theGrid
parent.flexCells
is an optional boolean prop type with a default value offalse
.- To manipulate the height of a single
Cell
component, add theflexed
prop to theCell
.flexed
is also an optional boolean prop type with a default value offalse
.
<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>
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>
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>
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>