In the recent blog post on how to make a web part works with different section backgrounds using CSS variables, I already covered. At the same time, this works perfectly for just regular web parts. There are specific scenarios, where this approach fails.
During summer there were two great PnP Summer Camps. In the second edition, I had the opportunity to demonstrate a cool looking web part. A web part that allows the user to edit the content directly on the page. Similar to the out of the box web parts but with a big difference. All the edit capability don’t use any fancy third party library.
Its been a while since the last release for my toolset for Theming in SharePoint development. I work on a product, and I have to make sure that the web part design is flexible enough to work great with any SharePoint applied theme. I discovered many changes in the currently available theme slots.
The support in case of SASS variables in your standard SharePoint project is limited. It was time to update my tool, but it comes with more great features that only SASS variables.
Consider the following simple scenario. You like to write a new SPFx web part, and you have the requirement to show a popup or a flyout container opened from a web part. This flyout menu should overlay whatever comes after your web part.
Recently many new user interface element got introduced to SharePoint that provides additional information about other services in Office 365. While you can argue this information might be valuable for users, you can also say that that information is just a consumer marketing attempt for already paid products.
In general, to keep the user informed it is a great thing to have a feature like this but from a design perspective and even end-user experience, those elements are not optimal. If this kind of information is valuable for the user inside an organisation, it is up to the organisation and not a decision made by any service provider.
To be clear, if this shows up on a free OneDrive user interface, but it is not something for a corporate environment.
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.
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.
Recently a new feature has been added to the authoring process in SharePoint online. This new feature helps you to define appropriate alternative text descriptions for your images on pages. In general to specify alternative text for images is possible the first time in SharePoint history. Previously only the title of an image could be defined.
When a new image gets inserted on a page, the image gets analysed by a background service, which assumes the content of the image and returns an appropriate description. Through the help of pattern recognition and artificial intelligence, the returned values are pretty accurate, at least with the pictures I tested this feature so far.
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.
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.