- ๐ฅ Minimal and simple atomic CSS framework
- โ๏ธ 100% customizable - build your own CSS framework
- ๐ฆ Blazing fast generator written in Rust
- ๐ Tiny
1.7 kB
runtime - โ๏ธ CSS-in-JS library for React
npm install --save @econify/moonshine-css
yarn add @econify/moonshine-css
Create a .moonshinerc
file in your project root.
by running
npx distill --init
or by creating a file manually:
{
"options": {
"atomStyle": "classAttribute",
"breakpointModifierStyle": "suffix",
"breakpointModifierSeperator": "-",
"breakpoints": {
"sm": { "minWidth": "576px" },
"md": { "minWidth": "768px", "maxWidth": "992px" },
"lg": { "minWidth": "992px" }
}
},
"designTokens": ["./atomic-design-tokens.yml"],
"templates": [
"./tachyons-border-box.yml",
"./tachyons-colors.yml",
"./tachyons-flex.yml",
"./tachyons-spacing.yml"
],
"output": {
"cssVariables": "./dist/variables.css",
"cssAtoms": "./dist/atoms.css",
"jsonAtoms": "./dist/atoms.json"
}
}
then run
npx distill --watch
import "atomic-styles.css";
import { styled } from "@econify/moonshine-css";
const Button = styled.button(
"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded",
({ isPrimary }) => isPrimary && "bg-primary text-white"
);
export default Demo() {
return (
<div>
<Button isPrimary={true}>Click me</Button>
</div>
);
};
You can read more about the runtime syntax here.
TBD