❤Nocturnal Parakeet Monitor

npm

log inorsign up
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

stylelint-config-rational-order

0.0.4 • Public • Published

stylelint-config-rational-order

NPM version Build status License

Stylelint config that sorts related property declarations by grouping together following the order:

  1. Positioning
  2. Box Model
  3. Typography
  4. Visual
  5. Animation
  6. Misc
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
 
  /* Box Model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
 
  /* Typography */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;
 
  /* Visual */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;
 
  /* Animation */
  transition: all 1s;
 
  /* Misc */
  user-select: none;
}

Usage

  1. Add stylelint and this package to your project:
npm install --save-dev stylelint stylelint-config-rational-order
# or, if you prefer yarn over npm: 
yarn add --dev stylelint stylelint-config-rational-order
  1. Add this package to the end of your extends array inside Stylelint configuration (.stylelintrc for example):
{
  "extends": [
    // "stylelint-config-standard",
    "stylelint-config-rational-order"
  ]
}

FAQ

I think the border property belongs to the *box model section* and not the visual one, can I change it?

Sure, just extend your configuration a little different:

{
  "extends": [
    // "stylelint-config-standard",
    "stylelint-config-rational-order/borderInBoxModel"
  ]
}

Credits

Keywords

install

npm i stylelint-config-rational-order

Downloadsweekly downloads

4,182

version

0.0.4

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar

Test with RunKit

Report a vulnerability