About hTWOo UI
HTWOO UI is an open source alternative for Microsoft’s Fluent UI Web Design system. Despite being ReactJS exclusive this project offers a style guide based on HTML and CSS to create implementations for other frameworks as well.
Don’t get set into one form, adapt it and build your own, and let it grow, be like water. Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend. - Bruce Lee)
You will find a complete list of assets in the Style Guide.
Why just HTML and CSS
In the end it always comes down to HTML/CSS no matter which framework you use for your development. HTML/CSS documented components serve no other longevity than any other framework. HTML and CSS can also be easily translate, included and embedded in any other development framework.
HTML/CSS UI components can also be easier optimized, refactored or visually enhanced.
hTWOo style guide, documentation and building platform is based on patternlab.io. To allow the most flexible implementation of designs and design pattern it follows the Atomic Design Methodology coined by Brad Frost around 2012 / 2013.
We’re tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That’s a daunting task indeed. Thankfully, design systems are here to help. - Brad Frost
How To Use
- SVG icons instead of icon fonts
- hTWOo usage in ‘No framework’ web part with SPFx
- hTWOo usage in React web part with SPFx
- hTWOo usage in Angular Elements with SPFx
- more documentation coming soon
None so far please ask or just start a new discussion.
Follow us on Twitter @htwooui.
Contributor: You ❤️
Contributor Covenant Code of Conduct
About the design system
The about page should provide a bit more high-level information about the system, who's behind it, its back story, and any other info that's helpful to lay out.
The getting started page should provide information for how to get up and running with the design system.
The roadmap shows the plan of attack for upcoming releases to the design system