# HTWOO UI framework

HTWOO UI is an open source alternative for Microsoft's Fluent UI Web Design system. [hTWOo Core](https://www.npmjs.com/package/@n8d/htwoo-core) is a pure HTML/CSS and JavaScript implementation that can be used in any project. In addition, [hTWOo React](https://www.npmjs.com/package/@n8d/htwoo-react) is a component based implementation that can be used in any ReactJS project (>= React 16).

[![100% Fluent Design](https://img.shields.io/badge/Fluent-blue)](https://www.youtube.com/watch?v=cJMwBwFj5nQ) ![DOM manipulation free](https://img.shields.io/badge/100%25-DOM%20manipulation%20free-orange) ![license](https://img.shields.io/github/license/n8design/liquid)

> **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](https://www.youtube.com/watch?v=cJMwBwFj5nQ))

![Be like water][logo]

## HTWOO-Core

You will find a complete list of assets in the [Style Guide](https://lab.n8d.studio/htwoo/htwoo-core/?p=all).

### How To Use HTWOO-CORE

* [hTWOo usage in 'No framework' web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-html/)
* [hTWOo usage in React web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-react/) 
* [hTWOo usage in Angular Elements web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-angular-elements/)
* 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](https://reactjs.org/).

A complete getting stared guide plus full documentation on all the ReactJS components available can be found on our [StoryBook Documentation](https://lab.n8d.studio/htwoo/htwoo-react/)

## Concepts

The hTWOo style guide, documentation and building platform is based on [patternlab.io](https://patternlab.io/). To allow the most flexible implementation of designs and design patterns, it follows the [Atomic Design Methodology](https://bradfrost.com/blog/post/atomic-web-design/) 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](https://atomicdesign.bradfrost.com/)

## Project Configuration

See the full [project configuration](./project.conf.md).

## Engage

Follow us on Twitter [@htwooui](https://twitter.com/htwooui).

**Maintainers:** [Stefan Bauer (N8D)](https://github.com/StfBauer), [Julie Turner](https://github.com/juliemturner)

**Contributors:** You ❤️

This project is tested with BrowserStack


[logo]: https://lab.n8d.studio/htwoo/images/launch-img.jpg "Be like water and adapt fast"