nuxt-atomizer
v2.0.1
Published
Module that adds ACSS atomic CSS framework (aka Atomizer) support to a Nuxt.js app. Generates atomic classes from code.
Downloads
59
Maintainers
Readme
nuxt-atomizer
Module that adds ACSS atomic CSS framework (aka Atomizer) support to a Nuxt.js app. Generates atomic classes from code.
Install
# npm
$ npm install nuxt-atomizer
# Yarn
$ yarn add nuxt-atomizer
Usage
Add the module to your Nuxt.js modules list in nuxt.config.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!
<template>
<div class="P(2rem) Bgc(#fafafa) C(#111) Bd Bdw(2px) Bdc(#ccc) Bdrs(.5rem) Ff(ss)">
Hey there, I'm styled with ACSS! 🙌
</div>
</template>
Here is the result:
Also check out the demo at CodeSandbox.
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
.
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 */
},
}
<template>
<div class="C(primary)">I am red now</div>
</template>
Contribute
Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️
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:
Thanks a lot for your support! ❤️
See also
- 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: Adds Nuxt page data to route meta at build time.
- nuxt-mermaid-string: Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
- nuxt-content-git: Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
- nuxt-babel-runtime: Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.