HTWOO UI framework

HTWOO UI is an open source alternative for Microsoft's Fluent UI Web Design system. hTWOo Core is a pure HTML/CSS and JavaScript implementation that can be used in any project. In addition, hTWOo React is a component based implementation that can be used in any ReactJS project (>= React 16).

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-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 translated, included, and embedded in any other development framework.

HTML/CSS UI components can also be more easily optimized, refactored, or visually enhanced.

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 of ReactJS.

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

Concepts

The hTWOo style guide, documentation and building platform is based on patternlab.io. To allow the most flexible implementation of designs and design patterns, 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

Project Configuration

See the full project configuration.

Engage

Follow us on Twitter @htwooui.

Maintainers: Stefan Bauer (N8D), Julie Turner

Contributors: You ❤️