Ever wanted to make your roll-up of content look better than the out of the box (OOB) look and feel provided by SharePoint? If you have used a Content Search Web Part in SharePoint 2013 you know what I mean. The OOB templates provided to display the search results are not as spectacular anymore and it would be great to make it look so much better.
(SharePoint 2013 CSWP OOB Display Template – Picture on left, 3 lines on right)
But isn’t making this look better going to take a lot of work coming up with a design pattern using HTML and CSS? What if we want to add some functionality to it so that when you hover over it the row is highlighted? Isn’t that going to take Javascript or more CSS to solve? Isn’t there an easier way?
Yes! And Microsoft has provided this solution all as open source. The Office 365 (O365) design team at Microsoft has developed design patterns that are being used in the new O365 look and feel. The new look and feel is the standard being used across the whole suite of O365 products / services. And even better, they are providing all the design patterns as open source so that we can use them in our solutions.
The design patterns are the Office UI Fabric (OUIF) and can be found here: http://dev.office.com/fabric. The patterns provide SharePoint developers with Styles, Components, and Resources. Microsoft has also provided excellent documentation on how to use them in multiple frameworks.
So by using the OUIF we can transform the above OOB display template into a beautiful view of content, while following a standard pattern that you will find throughout the O365 environment. Even better, since this is open source, Microsoft gives you the HTML to add to the display template and the CSS files to add to the site, so that it all looks great with a constant look and feel!
Here is the outcome of just changing out the HTML to the display templates and adding the CSS files.
Now doesn’t that look so much better.
