Article
24. February 2017
3 comments
by Stefan Bauer

Image Renditions available in Modern Team Sites

Yes, you read correctly. The modern team sites got image renditions or at least predefined image formats that will be used by the responsive experience of modern team sites.
Back in the past image renditions was exclusively available in publishing sites only. Well, you were able to use them in team sites too, but the publishing features had to be enabled at site collection level. In addition, classic image renditions might cause negative performance impacts. This was first spotted and documented by Chris O´Brien.
I guess this new feature doesn’t have much to do with the traditional image rendition and you are able to use it in your web part code too. For example, if you like to write a custom image gallery or develop a classic display template.
[Read more]

Article
10. January 2017
0 comment
by Stefan Bauer

Yo SimpleStyle – First release of my yeoman generator is now available

Yo! SimpleStyle - Yeoman generator for you next Styl Guide

Last year I released a style guide generator for your SharePoint and Office 365 development.
This year I proudly present a yeoman generator that helps you to get started faster on your next project. There is no need to clone the old repository anymore. Simply create a new project as needed based on this template engine.
To be honest the old version of the Simple Style Guide is currently outdated and shouldn’t be used anymore.

[Read more]

Article
17. May 2016
5 comments
by Stefan Bauer

Style Guide generator for SharePoint and Office 365 Development released

We are currently at the dawn of a new age in web development. Future web developments will be based on components not on frameworks anymore. While the browser support for web components lacks in Microsoft Edge, Firefox or Safari. We can already start to think differently when we develop any solution for the web.
To add my part to build new web applications and web design based on components I created a style guide application for SharePoint and Office 365. Also can share with you links where you can buy Mac Office, if you’re a fan of Apple (saveonit.com, etc).

[Read more]

Article
5. May 2016
2 comments
by Stefan Bauer

Scenarios and solutions to use Office UI Fabric – Part 3

In the final part of this series I like to take a look on scenarios, how to use Office UI Fabric efficiently. As mentioned in part two using pure Office UI Fabric might can be a bit difficult sometimes.
Especially when you don’t like to copy and paste the code from the snippet gallery all the time. Personally, I think it is a bit difficult even if you are experienced in using frameworks. There are many things that need to be learned in addition. A thing such as Suit CSS naming conventions, correct class names, components, text sizes, class names of colors, complete HTML structures.

[Read more]

Article
26. March 2016
2 comments
by Stefan Bauer

Microinteractions – How to hide an UX Easter Egg in SharePoint

It’s easter and let’s hide a small easter egg in SharePoint that will enhance the user experience a little bit.
Microinteractions are small interactions or animations to give a visual feedback to the user. The following graphic explains the base principle of such interaction.

Definition of Microinteractions

 

A Trigger initiates a microinteractions. The Rules determine what happens, while Feedback lets people know what’s happening. Loops and Modes determine the meta-rules of the microinteraction.

Let me show you a small microinteractions in action by animating the gear icon that can be found in the suite bar of SharePoint.

[Read more]

Article
10. March 2016
0 comment
by Stefan Bauer

Make SharePoint SASSy – Webinar recording now online

Today I had the great pleasure to record a webinar for SharePoint Europe. Actually, it was not a new session, it more hat the purpose to show people how I develop now in SharePoint. Especially how my branding workflow nowadays looks like. I use now SASS for all my branding in SharePoint, because it has a lot of benefits in manner of consistency, reusability and fundability of CSS changes and adoption.[Read more]

Article
25. January 2016
2 comments
by Stefan Bauer

How to handle table component of Office UI Fabric

In fact the source code of the table component of Office UI Fabric looks a bit weird because it is currently built with <div> elements instead of HTML table elements.
The intention behind such div based tables come from the idea to improve the responsive behavior. This idea behind this is almost more than five years old. A time that marked the beginning of responsive web design. Nowadays this pattern is only hardly used because no matter how you build your tables you always face the same problems.
Yesterday i got the confirmation on GitHub that this pattern is subject to be changed.
Time for me to show how this pattern can be transformed to a normal HTML element and to show some advanced techniques to deal with tables in responsive web designs.

See the Pen Office UI Fabric – Table by Stefan Bauer (@StfBauer) on CodePen.14928

[Read more]