Integrating Microsoft’s Office UI Fabric Grid to your SharePoint Page Layouts

featuredImage

Integrating Microsoft’s Office UI Fabric Grid to your SharePoint Page Layouts

SharePoint’s ability to make a site responsive is not always the most intuitive for a developer. I have found that by incorporating Microsoft’s Office UI Fabric grid into my page layouts, I am able to achieve the ability to make my sites responsive. It’s actually not that difficult to do, and when it’s finished, all you need to do is create the proper styles to render when the device’s screen size changes.

Masterpage Edits

The first step to incorporating the Office UI Fabric into your page layouts is to add the proper links within the masterpage’s header. You can download the libraries and run them locally, but I always find it easier to link directly to the main libraries. You will also need to add this meta tag: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

Here is the code that I currently have in my intranet’s masterpage:

headerCode

Sources:

Setting Up Your Page Layouts

Now, we need to setup our page layouts so that they are configured the proper way. If you have ever created custom page layouts before, then this part isn’t very difficult. However, it takes proper planning so that your layouts display the right way on different screen sizes. Microsoft has a good site that discusses the different screen size breakpoints here.


The page that we’ll be editing will be an ASPX page layout, not an HTML page. I typically start with a copy of a system generated page layout and then I will delete everything between the two <asp:Content> that have the ContentPlaceHolderID of “PlaceHolderMain.” This is the meat of your page layout. This page is mostly going to be written in HTML with a few ASP snippets added for your webpart zones. The entire content body needs to be wrapped in the class “ms-Grid.” From there, you need to identify your rows. This is done by using the class “ms-Grid-row.” Finally, insert the classes “ms-Grid-col” and “ms-u-XXXX” (replace the x’s with the proper width and screen size you need) into the divs that will will contain the webpart zones. Here is an example from one of my page layouts:

pageLayoutExample

This page layout has a top section section that will take the entire width of the container. The second section has two sections that will be split 75/25 followed by a full size bottom container. This page doesn’t have any responsiveness built in.

Making your page responsive
responsiveExample

The example shows that in the middle row (‘mainBody’) at full page width you will have the same two containers, one at 75% and one at 25%. As the page shrinks, the two containers will collapse and will become stacked on small screens (such as the iPhone).
 


If you plan on displaying and hiding content based on different screen sizes, then there will need to be extra CSS added to your stylesheets to change the displays of the items. It takes some time, but the reward is an intranet that is now responsive to the device they are using.

Thanks for reading!

Need help with SharePoint? Feel free to contact me.

Have a bigger project? Check out my company, UDig, LLC.