postcss-bootstrap-4-grid
v1.0.3
Published
Generates Bootstrap 4-style grid classes with PostCSS.
Downloads
22
Readme
postcss-bootstrap-4-grid
Generates Bootstrap 4-style grid classes with PostCSS.
Install
npm install --dev postcss-bootstrap-4-grid
OR
yarn add --dev postcss-boostrap-4-grid
Usage
In your pre-processed CSS, place the following at-rule where you want your grid glasses to be generated.
@bootstrap-4-grid;
Add this plugin to your PostCSS config:
module.exports = {
plugins: {
'postcss-bootstrap-4-grid': {
// Your options, or empty to use the defaults.
},
},
};
Options
Schema
{
"gridColumns": {
"description": "The number of column units to generate CSS for.",
"type": "number",
"minimum": 2,
"maximum": 48
},
"gridGutterWidth": {
"description": "A CSS value (with a unit) representing the distance between columns.",
"type": "string",
"maxLength": 128
},
"containerMaxWidths": {
"description": "The maximum widths of a container at a set of breakpoints.",
"type": "object"
},
"gridBreakpoints": {
"description": "A set of breakpoints for generating different layouts at differing view widths.",
"type": "object"
},
"doOrderClasses": {
"description": "Set to true to generate the classes that handle flexbox order.",
"type": "boolean"
},
"doOffsetClasses": {
"description": "Set to true to generate the classes handling column offsets.",
"type": "boolean"
}
}
Defaults
{
gridColumns: 12,
gridGutterWidth: '2rem',
containerMaxWidths: {
sm: '540px',
md: '720px',
lg: '960px',
xl: '1140px'
},
gridBreakpoints: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px'
},
doOrderClasses: true,
doOffsetClasses: true
}