You might have recognised that the workbench of the SharePoint Framework has a responsive design tester included. In this blog post, I take a look what possibilities we have to properly test the responsiveness and the user experience of a web part.
There are also some pitfalls included if you entirely rely on the integrated too.
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.
This blog post is outdated. I newly introduced a new solution named Whitespace and a new repository which makes this overall solution outdated. Especially it does not include the previously introduced additional design elements.
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.
Whenever you start a new SharePoint project, you might depend on external libraries. These libraries are maybe small helper tools such as jQuery or maybe like to go beyond KnockOut or React. Let’s say you want to use Handlebars, VueJS or perhaps Angular 1.x. Everything you perform the same setup steps in the same order. In my case, I start most new projects using Handlebars. Luckily I wrote my documentation to make the configurations pretty smoothly. To be honest, it is proper training but on the other hand a complete waste of time. Why not automate my personal preferences and start a new project from scratch with my settings already applied. This article takes a look at why you might consider writing your own SharePoint generator in future. [Read more]
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.
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.