Article
0 comment

SharePoint Framework and the Office UI Fabric grid system

A while a GitHub issue in the sp-dev-docs came to my attention, where someone had a problem titled as Can’t get grid system working using office fabric ui react. I took a closer look on why it is so challenging to get the grid system running right now and in SPFx projects in general. There are some catches you need to be aware.

Some of those issues are already documented in the a blog post on How to make your web parts responsive to the parent container or How to use Bootstrap in SharePoint Framework projects. Here is the rest of the story.

Office UI Fabric is somewhat like the first and foremost first third-party Framework that you may want to use in all your projects to create a seamless experience with the rest of the Office 365 platform. It is not exclusively to SharePoint or SharePoint Framework Projects.

[Read more]

Article
1 comment

Major CSS Class changes in Communication Site and Workbench

Last weekend I had the opportunity to speak at SharePoint Saturday Helsinki organised by Jussi Roine and Jussi Mori. With more than 170 attendees and 20 speakers, it was the best place to be in Helsinki on this Saturday.

While I was checking my demos for my session, I recognised a problem that currently exists on the Online Workbench for SPFx. The demo based on my blog post on how to make your web parts responsive to the parent container. In this blog post, I make use of the Office UI Fabric grid system class names and colour the content of the web part differently according to the parent container. A method beneficial to support the responsive flow of web parts and to improve the user experience.

[Read more]

Article
0 comment

How to make your web parts responsive to the parent container

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.

[Read more]

Article
4 comments

Un-brand Office 365 Tenant-wide – A Design Showcase

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.

[Read more]

Article
2 comments

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
1 comment

Typography First – Make your SharePoint content readable and compelling

Typography

The first thing when I start a new branding project I first make myself familiar with the fonts I want to use. This is because I want to see how they work on some basic text elements an if the text is readable.

In general the overall typography is the most important factor to success of any information system or web site. 90% to 95 % on a website is dominated by text. Becoming a master on typography means you become a better web designer or SharePoint brander, but it is no easy topic and I just want to scratch the surface here but provide some good links for further information at the end.

The basic

The typography setup can be mainly defined by the following factors:

  • The Font
  • Font Size
  • Font Weight
  • Line Height
  • Letter Spacing

In other words, these are our core ingredients how we can manipulate the text. For example, some fonts look great with the predefined letter spacings while others require a little bit more space in between the characters. You can also use the letter spacing to make a special effect on headlines. For some examples that a look at Helvetica, Bold, Big, Negative Letter-Spacing.

How many fonts should I use?

In general when, you plan a design it is common practice that you don’t use more than three to four different fonts. Those different fonts can be defined for:

  • Headline (<h1>-<h6>)
  • Paragraphs (<p>)
  • Quotes (<cite><cite>, <block quote> is decrepted with HTML 5)
  • Code, Navigation,…

When we take a look at the out of the box design of SharePoint 2013 at least 3 different fonts was used. Those fonts are Segoe UI (for smaller text), Segoe UI Light (for large text such as headlines) and Segoe UI Semilight (&lth2>-&lth3>).

The fonts are part of the same font family, but have a different font weight, which is indicated by “Light” and “Semilight” and those fonts are slightly different. The typeface was adapted to the weight and are not only bold and “not so bold”. The reason why Microsoft used those different font faces was that they look great in there specific use case. Improved the readability and the overall design.

Font picker in composed look

Font picker in composed look

When a theme is used in SharePoint the fonts can be changed to only a maximum of two fonts. Mostly Segoe is used for the regular text as used in a paragraph, navigation, and so on because of its good readability. The larger font in the font picker will be applied to the headlines only.

Reset and Reapply fonts using CSS

When a web design is created from scratch it is fairly simple to reset the fonts. All that needs to be done is to apply a base font to the body tag and additional fonts for the headlines.

