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.
I guess I showed in some of my recent blog posts that it is possible to test themed web parts during development. This theme testing is currently not possible in the local workbench, but it is possible on the one available on Office 365. Let me show in this post how I did and do and in which problem might occur to your web parts too.
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.
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.
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.
Today I recognised an annoying problem in Excel because a workbook in Office 2016 for Mac showed the wrong date and currency formats. I always got the English date format as value. Sure I was able to change the date values to match the German format convention, but that was just for display.
Excel showing wrong date format according to region settings
Even when I entered a correct german date, then it was not recognised as such. Excel identified the value only as text.
On the 11.11.2017 the first SharePoint Saturday will happen at the Microsoft Headquarters in Vienna. I’m pretty excited to announce that the registration is now open.
To see the lineup and program, you will find a complete listing of the sessions on our home page.
To keep up-to-date you can follow our twitter account (@spsvie) or join our Facebook Page.
Join our first SharePoint Saturday in Vienna and I hope to see you in November!
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.
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.