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.
How to handle typography in SPFx projects with spfx-uifabric-themes
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.
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.
Communication Sites: Workaround for missing page layout option
Microsoft recently released the new Communication Site template. It is a great first look into a new way to publish web content in SharePoint only.
Sadly some important features are missing yet in the first version of this new site template. One of such things is the creation of new content pages based on templates.
When you like to create two pages that should look identical, but with different content, all web parts need to be placed in the same order as you have added them previously.
Luckily there is a workaround to the missing page layouts.
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.
How to use Theme Colors in SPFX Web Parts
DEPPRECATED This blog post is outdated please implement the new version of this feature see: How to make CSS Variables work in SPFx web parts.
While Waldek Mastykarz and I were working on a new project, we ask ourselves what it needs to create the web part corresponding to the current site theme colors.
After a small research, we found the solution for that.
TUGAIT – Workshop and Session next Week
I’m looking forward to next weeks TUGA IT conference in Portugal. I’m pretty honoured and excited and it will be the first time I visit Portugal at all.
During this conference, I will hold a full day branding workshop gives you an insight into modern web design and development covering the following topics.
How to run SharePoint Framework Pattern and Practices Samples through Docker
I planned to write a blog post how to run the SharePoint Framework Workbench in a Docker container on Azure. After I found out this is currently not possible I switched the scope of my trial. Instead, I tried to create Docker container dynamically for projects based on SPFx.
There are two key takeaways explained in this post. You will learn how to build your Docker file specific for your upcoming projects, and you get to know how you can demo and try out all SPFx Pattern and Practices samples regardless the version currently needed by those projects.
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]