@import url(http://fonts.googleapis.com/css?family=Dosis:500);
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
body{
    font-family: 'Dosis';
}
h1, h2, h3, h4{
    font-family: 'Lobster Two';
}
HTML Typographic Template

HTML Typographic Template

In SharePoint this only partially works because some elements will still have the Segoe font applied. For a full change of the body font some additional classes need to be added.

@import url(http://fonts.googleapis.com/css?family=Dosis:500);
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);


body, .js-callout-body, .ms-calloutLink:link, .ms-calloutLinkDisabled, .ms-commandLink, .ms-commandLink:visited, 
.ms-core-defaultFont, .ms-core-listMenu-heading, .ms-core-listMenu-heading, .ms-tv-header, .ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenu-item, .ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenuEdit, .ms-core-navigation, .ms-core-pageTitle, .ms-core-pageTitle, .ms-core-pageTitle a, .ms-descriptiontext, .ms-metadata, .ms-secondaryCommandLink, .ms-secondaryCommandLink:visited, .ms-status-msg, .ms-textLarge, .ms-textXLarge, .ms-textXLarge, body, .ms-tv-header, .ms-webpart-titleText > a, .ms-webpart-titleText.ms-webpart-titleText, .o365cs-nav-header .o365cs-nav-navIcon .o365cs-nav-header .o365cs-nav-navIcon, body, .o365cs-nav-header .o365cs-nav-navItem, #pageStatusBar, a.ms-calloutLink:visited{
    font-family: 'Dosis';
}
h1, h2, h3, h4{
    font-family: 'Lobster Two';
}
Changed Typography in SharePoint

Changed Typography in SharePoint

So we now have two different styles that need to be applied differently to the Apps (first snippet) and SharePoint (second snippet). Both are probably stored in different style sheet files and we still don’t have any additional properties such as line height, font size or font weight applied to the fonts.

Finally and whats next

The two different style definitions cry for something more flexible and yes we can do this in SASS. By assigning variables we will be able to define the typography as global settings that are easy to change. Then we don’t have to care or worry about those style sheet classes.

In the meantime, you can do a test run and add the SharePoint Style Sheet from this blog post to your master page. If you want to get a little bit deeper into typography you can read the following resources.

Other articles in this series

Further readings

Article
0 comment

The future of SharePoint Branding

You cannot take a look in the future if you don’t know about your past. I started branding SharePoint in 2004. At that time I already had some years experience on developing web sites and application. Now we have 2014 and the SharePoint branding haven’t changed a lot. We still try to figure out how Microsoft built up the master pages and how we can bring them into a new form.

In SharePoint 2013 a great step forward has been made by Microsoft to improve the underlying style sheets and HTML. Tools like Twitter’s Bootstrap or Foundations and a couple of other frameworks have approach to bring responsive web design to SharePoint. Needless to say with all the benefits and downsides.

Global Experience Language by BBC

Global Experience Language by BBC

In the future we will see more and more applications (okay, okay apps) that will be integrated into our SharePoint.

Sooner or later our SharePoint will look like a patchwork of different designs. Will the future be of not branding SharePoint and use it as it is? I don’t think so we just need to find a smart way to adapt SharePoint to our visual needs and sometimes improved user experience for custom development inside the boundaries of the platform. Last but not least, how can we implement methods that helps us to adapt faster to future releases without recreating the branding from scratch as we did in the last versions.

CSS, FrameWorks, Themes

Currently, some branding like to do it the old fashioned way, just using the HTML and CSS to build up the user experience. Others prefer to use a framework and some might like to use the theming engine of SharePoint to change the look and feel.

There is no right or wrong with all these approaches. Over the last months I always asked myself the same question over and over again.

What can we do to create a smarter, better documented and future prover system than we do it today. Especially with Office 365, apps, display templates and much more everything become fluid. What worked today can be could be changed tomorrow.

For me the challenges of the future are focusing on content that lives throughout the different devices (Content Strategy). The usability that users expect on different devices. Last but not least we will see more and more different interfaces, there that access our content. May it be directly inside of an Office Application, a refrigerator, in our car or use a Xbox to manage a project.

We need to step one step back to see the bigger picture.

Design with a system

Wouldn’t it be great to have one central design system that handles all the different display forms without rewriting the code from scratch. Provide the same look and feel even user experience in SharePoint to Apps and even Office Apps. I think the key to success can be found in two concepts that are state of the art in web design today.

Design Systems

A lot of great information on design systems can be found on the web. The Laura Kalbag such system as:

“A visual design system is built out of the core components of typography, layout, shape or form, and colour.”

Another great explanation can be found in the article “Design Systems: Building for the Future”. Especially because he explains why design systems are more future proven than to use a framework in the context of a CMS.

