#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

#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

#Gaps

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

First column
Second column
Third column
Fourth column

#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

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

#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

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

All: 10
Desktop: 8
Tablet: 4

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

#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

#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

#Gapless

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

First column
Second column
Third column
Fourth column

#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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 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

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

spreadMobileOffset

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

spreadTabletOffset

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

spreadDesktopOffset

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

spreadWidescreenOffset

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

spreadFullHDOffset

"left"
  | "right"
  | "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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 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
Copyright © 2020 Jake Moxey