Article
14. December 2016
4 comments
by Stefan Bauer

How to handle automatic CSS class renaming in SPFx

The new SharePoint Framework has a safety net when you develop and style your components. Whenever you write a new style sheet class this will be picked up by a SASS preprocessor that first compiles the SASS file and then applies a special random string to the class name.
This should theoretically avoid that two web parts have conflicting style sheet classes. If one web part uses the style sheet class ‘item’ and another web part uses the same class name. The last web part embedded on the page will win the battle how the item should look like. Through this renaming you make sure that every web part has an individual definition of the item. In general this is a good behavior.
On the other hand, you have frameworks or Office UI Fabric where those classes won’t be renamed.
There are also some negative impacts caused by that method and there is also an easy way to disable this renaming of style sheet classes. If you do so, then you need to be aware of certain things on how to make your styles available exclusively just for your web part.

[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
15. July 2015
2 comments
by Stefan Bauer

Apply grid system to SharePoint using SUSY

As promised in my blog post “What is inside your SharePoint CSS” I like to show how it is possible to add a grid system to SharePoint without using Bootstrap or edit the master page.

Grid systems for web sites were popular long before Ethan Mascotte wrote his famous article about “Responsive Web Design” back in 2010. The first grid system I ever used was the 960.gs. It was released in 2008.

[Read more]

Article
10. May 2015
2 comments
by Stefan Bauer

Enhance suite bar for your responsive experience

Over the last year I did more branding projects on Office 365 than on on-premise. Since the first call by Microsoft to avoid modifications of the master page I played around with certain scenarios and patterns to reduce or avoid such modifications.
One common issue is that the suite bar is responsive (everything that resize is responsive) but not well optimized for mobile. Without any enhancements this part of SharePoint shows only half of the content. With some small CSS only modifications the suite bar looks great on nearly any device.
The following blog post use SASS pre-processed CSS the compiled CSS can be found too at the end of this post.

[Read more]

Article
30. April 2015
4 comments
by Stefan Bauer

How to use CSS and JavaScript files from Yeoman directly in SharePoint

In the first blog post I explained how to set up your Yeoman development environment. You have now a local web server and you can start your web development. Now lets take a closer look how you can integrate the files on this web serve directly into SharePoint on-premises and Office 365.
Open your project and start the web serve with the command ‘grunt serve’.

[Read more]

Article
26. April 2015
10 comments
by Stefan Bauer

How I develop in SharePoint and Office 365 now

In my session at the SPS Antwerp I showed the attendees how my personal branding workflow evolved over the past two years. For the demos all I needed was my web browser and Yeoman.IO.
I presented all of my stuff on the ancient looking MacOS armed with SharePoint virtual machines and in Office 365.

The reason why I switch my development workflow to yeoman was because I can do many things faster. I currently use it for all my SharePoint related branding and JavaScript development.
It works great for my for Office 365 development as for SharePoint On-premises. No more deployments during development just use it.
I use the resources out of Yeoman such as JavavScript and CSS files directly out of it. Just as we use things from a CDN such as jQuery. Before I can dig deeper on how to use it the first thing to do is to get your development environment ready.

[Read more]

Article
9. March 2015
0 comment
by Stefan Bauer

Speaking at SPS Belgium in Antwerp and more

 

My session is about SASS and how it fits into your modern SharePoint branding and development approach. The session is entitled “Stop your SharePoint CSS become a di-SASS-ter today!” and covers the following key takeaways.
– I will explain what SASS is and where you would use it.
– How to use SASS to brand SharePoint without requiring lengthy deployments.
– How to create simple Rich Text Editor Styles using mixins and includes.
– How to apply a Grid layout and make it Responsive.
– How to structure your branding correctly to make it more maintainable.
– How CSS 4 fits into the picture and does it make SASS obsolete?

See you in Antwerp, 18th April 2015!!!

SPChat – Branding Office 365 and SASS

SharePointChatPromoStefan2
About one month before my session in Antwerp, on 19th of March, I will be available to for an SPChat on Branding Office 365 using SASS.
You are gladly welcome to open discussion on how to get started using SASS. Get to know some cutting edge extensions that you should take a look into and talking about the challenges in Office 365 when it comes to enhance the user experience.

You will find more information at SharePoint-Community.net