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.
Last June all default yeoman webapp generator got a new web server component named browsersync.io.
While the web server component of those generators used components such as connect, ‘gulp-webserver’ and ‘live reload’. Browser-sync overs similar and maybe better development support at once. Making configuration and integration easier.
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.