https://github.com/dword-design/nuxt-atomizer
Module that adds ACSS atomic CSS framework (aka Atomizer) support to a Nuxt.js app. Generates atomic classes from code.
https://github.com/dword-design/nuxt-atomizer
acss atomic-css atomizer nuxt-module nuxtjs
Last synced: 4 months ago
JSON representation
Module that adds ACSS atomic CSS framework (aka Atomizer) support to a Nuxt.js app. Generates atomic classes from code.
- Host: GitHub
- URL: https://github.com/dword-design/nuxt-atomizer
- Owner: dword-design
- License: other
- Created: 2020-02-12T14:51:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-13T22:57:42.000Z (5 months ago)
- Last Synced: 2025-01-31T05:51:17.071Z (4 months ago)
- Topics: acss, atomic-css, atomizer, nuxt-module, nuxtjs
- Language: JavaScript
- Homepage:
- Size: 2.57 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# nuxt-atomizer
Module that adds ACSS atomic CSS framework (aka Atomizer) support to a Nuxt.js app. Generates atomic classes from code.
## Install
```bash
# npm
$ npm install nuxt-atomizer
# Yarn
$ yarn add nuxt-atomizer
```
## Usage
Add the module to your Nuxt.js modules list in nuxt.config.js:
```js
export default {
modules: [
'nuxt-atomizer',
],
}
```
That's already it, now you can add atomic classes to your components and they are generated on the fly!
```html
Hey there, I'm styled with ACSS! 🙌
```
Here is the result:
Also check out the demo at [CodeSandbox](https://codesandbox.io/s/demo-nuxt-atomizer-k8cky).
## Options
You can customize Atomic CSS by adding options either to the module, the top-level `atomizer` options object or an `atomizer.config.js` file. The merge order is the following: `module` > top-level > `atomizer.config.js`.
```js
export default {
modules: [
['nuxt-atomizer', {
breakPoints: {
sm: '@media screen(min-width=750px)',
md: '@media(min-width=1000px)',
lg: '@media(min-width=1200px)'
},
custom: {
primary: 'red',
},
}],
],
atomizer: {
/* options */
},
}
```
```html
I am red now
```
## Contribute
Are you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/nuxt-atomizer/issues) or a [pull request](https://github.com/dword-design/nuxt-atomizer/pulls)! ⚙️
## Support
Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:
If you want to send me a one time donation. The coffee is pretty good 😊.
Also for one time donations if you like PayPal.
Here you can support me regularly, which is great so I can steadily work on projects.
Thanks a lot for your support! ❤️
## See also
* [nuxt-mail](https://github.com/dword-design/nuxt-mail): Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
* [nuxt-route-meta](https://github.com/dword-design/nuxt-route-meta): Adds Nuxt page data to route meta at build time.
* [nuxt-mermaid-string](https://github.com/dword-design/nuxt-mermaid-string): Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
* [nuxt-content-git](https://github.com/dword-design/nuxt-content-git): Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
* [nuxt-babel-runtime](https://github.com/dword-design/nuxt-babel-runtime): Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.
## License
[MIT License](https://opensource.org/license/mit/) © [Sebastian Landwehr](https://sebastianlandwehr.com)