# hTWOo UI framework

hTWOo (H₂0) UI is an open source, community driven alternative UI Framework for Microsoft's Fluent UI Design experiences. It is built based on state-of-the-art web technologies.

Main focus of this project is to be used in SharePoint Framework, Microsoft Teams customisations or any other of your used cases. 

[![Fluent](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)

![Be like water][logo]

## Installation

```sh
npm install --save-dev @n8d/htwoo-core
```

## Usage

* [hTWOo usage in 'No framework' web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-html.html)
* [hTWOo usage in React web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-react.html) 
* [hTWOo usage in Angular Elements web part with SPFx](https://lab.n8d.studio/htwoo/how-to/how-to-spfx-angular-elements.html)

## Documentation

* [General Documentation](https://lab.n8d.studio/htwoo/)
* [Pattern Style Guide](https://lab.n8d.studio/htwoo/htwoo-core/)

## other Resource

* [hTWOo React](https://www.npmjs.com/package/@n8d/htwoo-react) - ReactJS implementation of hTWOo components - [Documentation](https://lab.n8d.studio/htwoo/htwoo-react/?path=/story/introduction-getting-started--page)
* [hTWOo Icons](https://www.npmjs.com/package/@n8d/htwoo-icons) - A set of all Fluent Design Icons

> **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))


**Contributor:** You ❤️

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