Moonshine CSS
Features
-
🥃 Minimal and simple atomic CSS framework -
⚗️ 100% customizable - build your own CSS framework -
🦀 Blazing fast generator written in Rust -
🐜 Tiny1.7 kBruntime -
⚛️ CSS-in-JS library for React
Install
npm install --save @econify/moonshine-css
yarn add @econify/moonshine-css
Generate Styles
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
Usage
import "atomic-styles.css";
isPrimary && "bg-primary text-white"
);
export default Demo() {
return (
);
};">
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.
Acknowledgements
TBD
![[CF] (Security) Upgrade](https://avatars.githubusercontent.com/u/31521775?v=4)
4 Sep 21, 2022
4 Jan 2, 2023
6 Nov 25, 2021
0 Mar 29, 2022
4 Sep 24, 2022
69 Dec 1, 2022
4 Nov 21, 2023
14 Apr 11, 2022
36 Dec 14, 2022
4 May 11, 2022
4 Jan 30, 2022
35 Dec 29, 2022
25 Dec 15, 2022
13 Dec 12, 2022
13 May 5, 2023
4 Nov 24, 2023
15 Dec 1, 2023
4 Jun 12, 2023
14 Jun 19, 2022
24 Apr 3, 2022