Arto is a type-safe, flexible class name management library designed for building scalable UIs with variants, states, and advanced conditional styling.
For full documentation, visit arto.elgndy.com.
- 🎨 Variants: Cleanly define style options (e.g., size, color) without messy conditional logic.
- 🔄 States: Apply conditional classes for states like
disabled,hovered, etc., with optional dependency logic. - ⚡ Rules & Logic: Dynamically add or remove classes using logical operators (
AND,OR,XOR, etc.) or custom callbacks. - 🔧 Fully Extensible: Write or install plugins to extend functionality (e.g., theming, UI framework integration).
- 🛡️ Type-Safe: Built with TypeScript for robust validation and developer confidence.
- ✨ Lightweight: No external dependencies—integrates seamlessly with your chosen framework (React, Vue, Svelte, or plain JS).
- 🌐 Framework Agnostic: Compatible with any CSS strategy (e.g., Tailwind, PostCSS, CSS Modules).
Below is a very simplified example to illustrate how Arto might handle variants and states.
For more in-depth or real-world examples, see our Documentation and examples/ folder.
Below is a more complex scenario showcasing:
- Nested state definitions with
dependsOn - Callback-based class names that leverage user-defined
context - Conditional logic through the rules
array
Leave a comment