Microsoft 365 Community Community Demos, 11 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with HTWOO UI – Fluent Design in HTML and CSS

Description

In this 14-minute developer-focused demo, Stefan Bauer has developed an open-source community driven Fluent UI driven framework that’s just HTML, CSS and a bit of JS. Simple to use in the Microsoft 365 ecosystem, same branding as Fluent UI. This is a complete component library - tables, typography, avatars, icons, dialogs and more. Stefan steps through the HTWOO install – a npm package and 2 theme aware SPFx web parts. There is complete documentation and samples. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on May 27, 2021.

Demo Presenter: Stefan Bauer (N8D) | @StfBauer

Supporting documents:
• Blog Post - HTWOO UI launched – Fluent Design in HTML and CSS | https://my.n8d.at/whyhtwoo
• Documentation: ABOUT HTWOO UI | http://my.n8d.at/hTWOo
• Repo: HTWOO UI framework | https://github.com/n8design/htwoo
• Samples: htwoo-samples | https://github.com/n8design/htwoo-samples

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello, my name is stephen bauer, I'm an office development mvp from austria and I created a framework which is named h2o, which is an alternative to fluent ui that doesn't require any framework at all, so you can use it. As you see here on the left side, you can use it in angular elements. You can use it with no framework.

A

You can use react, so it's just plain html and css, so these are actually the samples that, if you want to get started with it, but we all- I also have implemented the complete component library and and so for a star guide. So when we go over here, what is included already in there? What you see here on the first page is just all the colors that are used by the microsoft themes in sharepoint, so I directly extracted them from sharepoint and use it here in a plain html fashion.

A

I also have included then and redesigned the uh fluent ui components, uh just in html and css, and you always have on the right side. You have an expand button and you see here actually how this is spelled out um and we have. I have, of course, the the default things in here like check boxes, the input fields with pre and suffix. I have the radio buttons in here. I have interactive search boxes in here, select drop-downs.

A

That also allows you to filter directly- and this is all built in pure html and css and with a little bit of javascript, for example, for this drop down.

A

Of course, for our applications, we need loading animations, and this is works exactly the same way like like to the bootstrap. So you have a stylesheet that you reference you can go in here, expand it extract the html out of here, put it in a sharepoint framework, application for example, or or another whatever web application, that you're building, and you see exactly the same- the styles here.

A

Of course, there are some nice things in here like, for example, motions there's, also the typography documented in here. What font weights do we have? The h2o also includes a grid framework which works exactly the way as microsoft defined it for their uh sharepoint applications. So right now you see here.

A

I have one box up here and one box on the little criticism up here and when I move this down from the large display to a smaller one like let's say here medium for a tablet, then it automatically gets just one column exactly the way microsoft described it in their documentations.

A

Of course, also important for an application. I have also the standard buttons in here with all the effects we have the action buttons in here the drop down buttons. This also requires a little bit of javascript there compound binary compound buttons and all these things that are actually, I guess I I currently have a coverage of 80 of what it was available in fluent ui, and we also have avatars in here. So this is all what is currently provided by h2 by the framework.

A

What you also, let's see, the the really basic small building blocks for for the for user interfaces is in this case, in h2o contacts. This follows the atomic design principles and therefore the smallest blocks of this framework is is, is in the atoms.

A

When we combine two atoms together, then it will become a molecule like you see here with the card footer that has the avatar image in here and some text elements in here.

A

This also, I also have a molecule in here, which is a card image and when we roll all these components up into a the real document card, or so then this actually gives us this card document card that we all know from sharepoint.

A

When you click on the expand button on here, you see what actually the document card pattern contains, so it contains the following card pattern: the molecule card image, which is the topper image, the card location, which is actually the marketing uh text. Here you have the card title, which is new stuff for a cool internet and the card footer, as you have seen before this is this bottom part here. So you see actually these used these molecules and what you can also do in here. So how is this?

A

If, for example, if you want to see how this card footer is built out, then you can directly click on it and it should bring you over to the card footer, and here you can do actually the same, you say expand panel and then it says: okay, the card footer actually contains the atom's avatar, which is done. The smallest part- and now we have here a description, what different variants do we have, so we have the avatar with 16, pixels, 24, pixels, 32, pixels and so on and so forth.

A

So there are a lot of options that you can pick from.

A

Another thing that I also built- and this was actually the starting point in here- was the dialogues, and here are two things like the dialog tester, so which has a small button on pier.

A

So this actually opens up a model dialog and when I close it down, then it it's it's back again and what I I mean, the fluent design itself says that that it should have some class stained glass, look at the background, and this is also implemented because it's currently supported by all modern browsers, like microsoft edge, where I'm currently in and also by google chrome.

A

So you can make this really match 101 what you see on the desktop applications for microsoft and windows, so you can have this class overlay, which then blurs out the background on sharepoint as well.

