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.
Sizes#
A width for the column can also be specified using the spread
prop. spread
can be any number between 1
and 12
.
Gaps#
You can customize the gap spacing on the columns by utilizing the spacing
prop.
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.
However, a more specific value (between 1
and 11
) can be provided and is offset to the left of the column.
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.
Desktop: 8
Mobile: 6
Desktop: 4
Mobile: 6
Variable spread offsets are also available with: spreadMobileOffset
, spreadTabletOffset
, spreadDesktopOffset
, spreadWidescreenOffset
and spreadFullHDOffset
.
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.
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>
.
One line columns#
By default, columns are wrapped on multiple lines if necessary. To disable this, just add the isOneLine
prop to <Columns>
.
Gapless#
To remove the gaps between columns, set the isGapless
prop to true
on <Columns>
.
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
Columns.Column.styles.base