stylelint-8-point-grid
v2.2.0
Published
Stylelint plugin to validate CSS with 8-point grid guideline
Downloads
22,466
Maintainers
Readme
stylelint-8-point-grid
Validates any defined margin
, padding
, height
, and width
.
Supports pixel and rem values.
Inspiration
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"
]
}
Uses base 8 for pixel values (and base 0.5 for rem values).
Extending the config
// .stylelintrc
{
"extends": [
"stylelint-8-point-grid"
],
"rules": {
"plugin/8-point-grid": {
"base": 4,
"allowlist": ["2px", "1px", "0.0625rem"],
"customProperties": ['size', 'position'],
"ignorelist": ["width", "height"]
}
}
}
base
- value used for divisibility checking
- base value is 8 by default
- used to compute the base for rem values (
base / 16
)
using 4 as base means:
- pixel values should be divisible by 4
- rem values should be divisible by 0.25
customProperties
- array of custom properties, useful when you use custom shorthand properties like postcss-short
allowlist
- array of pixel or rem values to be excluded from divisibility checking
ignorelist
- array of css properties to be excluded from divisibility checking
- supported values:
- 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
- margin-block
- margin-block-start
- margin-block-end
- margin-inline
- margin-inline-start
- margin-inline-end
- padding-block
- padding-block-start
- padding-block-end
- padding-inline
- padding-inline-start
- padding-inline-end
- block-size
- min-block-size
- max-block-size
- inline-size
- min-inline-size
- max-inline-size
- inset
- inset-block
- inset-inline
- inset-block-start
- inset-block-end
- inset-inline-start
- inset-inline-end
License
MIT