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}