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 | |
The class modifiers are named using the following format:
col-[breakpoint]-[size]
col-[breakpoint]-offset-[size]
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.
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.
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;
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,
);
Last modified 2yr ago