Article
2 comments

Develop SPFx web parts for different section designs using CSS

Over the last couple of days, I banged my head against the wall. I hate when things don’t work as expected. On the other hand, I love challenges.

The thing we are talking about the documentation on “Supporting section background“. To be clear, the documentation is correct. It works as described. The issue I and many others have with this documentation it does not apply to your project.

[Read more]

Article
0 comment

Easy way to remove background from images for use in SharePoint

In the recent blog post, I showed why it is useful to have specific images without a background as a PNG. What if you have pictures, but those images have a background attached, and you like to get rid of this background?

Well, you can ask one from the marketing team to probably do the job for you. There is an easy way that every user can do. The only tool you need is PowerPoint, Word, Excel or any other Office application.

[Read more]

Article
0 comment

The power of transparent images in SharePoint – Modern experience

I case you are working with photos; it is obvious to have these pictures full-sized in your SharePoint. Sometimes it makes sense to handle images that should land, for example, on a communication site with a little bit more care. Especially when you are dealing not with photos but with illustrations.

Sometimes you don’t like to have a background on your images. Let me show you why.

[Read more]

Article
0 comment

SharePoint Framework and the Office UI Fabric grid system

A while a GitHub issue in the sp-dev-docs came to my attention, where someone had a problem titled as Can’t get grid system working using office fabric ui react. I took a closer look on why it is so challenging to get the grid system running right now and in SPFx projects in general. There are some catches you need to be aware.

Some of those issues are already documented in the a blog post on How to make your web parts responsive to the parent container or How to use Bootstrap in SharePoint Framework projects. Here is the rest of the story.

Office UI Fabric is somewhat like the first and foremost first third-party Framework that you may want to use in all your projects to create a seamless experience with the rest of the Office 365 platform. It is not exclusively to SharePoint or SharePoint Framework Projects.

[Read more]

Article
1 comment

Major CSS Class changes in Communication Site and Workbench

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.

[Read more]

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]