fannypack
Version:
An accessible, composable, and friendly React UI Kit
355 lines (305 loc) • 8.64 kB
text/mdx
---
name: Columns
route: /layout/columns
menu: Layout
---
import { Playground, PropsTable } from 'docz';
import { Box } from '../primitives/index';
import { Column } from '../Column';
import Columns from './index';
# Columns
## Import
`import { Column, Columns } from 'fannypack'`
## Basic Usage
Fannypack uses a **12 column** flexbox based responsive column system.
To create a basic columned layout, add a `<Columns>` component and then add your `<Column>`s.
By default, each `<Column>` will have an **equal width** and you can have up to **12** columns.
<Playground>
<Columns>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
First column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Second column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Third column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Fourth column
</Box>
</Column>
</Columns>
</Playground>
## Sizes
A width for the column can also be specified using the `spread` prop. `spread` can be any number between `1` and `12`.
<Playground>
<Columns>
<Column spread={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
6
</Box>
</Column>
<Column spread={3}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
3
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Auto (2)
</Box>
</Column>
<Column spread={1}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
1
</Box>
</Column>
</Columns>
</Playground>
## Offsets
To avoid using empty columns to offset, an `spreadOffset` prop can be used to offset the column.
If a value of `left`, `right` or `both` is given, then the offset will apply to that area of the column.
<Playground>
<Columns>
<Column spread={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
6
</Box>
</Column>
<Column spread={2} spreadOffset="left">
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
2
</Box>
</Column>
</Columns>
<Columns>
<Column spread={2} spreadOffset="right">
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
2
</Box>
</Column>
<Column spread={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
6
</Box>
</Column>
</Columns>
<Columns>
<Column spread={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
6
</Box>
</Column>
<Column spread={2} spreadOffset="both">
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
2
</Box>
</Column>
</Columns>
</Playground>
However, a more specific value (between `1` and `11`) can be provided and is offset to the left of the column.
<Playground>
<Columns>
<Column spread={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
6
</Box>
</Column>
<Column spread={3} spreadOffset={3}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
3
</Box>
</Column>
</Columns>
<Columns>
<Column spread={2}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
2
</Box>
</Column>
<Column spread={6} spreadOffset={4}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
6
</Box>
</Column>
</Columns>
<Columns>
<Column spread={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
6
</Box>
</Column>
<Column spread={3} spreadOffset={2}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
3
</Box>
</Column>
</Columns>
</Playground>
## Variable column sizes
Column sizes may depend on the viewport. The `spreadMobile`, `spreadTablet`, `spreadDesktop`, `spreadWidescreen` and `spreadFullHD` props come in handy for these scenarios.
- `spreadMobile` is effective for a window width smaller than **480px**.
- `spreadTablet` is effective for a window width smaller than **768px**.
- `spreadDesktop` is effective for a window width smaller than **1024px**.
- `spreadWidescreen` is effective for a window width smaller than **1200px**.
- `spreadFullHD` is effective for a window width smaller than **1440px**.
- `spread` is effective for every viewport size, and viewports larger than **1440px**.
<Playground>
<Columns>
<Column spread={10} spreadDesktop={8} spreadMobile={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
All: 10
<br/>
Desktop: 8
<br/>
Mobile: 6
</Box>
</Column>
<Column spread={2} spreadDesktop={4} spreadMobile={6}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem">
All: 2
<br/>
Desktop: 4
<br/>
Mobile: 6
</Box>
</Column>
</Columns>
</Playground>
Variable spread offsets are also available with: `spreadMobileOffset`, `spreadTabletOffset`, `spreadDesktopOffset`, `spreadWidescreenOffset` and `spreadFullHDOffset`.
<Playground>
<Columns>
<Column spread={10} spreadOffset={1} spreadDesktop={8} spreadDesktopOffset={2} spreadTablet={4} spreadTabletOffset={4}>
<Box backgroundColor="#112ebb" color="white" padding="0.5rem" >
All: 10
<br/>
Desktop: 8
<br/>
Tablet: 4
</Box>
</Column>
</Columns>
</Playground>
If a value of `left`, `right`, or `both` is specified as a `spreadOffset`. Then this offset will apply for all variable column sizes.
This example renders identically to the above example.
<Playground>
<Columns>
<Column spread={10} spreadDesktop={8} spreadTablet={4} spreadOffset="both">
<Box backgroundColor="#112ebb" color="white" padding="0.5rem" >
All: 10
<br/>
Desktop: 8
<br/>
Tablet: 4
</Box>
</Column>
</Columns>
</Playground>
## Mobile columns
By default, columns are only applied to screen widths of above **768px**. To enable columns for all viewports, set the `minBreakpoint` prop to `mobile` on `<Columns>`.
<Playground>
<Columns minBreakpoint="mobile">
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
First column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Second column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Third column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Fourth column
</Box>
</Column>
</Columns>
</Playground>
## One line columns
By default, columns are wrapped on multiple lines if necessary. To disable this, just add the `isOneLine` prop to `<Columns>` .
<Playground>
<Columns isOneLine>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
First column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Second column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Third column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Fourth column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Fifth column
</Box>
</Column>
</Columns>
</Playground>
## Gapless
To remove the gaps between columns, set the `isGapless` prop to `true` on `<Columns>`.
<Playground>
<Columns isGapless>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
First column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Second column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Third column
</Box>
</Column>
<Column>
<Box backgroundColor="whitesmoke" padding="0.5rem">
Fourth column
</Box>
</Column>
</Columns>
</Playground>
## `<Column>` Props
<PropsTable of={Column} />
## `<Columns>` Props
<PropsTable of={Columns} />
## Theming
### `<Column>` Schema
```jsx
{
base: string | Object
}
```
### `<Columns>` Schema
```jsx
{
base: string | Object
}
```