Columns#

Bumbag uses a 12 column flexbox based responsive column system.

Import#

import { Columns } from 'bumbag';

Usage#

To create a basic columned layout, add a <Columns> component and then add your <Columns.Column>s.

By default, each <Columns.Column> will have an equal width and you can have up to 12 columns.

First column
Second column
Third column
Fourth column
Editable example

Sizes#

A width for the column can also be specified using the spread prop. spread can be any number between 1 and 12.

6
3
Auto (2)
1
Editable example

Gaps#

You can customize the gap spacing on the columns by utilizing the spacing prop.

First column
Second column
Third column
Fourth column
Editable example

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.

6
2
2
6
6
2
Editable example

However, a more specific value (between 1 and 11) can be provided and is offset to the left of the column.

6
3
2
6
6
3
Editable example

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.
All: 10
Desktop: 8
Mobile: 6
All: 2
Desktop: 4
Mobile: 6
Editable example

Variable spread offsets are also available with: spreadMobileOffset, spreadTabletOffset, spreadDesktopOffset, spreadWidescreenOffset and spreadFullHDOffset.

All: 10
Desktop: 8
Tablet: 4
Editable example

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.

All: 10
Desktop: 8
Tablet: 4
Editable example

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>.

First column
Second column
Third column
Fourth column
Editable example

One line columns#

By default, columns are wrapped on multiple lines if necessary. To disable this, just add the isOneLine prop to <Columns> .

First column
Second column
Third column
Fourth column
Fifth column
Editable example

Gapless#

To remove the gaps between columns, set the isGapless prop to true on <Columns>.

First column
Second column
Third column
Fourth column
Editable example

Columns Props#

isGapless boolean

Indicates if the columns should be gapless.

isOneLine boolean

Indicates if the columns should be placed on the one line.

minBreakpoint "tablet" | "mobile"

Indicates the minimum breakpoint where the columns should snap.

spacing string

Sets the spacing between each column.

Inherits Flex props
Inherits Box props

use 

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children 

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Column Props#

spread 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

spreadMobile 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

spreadTablet 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

spreadDesktop 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

spreadWidescreen 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

spreadFullHD 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

spreadOffset 

"right"
  | "left"
  | "both"
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11

spreadMobileOffset 

"right"
  | "left"
  | "both"
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11

spreadTabletOffset 

"right"
  | "left"
  | "both"
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11

spreadDesktopOffset 

"right"
  | "left"
  | "both"
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11

spreadWidescreenOffset 

"right"
  | "left"
  | "both"
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11

spreadFullHDOffset 

"right"
  | "left"
  | "both"
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
Inherits Box props

use 

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children 

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Columns.styles.base
Column 1
Column 2
Column 3
Column 4
Columns.Column.styles.base
Column 1
Column 2
Column 3
Column 4
On this page
Copyright © 2021 Jake Moxey