A

Of course, you see also either building components. We have here the molecule style or header, so if you need something else, then you you can directly customize this in your code, then how the dialog header looks like how the content looks like, of course, and there are a lot of options to use this also, the same mockup that I have done here with the html is also used for the test sidebar. So when I click here show dialog, it actually opens up a sidebar and they have dissolved documented in these components here.

A

So the sidebar on the left actually shows like this. The sidebar on the right just has a css different, css class applied to it. So you directly can see this just is side by right and then it will be placed on the right side. I also played around with some new components that not exist in fluent ui. For example, I have a dialog error, dialog success or dialogue warning in there. So it gives me because I built this up from small building blocks to bigger components.

A

It gives me a lot of free time to experience to build out a new experience and, of course, what we also see saw before was the uh the uh the avatar images, and I can do also some things like facepile that you will see later on. So how can you use this? Of course? It's it's an npm package that you can install to your sharepoint framework solution or to any other system that uses npm as the base package solution.

A

I don't have a nuget package yet and I'm not sure if I will do this, but let's get over to a regular spfx solution, and this is really a plain html solution. So this is, I created previous uh already a web part which just used no framework as a default. So there's no reactant there there's nothing else in there. It's just plain html web part.

A

So the first thing, actually that we need to do is we need to have some sort of code. I did demo this already on a previous call. How to make the web part seem aware.

A

So you have to add some on in it. You need to request the same scope so and all the h2o components automatically will also apply in sharepoint with the correct theme in there, but you have to add some coding here, the actual one. What we have in here in the render function I just copied over the html from h2o directly in here. I just picked here the the standard button and the primary button. Okay.

A

So if you, for example, have a react control, then you would actually uh encapsulate this in the react. Button uh in the react. Separate react control that you then add to your user interface and the really once you have npm installed the h2o package, then you have to do the following, so you have just import here: the node modules at nad h2o, core lib component space, which actually just handles all the mix, ins and functions that are required for the other components that you run and then in your web part code.

A

This is the regular webpart h2o sample, which is the default container where the webpart is rendered in, and then you have to define it as a global one, because I use global stylings and this avoids actually that mic that the sharepoint framework replaces my class names with some random hashtag at the end. So we then have components in here uh like import the avatar. So if you just want, if your application just use the avatars, then you just have to import this file. You can just use the buttons cards.

A

Dialogues, forms, icons, menus tables and topography and web parts so for the web parts, let's quickly go back to the h2o documentation here again, so I have here in molecules. I have your webpart related things and what I actually have in here is the webpart title uh that you can also use, and this works exactly like the microsoft webpart title just with html.

A

So you see the placeholder here, which is the default one at microsoft, the most web parts are news, and then you can type whatever text in here.

A

So you can use this as well. Let's go back to the code, so these are actually just the style information that you import from h2o, and this is basically the same. How you would use a bootstrap, but in this case, when you use h2o, then it gives you the exact same branding that you have on fluent ui.

A

Let me save this quickly and now that we have the styles registered and now that we have in our web part the button in it should let's head over to sharepoint. So I have here already. My web part deployed have a sharepoint site running and what you see in here is the hto buttons, which is just the primary button and the standard button I can edit this page. I can also switch here.

A

The section background to let's say inverted like what we have at the bottom, and this always gives you the right styles, for you for the h2o components.

A

What I also can do in here is: I can change the style, so I say, change look, may select one of the red ones and automatically the buttons from h2o applies the correct theming.

A

So let's do something else add another component and I already have copied another component out, which is actually the face pass that I showed you before, and I just have a small function which then returns the html, and what I do now is, I add this to my web part code, so that it gets rendered it takes a little bit, but if we are lucky we can refresh this one and have already the face pass in here.

A

So it's just use html and css, but gives you a lot of flexibility to build in whatever framework you choose for office, 365 customizations, whatever you build in the microsoft ecosystem, to give you the flexibility to to use whatever framework you like and you're, not limited to react.js what office ui fabric just provides you.

A

If you have experienced some issues, then you can go over here. It's on github nad design, slash h2o and to the issue list. If you have some ideas that are because, if they are seeing something's missing and there's already an and request here with the pivot bar that how it manages the overflow just join the discussion in here, what you see also on the h2o landing page, you get here a complete documentation, which is my dot nad dot at h2o and it's completely free open source.

A

And if you want to join or want to provide, also some components. Then you're also welcome, and I already got a lot of people, uh some people that helped me fixing some bugs created some new pr's and and help me to merge it into this open source, community driven fluent ui framework.

A

That's basically, all from my site.

B

Awesome stuff- and this is very, very cool stuff- a lot of great comments in the chat. I love how simplistic it is to implement and use within uh our favorite space of developing in the microsoft 365 ecosystem, so excellent job super super cool stuff.