The most inspiring article on this topic I found in a blog post called “Atomic Design” by Brad Frost. In his article he explained how to form a well structured and categorised design system for the future. He further explain how we can set up the core components (Atoms) that will be used to formulate larger components (from Molecules to Organism) that up into templates and pages. A functional demo of be found at patternlab.io

To me setting up such system has the following three benefits:

  • Better documentation of what we didIf no design system has been set in place prior the concrete implementation it will be hard to find the components that have been implemented. The consequence of this is that we might end up with code that does similar stuff, but with different classes attached.
  • MaintainabilityMost of the core components in HTML haven’t changed over decades, we just got some new. We can combine those in many different ways. The better we structure those the more maintainable the final branding will and easier to change in the future.
  • TestablityIf we know how our components look and behave in different view ports, we better understand how they function and work in the overall design. Testing smaller components is much easier to accomplish.

DRY – Don’t repeat yourself

SASS and LESS are great CSS preprocessors that allow us to write much cleaner code. Hence we can build our rich text editor styles by changing and assigning some variables instead of writing those style definitions from scratch. I know this is just a simple example, but the benefit of these technologies is that is also removes some complexity and gives us tools that are much easier to use.

Another benefit is that especially SASS allows to compile different CSS files based on the same code. For example, you create one in the context of SharePoint and one for a SharePoint Apps.

If you cannot wait for my next blog post. I can only recommend to read the blog post about DRY-ing Out Your Sass Mixins.

Finally and whats next

Those theories sound nice I know but how can we get started. I tried some things out over the last weeks and I will publish my findings over the next weeks. So stay tuned.

If I’m not completely wrong some people struggle with the implement a corporate wide branding. Though the changes in the app model we are not in the “SharePoint Exclusive Club” anymore. Sooner or later we need to move forward and take a closer look what other web developer do and what they are struggling with.

As Jeremy Thake said at the SharePoint Conference in Barcelona there are many of web developer out there that will be sooner or later able to build up Office Apps and SharePoint Apps.

If you like to follow my journey I would be pleased. Have comments on this, please feel free to comment. I hope at least for some it will be an interesting journey to the future of SharePoint Branding.

Other articles in this series

Typography First – Make your SharePoint content readable and compelling

Article
68 comments

Build a flexible mega drop down navigation for SharePoint

I’ve read a lot of good articles about mega menus or mega drop in the past. They all were from a technical point of view correct and useful introduction about the basics behind. When it comes to SharePoint you should always consider the user and how they can administer or change the design on their own. This is one of the strengths in SharePoint and the user should always be in the center of every solution. For a mega menu it doesn’t take much to accomplish. This can be done easily in SharePoint Designer or Visual Studio. Choose your weapon of choice and spend 30 Minutes to build up a simple but powerful mega menu.

The ingredients and how they work together

In general a mega menu is nothing more than an HTML Snippet that will be loaded when a user hover over a navigation item. This can be the top navigation or in SharePoint terms the quick launch navigation. For embedding to the quick launch the code only needs to be slightly changed.

The base of the mega menu is a customized article page that has a web part zone for the drop down content. The navigation is the out of the box navigation that should be extended for the following tasks

  • Hover over a navigation item
  • Grab the link URL
  • Load the linked page
  • Cut out the required web part zone
  • Add it to the page as the content of the mega drop down

To accomplish those tasks the well-known JavaScript library Jquery will be used.

The article page

In general to define the content of the mega menu any mega menu can be used as a starting point. The only thing that needs to be done is to encapsulate any web part zone into a <div> element.

Mockup Mega Drop Down Article Page

Mockup Mega Drop Down Article Page

The code for this is simple and looks like this:

...
<ContentTemplate>
 <div class="article article-right">
 <PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel">
 <SharePointWebControls:TextField runat="server" FieldName="Title"/>
 </PublishingWebControls:EditModePanel>
 <div class="n8d-dropdown" id="megadropdownitem">
 <WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="TopZone" FrameType="None" Title="<%$Resources:cms,WebPartZoneTitle_Top%>" Orientation="Vertical" />
 </div>
</ContentTemplate>
...

 

The script that performs the mega menu magic will simply grab the defined <div> element with all the content in it and adds it to the navigation. Then the author will be able to add content to their demand or change existing content without any single line of code. The only thing that needs to be defined is styled to show the content in a proper way.

