Article
0 comment

How to make your web parts responsive to the parent container

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.

[Read more]

Article
3 comments

How to better control CSS class naming in SPFx

CSS is currently not capable of scoping the design only to a component on a web page. It is just possible through different class names for elements on the page. To avoid the inference of same style sheet classes on the same page, SPFx post-fix every class name used in the web parts CSS files. There are also hidden gems that allow you to change this behaviour dynamically as required and sometime the class names shouldn’t be renamed at all cost. Enough about the theory lets take a closer more detailed look.

[Read more]

Article
0 comment

NPM Package for Office UI Fabric colours released – Ok a while back

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.

[Read more]

Article
4 comments

Un-brand Office 365 Tenant-wide – A Design Showcase

In Office 365 there is a great mechanism that allows you to implement a corporate wide branding on the suite bar. The customer can apply their logo and their corporate colors there.
On Monday I thought to myself what if I can make the suite bar less distracting than it is. The solid black and blue combination draw a lot of attention on every load while browsing the various portals and applications.
I customized my suite bar in the admin center to have a white background with the logo in the center of the page. All content pages in Office 365 so the white background, I thought, will seamlessly integrate the ribbon on the page instead of standing out.

[Read more]

Article
0 comment

Handling CSS naming conventions in SPFX

The new SharePoint Framework has a smart way to avoid conflicting CSS definitions. Therefore all style sheet classes will be post-fixed with a unique random string and converted to a JSON object. In your web part code, you can use the same class name as you used in your style sheets and the variable will be automatically replaced with the random class name string. So far the good parts of the SharePoint Framework.

In practice, this has some limitations and challenges.

[Read more]

Article
3 comments

Image Renditions available in Modern Team Sites

Yes, you read correctly. The modern team sites got image renditions or at least predefined image formats that will be used by the responsive experience of modern team sites.
Back in the past image renditions was exclusively available in publishing sites only. Well, you were able to use them in team sites too, but the publishing features had to be enabled at site collection level. In addition, classic image renditions might cause negative performance impacts. This was first spotted and documented by Chris O┬┤Brien.
I guess this new feature doesn’t have much to do with the traditional image rendition and you are able to use it in your web part code too. For example, if you like to write a custom image gallery or develop a classic display template.
[Read more]