Concepts

hTWOo is built with HTML and CSS first

HTML and CSS are the foundational languages of web development, and ultimately, all user interfaces on the web are created using HTML and CSS. While frameworks like React, Angular, and Vue provide additional functionality and tools for developers, they ultimately rely on HTML and CSS to create the UI.

One advantage of using HTML/CSS for UI components is their flexibility and compatibility with different development frameworks. Because HTML/CSS is a universal language understood by all web browsers and devices, components created using HTML/CSS can be easily translated, included, and embedded in any other development framework. It makes it easier for developers to switch between frameworks without having to rewrite their UI components completely.

hTWOo Core - The Foundation

Creating a versatile framework is one of the essential concepts of HTWOo. Inclusive design does not stop at the final rendered result of a website; it also means it can be inclusive of other front-end frameworks. This goal can be achieved only by having a solid HTML and CSS-based foundation.

With ReactJS in 2022 and possibly 2003 as a dominant web development framework, There are other frameworks and technology decisions made by companies that like to implement the Fluent Design System into their technology stack.

hTWOo closes this gap that Fluent UI Web has; instead of being React JS-only implementation, hTWOo can get adopted in any framework, now and in the future.

If you are interested in implementing in any way, share or form you are always welcome to.

hTWOo React a wrapper of hTWOo core

Most implementations in the Microsoft 365 ecosystem are currently based on ReactJS, while the HTML and CSS of hTWOo core could be used in any framework directly. We decided to improve the developer experience for ReactJS developers so that they can instantly start implementing their customisations now in their favour of choice.

HTWO React - embedded the HTML markup and CSS styles into reusable components while still giving the possibility to improve on hTWOo Core components.

Documentation = Implementation

hTWOo core uses PatternLab.io, a tool that allows you to create a style guide based on the Atomic Design Methodology by Brad Frost. This methodology has been proven since 2012/13 that it’s an easy way to create and describe user interfaces, from the smallest design components to full-page experiences. It is not only limited to the web but is capable of describing and user interface.

See it in action: hTWOo Core documentation

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

The documentation of hTWOo React is built using Storybook, which not only serves as the documentation but also provides complete developer experience to create React Components.

See it in action: hTWOo React Documentation.

Documentation and implementation in hTWOo go hand in hand, without additional effort.

Questions?

Please feel free to ask any question you have in the discussion forum or reach out to us on twitter @htwooui.

Maintaind by

Stefan Bauer (N8D), Julie Turner and You ❤️