The modern experience is responsive by default, but it doesn’t mean that your web part will be. Especially with the new team sites and communication sites, the behaviour of web parts is as tricky as it ever was. Office UI Fabric doesn’t help you to achieve a significant user experience because it is out of their scope and offers only smaller components or full-page scoped methods, but nothing in between as needed as in web parts.
The surrounding design of a web part, for example, is defined by Office UI Fabric and even the grid system is provided by that toolkit.
When you write a web part, you might worry more about how the same web part behaves in different containers already defined by the overall page design in SharePoint.
Time to show you a trick how this container pages optimisation is possible in the SharePoint Framework and show the basics.
The first version was only planned to give people a more comfortable use for theming tokens in SPFx projects. Today I released a new version that improves the typography in a way that Office UI Fabric currently not provides.
This new release is mainly targeted for accessibility and gives the ability to define custom classes based on the outlined typography.
A while back I wrote about on how to use the theme slots in the SPFx projects through SASS. It allows you to write web parts that reflect the default theme colours of a site. Instead, using fixed colour values, you can use variables in the CSS code of your artefacts.
To make the overall process faster I recently released and NPM packages including all the SASS colours plus some extras.
In the final part of this series I like to take a look on scenarios, how to use Office UI Fabric efficiently. As mentioned in part two using pure Office UI Fabric might can be a bit difficult sometimes.
Especially when you don’t like to copy and paste the code from the snippet gallery all the time. Personally, I think it is a bit difficult even if you are experienced in using frameworks. There are many things that need to be learned in addition. A thing such as Suit CSS naming conventions, correct class names, components, text sizes, class names of colors, complete HTML structures.
In the first part of this series I showed why Office UI Fabric might not be suitable for every of your projects. Now I like to dig a little bit deeper into the architecture and ideas behind Office UI Fabric. In addition I will give you my personal guidance on using it.
First, let’s take a closer look at the naming convention implemented with Office UI Fabric.
This question Waldek and I had to answer a couple times after the Mobile Quick Contact PnP sample has been released. There are several good reasons to use Office UI Fabric but there are also some scenarios currently not well covered. While the last blog post was more on how we built it, this tells more the story why we haven’t chosen Office UI Fabric.
Right after I started to write this blog post I noticed the overall considerations might be broader then cover it in a single blog post. I decided to split this single blog post into the following three chapters.
First, let’s take a look at the reasons why we haven’t used it in our sample.
In the last blog post on how to use the Office UI Fabric table and showed how making the table responsive too. This time I like to show what can be done to make the checkboxes fixed in its position.
In fact the source code of the table component of Office UI Fabric looks a bit weird because it is currently built with <div> elements instead of HTML table elements.
The intention behind such div based tables come from the idea to improve the responsive behavior. This idea behind this is almost more than five years old. A time that marked the beginning of responsive web design. Nowadays this pattern is only hardly used because no matter how you build your tables you always face the same problems.
Yesterday i got the confirmation on GitHub that this pattern is subject to be changed.
Time for me to show how this pattern can be transformed to a normal HTML element and to show some advanced techniques to deal with tables in responsive web designs.
See the Pen Office UI Fabric – Table by Stefan Bauer (@StfBauer) on CodePen.14928
Last week I played a little bit with node.js, gulp and Office UI Fabric. When I tried to install this UI Framework through bower.io i wanted to inject this bower components directly into my source code via gulp-wiredep. Sadly this failed because somehow the packages was broken. After a short research i found the reason for that and fixed it right in the framework on GitHub.