stylelint-8-point-grid

Validates any defined margin, padding, height, and width.

Supports px and rem values.

Inspiration

• Intro to The 8-Point Grid System
• The 8-Point Grid

Ignores

• css calc() function
• sass variables

Installation

npm

npm install stylelint-8-point-grid --save-dev

yarn

yarn add stylelint-8-point-grid --dev

Usage

Update .stylelintrc or stylelint config in package.json

Recommended config

// .stylelintrc
{
  "extends": [
    "stylelint-8-point-grid"
  ]
}

Extending the config

// .stylelintrc
{
  "extends": [
    "stylelint-8-point-grid"
  ],
  "rules": {
    "plugin/8-point-grid": {
      "base": 4,
      "allowlist": ["2px", "1px"],
      "ignorelist": ["width", "height"]
    }
  }
}

base (default: 8)

value used for divisibility checking

allowlist

array of px or rem values to be excluded from divisibility checking

ignorelist

array of css properties to be excluded from divisibility checking

• margin
• margin-top
• margin-bottom
• margin-left
• margin-right
• padding
• padding-top
• padding-bottom
• padding-left
• padding-right
• height
• min-height
• max-height
• width
• min-width
• max-width
• top
• bottom
• right
• left

License

MIT