The master page

The second thing that is required for this solution is a master page. This is only needed to register the required styles and Jquery scripts. In the default configuration of the master page SharePoint already have a fly out navigation.

....
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
 <script src="/_layouts/n8d.MegaMenu/MegaMenu.js" type="text/javascript"></script>
 <link type="text/css" href='/_layouts/n8d.MegaMenu/MegaDropDown.css' rel="stylesheet" />
...

To avoid possible conflicts with the script, the navigation control needs to be modified. This can be done by changing the properties for the MaximumDynamicDisplayLevels. It needs to be set from the default value which is 1 and needs to be set 0. This means that no dynamic children will be rendered.

...
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
 <SharePoint:AspMenu
 ID="TopNavigationMenuV4"
 Runat="server"
 EnableViewState="false"
 DataSourceID="topSiteMap"
 AccessKey="<%$Resources:wss,navigation_accesskey%>"
 UseSimpleRendering="true"
 UseSeparateCss="false"
 Orientation="Horizontal"
 StaticDisplayLevels="2"
 MaximumDynamicDisplayLevels="0"
 SkipLinkText=""
 CssClass="s4-tn" />
   <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
     <Template_Controls>
       <asp:SiteMapDataSource
        ShowStartingNode="False"
        SiteMapProvider="SPNavigationProvider"
        id="topSiteMap"
        runat="server"
        StartingNodeUrl="sid:1002"/>
     </Template_Controls>
   </SharePoint:DelegateControl>
</asp:ContentPlaceHolder>
...

Now that the base setup is done it’s time for some JQuery magic.

The Mega Menu Script

As mentioned before the script doesn’t do much. So when the page is loaded JQuery grabs all URL from the top navigation and looks for content that should be added to the navigation. This will be done by inserting a new <div> element directly on every item of the top navigation. This will be done by the following function.

var loadingData = function(){

    var navigationElement = $(this);
    var link = $(this).attr("href");
    var text = $(this).find(".menu-item-text").text();
    $(this).attr("linkname", text);

    $.ajax({
            url: link,
            async: false,
            dataType: "html",
            success: 
                function (data) {
                    content = $(data).find("#megadropdownitem");
                    
                    if(content.html() != undefined){
                        // fix content for calender
                        content.find(".ms-WPBody").each(function () {
                            $(this).removeAttr("webpartid");
                            $(this).removeAttr("class");
                            $(this).removeAttr("id");
                        })
                        newContent = "<div class='mdd-itemcontent'><div class='mdd-innercontent'>"+content.html()+"</div></div>";
                        navigationElement.parent().prepend(newContent);
                    }
                }
    });

}

For the animation of the flyout i simply added a hover binding to all of the navigation items.

$(document).ready(function(){

    var pageMode = $("#MSOSPWebPartManager_DisplayModeName");

    if(pageMode.val() == "Browse"){
        $(".s4-tn li.static a.static").each(loadingData);
        $(".s4-tn li.static").hover(showFlyOut, hideFlyOut);
    }
});

var showFlyOut = function(){
    if($(this).children(".mdd-itemcontent").html() != null){
        $(this).children(".menu-item").toggleClass("hover");
        $(this).children(".mdd-itemcontent").slideDown("fast");
    }
}

var hideFlyOut = function(){
    if($(this).children(".mdd-itemcontent").html() != null){
        $(this).children(".menu-item").toggleClass("hover");
        $(this).children(".mdd-itemcontent").slideUp("fast");
    }
}

The functions showFlyout and hideFlyout will show and hide the mega menu / flyout and also the class of the current selected navigation item will be toggled for a better styling. The last step was to add the design for the menu. After that the mega menu looks like this.

Finished look of the mega drop down

Finished look of the mega drop down

Let me show you how the solution works in the following video.

How to create a mega menu navigation in SharePoint from Stefan Bauer on Vimeo.

As seen in the solution the content of the mega drop down is flexible. Static or dynamic content can be added without changing the core functionality. No server side code is required, which makes it easy to adapt for SharePoint 2013. By changing the style sheets the form of the drop down can be easily adapted. While I used visual studio to deploy my solution this functionality can be added by using SharePoint Designer too. I think the most time consuming task in my mega menu solution are the design adoption but a simple drop down menu can be accomplished in 30 minutes. Would be great if you can share your experience with my solution. Finally what’s left to say have fun in creating you own variations.

