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.
Recently Waldek Mastykarz (@waldekm) and I developed a sample for the Office Pattern and Practices. This sample query contact information by using the Microsoft Graph. We also optimism the user interface for mobile use.
While Waldek took care of the technical development of this sample I was responsible for the user experience and user interface design.
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]
In the last blog post on how to use the Office UI Fabric table and showed how making the table responsive too. This time I like to show what can be done to make the checkboxes fixed in its position.
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
When it comes to responsive web design and tables some people might get a panic. In general there is nothing bad about tables. Just treat them right.
This time I like to show how to make list forms responsive. Actually, this sound harder than it really is just because the form is rendered in a table. A table is as good and flexible as any other HTML element and can be transformed into any other form.
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.
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!!!
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
I’m not quite sure when it happened. During the last twosome of months, Microsoft provides some icon fonts in Office 365.Especially the newly introduced app launcher makes use of icons of this typeface.The content varies from icons, such as the Hamburger menu, arrows, general, UI elements, as considerably as all Microsoft Applications. The files of this font are hosted on the Microsoft CDN so they are ready to use to spice up Apps.
Office 365 Glyphs – Preview
Icon fonts provide a couple of benefits. Fonts are scaled better than any image across different screen resolutions and even looks great on high density displays without any loss of quality.
There is another advantage to use this font. By using the same icons as in Office 365 you will be able to provide a consistent user experience.
Microsoft created a while ago some UX Guidelines for Apps in SharePoint, but you won’t find any information on the icons.
As mentioned earlier CDN is the key. Microsoft provides some centralized assets there. There is only one problem the use of a CDN is mostly undocumented. One general documentation can be found on the MS Technet.
There are several CDN endpoints and in case of SharePoint only one url exist in Office 365 for a long time. This URL is //cdn.sharepointonline.com. This url can be accessed via http (port 80) and http’s (port 443).
To make use of the icon font the following code needs to be used in your courses.
@font-face {
font-family: "SPO365Icons";
src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot");
src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"),
url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.woff") format("woff"),
url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.ttf") format("truetype"),
url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.svg#web") format("svg");
font-style: normal;
font-weight: normal;
}
You might recognise the path in there that points to “_layout/15 “ which is the current version of SharePoint. The path before the layouts fairly undocumented and might change over time. I try to maintain those urls in future until there is an official documentation available.
The font-face definition can be added to the custom style sheet of your app. Again the content of this font is undocumented as well.
This was the reason why I set up a small interactive documentation that use the CDN urls and shows all relevant icons. So you don’t have to search all the 65536 glyphs (or characters).
The guide be found on my newly created lab site under the url lab.n8d.at.
A page that I’m looking forward to maintain in the future and add some additional information and things there.
Following the principles of “Ship or die”. The mobile support is currently beta too. I’m looking forward to provide a superb user experience.
If you have any comment, suggestion how to improve. Please feel free to comment. I will be lucky to hear from you.