https://github.com/johnwatkins0/postcss-bootstrap-4-grid

Generates Bootstrap 4-style grid classes with PostCSS.
https://github.com/johnwatkins0/postcss-bootstrap-4-grid

bootstrap bootstrap4 node postcss

Last synced: about 1 month ago
JSON representation

Generates Bootstrap 4-style grid classes with PostCSS.

• Host: GitHub
• URL: https://github.com/johnwatkins0/postcss-bootstrap-4-grid
• Owner: johnwatkins0
• License: mit
• Created: 2017-12-26T02:47:00.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-23T16:25:49.000Z (over 6 years ago)
• Last Synced: 2024-09-14T18:48:31.180Z (2 months ago)
• Topics: bootstrap, bootstrap4, node, postcss
• Language: JavaScript
• Size: 61.5 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-bootstrap-4-grid [![Build Status](https://travis-ci.org/johnwatkins0/postcss-bootstrap-4-grid.svg?branch=master)](https://travis-ci.org/johnwatkins0/postcss-bootstrap-4-grid)

Generates [Bootstrap 4-style grid classes](http://getbootstrap.com/docs/4.0/layout/grid/) 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.

```CSS

@bootstrap-4-grid;

```

Add this plugin to your PostCSS config:

```Javascript

module.exports = {

  plugins: {

    'postcss-bootstrap-4-grid': {

      // Your options, or empty to use the defaults.

    },

  },

};

```

### Options

#### Schema

```JSON

{

  "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

```Javascript

{

    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

}

```