Reactium
Search
⌃K

Responsive Grid

Responsive modifiers enable specifying different column sizes, offsets and alignment.
By default, Reactium UI uses a 12 column Responsive Grid
By default the following breakpoints are used:
Breakpoint
Min. Width
Max Width
xs
640px
sm
641px
990px
md
991px
1280px
lg
1281px
1440px
xl
1441px

Notation

The class modifiers are named using the following format:
col-[breakpoint]-[size]
col-[breakpoint]-offset-[size]

Usage

By combining multiple class names you can create responsive containers that will flex based on mobile first class modifiers.
import React from 'react';
const Example = () => (
<div className='row'>
<div className='col-xs-12 col-md-4'>
Sidebar
</div>
<div className='col-xs-12 col-md-7'>
Content
</div>
</div>
);
export default Example;
Grid columns must be wrapped in a container with the row class name applied.

Offsets

You can offset a column in a row by applying the offset modifier.
import React from 'react';
const Example = () => (
<div className='row'>
<div className='col-xs-12 col-md-4'>
Sidebar
</div>
<div className='col-xs-12 col-md-7 col-md-offset-1'>
Content
</div>
</div>
);
export default Example;
In the above example the Content column will be offset by 1 column on the md breakpoint and up.

Auto Sizing

By excluding the column size modifier, you can create a column that will stretch based on the available space of the container row.
import React from 'react';
const Example = () => (
<div className='row'>
<div className='col-sm'>1</div>
<div className='col-sm'>2</div>
<div className='col-sm'>3</div>
</div>
);
export default Example;

Customizing

You can modify the breakpoints and grid columns by overriding the default sass variables in your project styles.
Assign overrides before the reactium-ui.scss file has been imported in your style.scss file
// Grid Columns
$grid-columns: 12;
// Grid Breakpoints
$breakpoints-max: (
'xs': 640,
'sm': 990,
'md': 1280,
'lg': 1440,
'xl': 1920,
);