Resources
Guides
Step-by-step tutorials and practical examples to help you get the most out of Styleframe
Overview
Our guides provide hands-on tutorials and real-world examples to help you master Styleframe. Whether you're building your first design system or implementing advanced patterns, these guides will walk you through best practices and common use cases.
Available Guides
Here are the guides we have written so far. We promise we will continue to add more:
Create a Design System with styleframe in Under 15 minutes
Build your first design system with Styleframe. Learn how to set up variables, create reusable components, and implement theming.
Implementing a Theme Switcher
Learn how to implement a dynamic theme switcher in your application using Styleframe's data-theme attribute system.
Coming Soon
More guides are on the way! We're working on tutorials covering:
- Dark Mode Implementation: Build a complete dark mode system with automatic switching
- Component Library Setup: Structure and organize a scalable component library
- Migration from CSS-in-JS: Move your existing styled-components or emotion styles to Styleframe
- Advanced Theming: Create multi-brand themes and user-customizable designs
- Performance Optimization: Best practices for optimal bundle sizes and runtime performance
Contributing
Have an idea for a guide? Found something that could be explained better? We welcome contributions!
Want to contribute? Check out our GitHub repository to submit guide ideas or improvements.
FAQ
We aim to publish new guides regularly based on community feedback and common use cases. Follow our GitHub repository or Discord for announcements.
Absolutely! Open an issue on our GitHub repository with your guide request, or discuss it with the community on Discord.
Yes! We design our guides to be accessible to developers of all levels, with clear explanations and step-by-step instructions.
Each guide includes complete code examples that you can copy and adapt. Some guides also link to interactive CodeSandbox demos.