The best way to implement a design on the web is not to use fancy tools or marketing jargons. Every site and application is defined for 25 years by two fundamental technologies. HTML that gives our pages and application a structure. CSS that makes the look and feel and experience envisioned by design come to life. Both combined is all we see and interact on the web.

Happen so that no matter how many technological advancements we put in our code. HTML and CSS together is still the most performant web framework on the planet.

These two web technologies are the technological layer. I created a framework that implements Microsoft Fluent Design language.

Sustainability

Backwards compatibility is one of the core principles of HTML and CSS. A design system described this way will render still render in a couple of years without upgrading dependencies because there are none.

Performance

Loading HTML followed by CSS is a top priority when a browser loads a web site. The less of design you could do at a later stage with programming languages like JavaScript, the faster you render the page.

Even though all modern customization on Microsoft 365 relies on JavaScript. The less rendering complexity you add to the program execution, the faster the web parts render.

The current implementation of hTWOo with most Fluent UI web components only uses 65kb uncompressed and 7kb compressed style sheet definitions.

The UI component can be cherry picked too.

Simplicity

All hTWOo components were built with the mindset to reduce the complexity out of the HTML structure. “Copy & paste” components for 3rd party customizations.

Modularity

Writing complex, unique experience components is easy. Break bigger pieces down into smaller building blocks that offer more flexibility is harder to achieve but worth the effort.

hTWOo follows in this regards the Atomic Design philosophy coined by Brad Frost. This methodology is perfect for Microsoft 365 customizations. It is an extension from Stephan Hey take on the responsive design workflow back in 2012.

We are not designing pages; we’re designing systems of components.—Stephen Hay

With our customization, we exactly add modular components to the overall Microsoft 365 system. May it be a web part, Microsoft Teams Application or any other future customization.

Documentation

Sustainability on user interfaces can only get achieved when all used components get properly documented. Having the code only in the final solution is not enough. Looking at the source code doesn’t give you a bird’s eye view of all already solved problems or implemented components.

Developer solves problems with code. Designers solve problems with the design. For them to meet on the middle ground of a common style guide is crucial. They work better together with respect and their common goal to solve problems.

Sketching out new designs and experience directly in HTML using CSS has one major benefit. The same media as the final solution and allows you to identify issues way earlier in the process. Again, it helps to find answers faster may it be related to design or code.

In the end, you have a working prototype, the documentation and a “copy & paste” developer to fill the new component with life on the Microsoft 365 platform.

Fluent UI web only has a partial implementation of some of the components used on Office 365 and are too big, too clumsy for developers to be useful. Sometimes it is enough to reuse smaller pieces of a component aspect.

hTWOo, in this regards, try to build up a comprehensive Microsoft 365 design documentation to be easily reused by developers and designers able to write HTML only CSS.

Inclusive design? – ReactJS, VueJS, Angular, Angular Elements, …

Frameworks don’t matter in the user interface. Still, a solid HTML and CSS helps to implement the same control in any of your favourite frameworks.

ReactJS is popular, but the current Fluent UI implementation blocks other frameworks for speaking the same design language.

hTWOo in this regards is an inclusive alternative that doesn’t block you because you favourite the wrong framework in your company.

Web Components

Web components are currently more like in an experimental stage in in case of browser support. There is currently also no way to define a web components just based on HTML/CSS/JS.

The main focus of web components are still for browser vendors only. They are able to add custom controls in their compiled code to improve the performance in browser. Something a web developer cannot do.

In fact Chromium and Google remove parts of the standard from their browser caused by performance issues. There are also countless blog post on why you should them use now.

Microsoft Graph Toolkit in fact demonstrate good examples for the proper use of web components. One single component that can be added to another solution.

Building a complete UI framework based on web components, like Fast.design is doubtable. Especially nesting many not native HTML controls or components, in this case, feel like loading an iFrame in an iFrame.

Interested in Fluent and Web Components?

The @FAST_UI team is bringing Fluent Web Components to the Fluent UI project.

Now you can find our React and Web Component implementations in the same GitHub repo. https://t.co/P8Rc86Rfb2

— Fluent UI (@fluentui) July 30, 2020

It was announced that Fluent UI will have we components using Fast.design in the same repo. I see this approach more experimental than a real world application.

It will still take years to enable web components using HTML/CSS and add JavaScript for the interaction and registration only.
In the end, it all comes down to HTML and CSS anyways, which can be easy transferred in proper web components.

Accessibility

If you like to learn about accessibility for your application, hTWOo leads you to many articles on implementing proper accessibility.

We can great learn together to create more inclusive designs. Every developer should get enabled to write accessible code.

Responsive Design

Fluent UI Web and SharePoint only use responsive design mostly with JavaScript instead of using real responsive design techniques.

hTWOo provides a responsive CSS Grid based on their design definitions.

Community

The state of the Office UI Fabric and the later named Fluent UI is a closed design system. The Office UI Fabric/Fluent UI has gone through many changes since it’s release. It is large, clumsy, and have sections that need to be rewritten from scratch anyway. The Office UI Fabric is no longer officially supported there is no easy way to implement new experiences based on existing components. The Fluent UI for the web is tied specifically to React so unless you are building a native app using IOS or Android you are tied to using React to implement these components.

It is time for us as the developer community working on Microsoft 365 to take over. To create a framework that is built and maintained by us while still incorporating the Microsoft Design language in our third-party customizations. It needs to be simple, responsive, and accessible.

We are shaping the future of our customer experiences for our customer needs.

You will find the current state of all documented patterns on https://lab.n8d.studio/htwoo/htwoo-core/.

Suppose you like to get involved in the project checkout hTWOo UI on GitHub. You will also find information on how you can test run it.

You can also simply follow on twitter hTWOo UI

This is first step and hoped many others liked to get involved too. More updates will follow.

PS: Wanna try it?

The first version has been published to NPMJS

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

Checkout the documentation as well.
hTWOo usage in ‘No framework’ web part with SPFx
hTWOo usage in React web part with SPFx

PS: In case you looking for No-Framework or ReactJS Sample those are also available.

---

Also published on Medium.