HTWOO UI framework

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)

HTWOO-React

For ReactJS developers, we have an implementation of the htwoo-core library where we have provided a set of components compatible with Versions 16 & 17 of ReactJS.

A complete getting stared guide plus full documentation on all the ReactJS components available can be found on our StoryBook Documentation

HTWOO-Core

You will find a complete list of assets in the Style Guide.

How To Use HTWOO-CORE

• hTWOo usage in 'No framework' web part with SPFx
• hTWOo usage in React web part with SPFx
• hTWOo usage in Angular Elements web part with SPFx
• more to come

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.

Concepts

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

Engage

Follow us on Twitter @htwooui.

Maintainer: Stefan Bauer (N8D), Julie Turner

Contributor: You ❤️