Article
0 comment

hTWOo v0.4.0 got released – more Teams and improvements

Version 0.4.0 got finally released, and first of all, I have to thank three people who helped me make this version possible.

Waldek Mastykarz @waldekm, who recently implemented an hTWOo showcase using Microsoft Graph Toolkit.
Derek Cash-Peterson did a great job helping me test various beta versions. Under the hood, there was some restructuring going on. It doesn’t mean that anything changed in your developer experience.
Julie Turner also provided great feedback and test run hTWOo HTML/CSS components in a ReactJS environment.

So what is in this release now?

Card Grid Supports

To make it easier for the developer, I created a base implementation of a card grid. Similar to what Waldek described in his blog post. It uses the CSS grid layout, which makes such a grid system easy to implement.

The following pictures show how the grid behaves on different screen sizes.

Card Grid at full size

Card Grid at full size

Card Grid at medium size or tablet size

Card Grid at small size or mobile size

Care layout title eclipses

Long title in the card layout will now have a maximum height of two lines and then automatically add eclipses at the end ‘…’.

Card title with elipses

These ellipses are just a small but important improvement when the text does not fit on the card. This implementation is all based on CSS and does not require any JavaScript.

Image Shimmer

Image shimmer should improve the loading performance for images. The idea here is that the image has a background shimmer effect and a blank transparent image on the image source. Those are also called “replaced elements” in CSS.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="hoo-ph-img16x9" width="320px" height="180px">

So on after replacing the src attribute with the real image URL, it overlays the shimmering background.

This effect is currently available for the following aspect ratios:

CDN Support

If you like to use hTWOo from a CDN, you can use it now via unpkg.

hTWOo CDN Support

The dist-folder contains a precompiled version of the CSS and the JavaScripts in UMD, AMD, and CommonJS.

Microsoft Teams Toolbar and Dashboard – First Draft

This release also extends the support for Microsoft Teams applications. So there is now the Teams Toolbar as well as the Dashboard component included.

Microsoft Teams Toolbar


Microsoft Teams Dashboard

In future, the Microsoft Teams support also gets extended features.

In case you wonder why doesn’t it have the colour like in Microsoft Teams. In Teams, the experience looks like this. We will get there.

Dashboard in Teams context

I am working on a Theme Switcher add-on for the style guide, but now I can only trigger it during development or in a SharePoint Framework Solution embedded in Microsoft Teams.

More to come soon.

and finally YOU

To get started with hTWOo on your next project, please check the tutorials in the documentation.

If you have features missing, let us know in the discussion forum or case of emergency, you can always drop an issue or leave a star on the Github Repo to show your support.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.