https://github.com/cheap-glitch/vue-css-modifiers
🖌️ A tiny Vue directive to simplify the manipulation of CSS modifier classes.
https://github.com/cheap-glitch/vue-css-modifiers
bem bem-css bem-modifiers css vue vue-directive
Last synced: about 1 year ago
JSON representation
🖌️ A tiny Vue directive to simplify the manipulation of CSS modifier classes.
- Host: GitHub
- URL: https://github.com/cheap-glitch/vue-css-modifiers
- Owner: cheap-glitch
- License: isc
- Created: 2019-11-23T13:45:43.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2022-03-30T15:31:27.000Z (about 4 years ago)
- Last Synced: 2024-03-22T22:42:58.675Z (about 2 years ago)
- Topics: bem, bem-css, bem-modifiers, css, vue, vue-directive
- Language: JavaScript
- Homepage: https://npm.im/vue-css-modifiers
- Size: 1.73 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖌️ vue-css-modifiers
[](LICENSE)
[](https://github.com/cheap-glitch/vue-css-modifiers/releases/latest)
[](https://coveralls.io/github/cheap-glitch/vue-css-modifiers)
**vue-css-modifiers** provides a tiny, zero-dependencies directive to simplify
the manipulation of CSS modifier classes.
For example, the following template:
```html
```
can be shortened to:
```html
```
The modifier classes merge seamlessly with other static and dynamic classes. You
can also easily enforce the style of your choosing (`is-` or BEM) with a simple
directive modifier.
Using a different directive to declare CSS modifiers also brings the indirect
benefit of a clear separation between the main classes and their modifiers.
## Installation
```
npm i vue-css-modifiers
```
## Usage
Import and register the directive in the entry point of your app:
```javascript
// main.js
import Vue from 'vue';
import VueCSSModifiers from 'vue-css-modifiers';
Vue.directive('mods', VueCSSModifiers);
// […]
```
Call the directive using one of the following expressions:
* a string denoting a class name
* an array of strings denoting some class names
* an object whose keys are properties and values booleans
Examples:
```html
export default {
props: {
name: {
type: String,
required: true,
},
isOpened: {
type: Boolean,
default: true,
},
},
data() {
return {
isHidden: true,
isFlipped: false,
isNavSticky: true,
};
},
};
```
### Syntax modifiers
Use the `is` modifier to automatically prefix all modifier classes with `is-`:
```html
```
Use the `bem` modifier to add the modifier class as a suffix to another class.
This base class can either be defined explicitly through a directive argument,
or left implicit (in that case, the directive will use the first class it founds
that is not a BEM modifier). Either way, if the base class is not present on the
element, the modifier will not be added.
```html
```
### Using `is-` or BEM syntax by default
If you register the directive with the name `is` or `bem`, it will discard
modifiers and always enforce the respective syntax.
```javascript
// main.js
import Vue from 'vue';
import VueCSSModifiers from 'vue-css-modifiers';
Vue.directive('is', VueCSSModifiers);
Vue.directive('bem', VueCSSModifiers);
// […]
```
```html
```
## Changelog
See the full changelog [here](https://github.com/cheap-glitch/vue-css-modifiers/releases).
## Contributing
Contributions are welcomed! Please open an issue before submitting substantial changes.
## License
ISC