It has been a while since I release the last version of my spfx-uifabric-themes npm package to make it easier to handle theming in SPFx projects.
New Release spfx-uifabric-themes
I’m proud to present now a new version that supports theming through CSS variables instead of SASS variables. If you hear this the first time, let me give you a short introduction on that.
No matter what your preferred operating system or device is, you can develop and deploy for SharePoint whatever you want to use. Even for the deploy modern experience components for branding such as themes for the modern experience.
In my case, I work mostly on Mac occasionally on Windows, whatever serves its purpose best. Sometimes I write PowerShell Scripts to configure things on Office 365, but there is a new option other than PowerShell, but those configuration changes nowadays are even possible through classic bash scripts through the opportunities provided by the Office 365 CLI.
Enough said on the new possibility let’s look why it might make sense to have multiple different themes available.
Once a wise man cited a wiser woman with the following statement:
“My mom always said life was like a box of chocolates. You never know what you’re gonna get. – Forest Gump”.
This quote can be applied to SharePoint in Office 365 nowadays too. When you have a provisioned classic site or even a modern site, then you never know what primary colour you get as your default theme.
Not every one of our users works in marketing or is an expert in storytelling. Storytelling is a skill for the future, but like every skill, it doesn’t come overnight and requires training. I assume, like for many of my customers, have problems to find an appropriate image for the header.
On the other hand, to communicate what is happening around you is beneficial for the rest of the company too. Let me show you a use case why you use default images for events in communication sites first and how to solve this on this kind of site templates.
I know the Feedback and Mobile App buttons are essential for Microsoft, but many of my customers ask me to remove it. There a mainly three reasons for that. The first is the location and loading behaviour of those buttons. It takes a while until those buttons are loaded and catch a lot of attention of the user once they are visible on the page.
The second reason is that the location sticky on the bottom of the page might not be the perfect spot for those buttons. I might be more useful to have them somewhere in the header or suite bar.
Last weekend I had the opportunity to speak at SharePoint Saturday Helsinki organised by Jussi Roine and Jussi Mori. With more than 170 attendees and 20 speakers, it was the best place to be in Helsinki on this Saturday.
While I was checking my demos for my session, I recognised a problem that currently exists on the Online Workbench for SPFx. The demo based on my blog post on how to make your web parts responsive to the parent container. In this blog post, I make use of the Office UI Fabric grid system class names and colour the content of the web part differently according to the parent container. A method beneficial to support the responsive flow of web parts and to improve the user experience.
When I looked at the repository of my SimpleStyle Guide, I couldn’t believe that it was almost two years ago when I started this side project. Which those two years this Style Guide helped me in many projects to document all the changes in classic as well on the modern experience in SharePoint and Office 365.
Many developers in the past have use Frameworks such as Bootstrap or Zurb’s Foundation, and from a pure developer perspective, it is clear why to use them. There is yet Office UI Fabric around, but with every new framework, you need to learn those frameworks specifics.
Because it is and was so famous for the use of SharePoint web parts you might like to update some of your existing web parts to the modern experience. Whatever the reason is might by you use it; there are some things to know before such framework can be embedded safely in SharePoint Framework projects.
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.