classless-js
v0.1.10
Published
Enforce and question your design system by checking your classes against an approved class list
Downloads
15
Maintainers
Readme
Classless.js
One of the biggest reasons design systems become outdated is because of enforcement and lack of updating. Classless solves all of that! The way it works is by comparing your markup to your existing design system file. If there are additional classes added, Classless will alert you to either check the design system or add it to the approved class list. This makes us pause in our development and ask two questions:
- Do we really need this additional class or does it already exist?
- Should I contribute this back to the design system or is it truly a one-off?
It also creates a list of elements that we've introduced in this project (in time-based order if adding classes to the bottom of the list), to make refactoring easier.
Classless makes sure you use less unique classes in your project and instead implement your design system to its fullest potential.
Setup
- globally install classless with
npm install -g classless-js
- at your root directory,
touch classless.config
& set it up with options - run
classless
in your CLI once this is set up in your project
Options
classless.config
per-project options:
cssPath
: Link to your CSS stylesheet(s) -- You can link to a directory of files, but compiled CSS works best because this doesn't take into account things like Sass mixins, etc. Examples:./bower_components/unicornDesignSystem/app/**/*.scss
orcss/**/*
htmlPath
: Link to your HTML path(s). Can be any format (i.e..erb
,.hbs
, etc.)acceptedElems
: Additional accepted elements list
Contributing
The /bin
folder is where all of the executable scripts live. Please update and submit a PR.