Update Nov 19, 2013: Bugfix Calendar Web Part

As David Foster and Scott McLeod pointed out in the comments there is an error when a calendar will be used. The items were delegated to the mega menu instead of the list web part. The solution below is updated and contains the fixed version.

Download Visual Studio Solution

Article
82 comments

Turn summary link web part into an accordion

In SharePoint the summary link web part is a great tool to create overviews made of internal and external links. The challenge with this web part is to enhance the presentation when a lot of links will be added to this web part. In this post I will present how to turn this basic web part to an accordion which gives the user a much better experience.

Styling the summary link web part

First of all I created a simple summary link web part and added grouping of those links. As you see the amount of links are not that much but enough that specific links are hard to read and find the belonging groups as well.

summary link web part

summary link web part

To enhance the default style I simply added a content editor web part to the page that contains my new style definition. To improve the group header I simply added a style definition for the CSS class “groupheader”. I also added some styling for the links as well.

.groupheader{
	background-color: #0072C6;
	color: white;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 140%;
	padding: 0.5em;
	padding-left: 0.75em;
	margin-right: 0.5em;
	margin-bottom: 1px;
}

.groupmarker:hover .groupheader{
	cursor: pointer;
	background-color: #0597FF;
}

.dfwp-list{
	background-color: #0072C6;
	margin-bottom: 0.5em;
	margin-right: 0.75em;
}
.dfwp-list .item:hover{
	background-color: #0597FF;
}
.dfwp-list .link-item a{
	margin-left: 2em;
	color: white;
}

The style definitions transform the web part now into a metro styled web part. For the user experience I also added a hover effect using CSS. This allows to highlight the currently selected link.

styled summary link web part

styled summary link web part

Add accordion script

The turn this web part now into a fully functional accordion all that needs to be done is to add a simple Jquery script the performs the following tasks.

  • Hide all hyperlinks in the groups
  • When a user clicks a group header
    • Hide all sections that is not the current header
    • Expand current selected link section

This can be accomplished with the following code.

$(document).ready(function(){

		/* Slide up all link items and hide them */
		$(".dfwp-list").slideUp("fast");
		/* Binding a click event handler to the links: */
		$('.groupheader').click(function(e){

			/* Finding the drop down list that corresponds to the current section: */
			var dropDown = $(this).next(".dfwp-list");

			/* Closing all other drop down sections, except the current one */
			$('.dfwp-list').not(dropDown).slideUp('slow');
			dropDown.slideToggle('slow');

			/* Preventing the default event (which would be to navigate the browser to the link's address) */
			e.preventDefault();
		})
})

Now the web part has turned into an accordion with expandable sections, but there is one last step to do. The accordion is currently not editable but this can be fixed with a simple modification of the script.

Make accordion editable again

SharePoint has something called display mode. This display mode indicates how a user has opened a page and can have the following values:

  • Browse – indicates that the user views the page
  • Design – indicates that the user tries to edit the page

Normally this form context or display mode is use is web part development but it could be used and detected using Jquery. SharePoint renders a hidden input field with the id ”MSOSPWebPartManager_DisplayModeName” that will be set to the appropriate value.

For example the field can look like this if the page is opened in browse mode.

<input type="hidden" name="MSOSPWebPartManager_DisplayModeName" id="MSOSPWebPartManager_DisplayModeName" value="Browse" />

To restore the edit function all that needs to be done is to wrap the script and let it only get executed in browse mode.

$(document).ready(function(){

	// Detect if user view or edit the page
	if($("#MSOSPWebPartManager_DisplayModeName").val() == "Browse"){
		// Register accordion
		accordion();
	}

})

var accordion = function(){

	/* Do fancy easing */
	$.easing.def = "easeOutBounce";

	/* Slide up all link items and hide them */
	$(".dfwp-list").slideUp("fast");
	/* Binding a click event handler to the links: */
	$('.groupheader').click(function(e){

		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).next(".dfwp-list");

		/* Closing all other drop down sections, except the current one */
		$('.dfwp-list').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');

	})
}

The last thing I want to show is the accordion live in action.

Download Accordion Content Editor Web Part – SharePoint 2007 / SharePoint 2010