Welcome to the fourth post in my series about the Design Manager in SharePoint 2013. Please read the previous posts before you read on.

Design Manager in SharePoint 2013 – Part I
Design Manager in SharePoint 2013 – Part II
Design Manager in SharePoint 2013 – Part III

If you followed the previous post you probably have a branding up and running in your developer machine or maybe in SharePoint online.

Snippets

So what is snippets? It’s a special markup that lets you add .net and SharePoint controls directly in your HTML page. You can add web parts, user controls or just any kind of .net control in your layout. It gives a way to separate code from the design. Ok, let’s take a closer look at the snippets. Go to the preview page and click at the Snippets link in top of the page. Let’s take a look at one of the snippets around, the snippet for the global navigation:

1

This snippet generates 3902 characters and if you just take this as it is you will have to work with a heavy cluttered HTML page not least in the fact that you’ll need a number of snippets onto the page. Well, let’s do something about it and clean it up to readable code. Take not that you don’t have to clean this up because SharePoint strips out the comment tags and all unnecessary stuff in this snippet, but if you working in the HTML document with your favorite text editor, the code over all with be easier and more semantic if you clean the snippets.

2

The corresponding master page that’s in sync with the HTML page will contain this:

3

So what can be cleaned up and what’s about all this SPM, MS and ME comments?
SPM = SharePoint namespace registration, you don’t have to use this close to the snippets and not more than one on the page. It’s enough to have the registration in the top of the page
MS = Markup Start, where a control or a place holder starts
ME = Markup End, where a control or a place holder ends

If you need to add web parts or user controls onto the HTML page, just wrap them the same way as described above, and don’t forget to add the register name space.
I have created a text file containing a pure SharePoint generated snippet for the global navigation and a cleaned version, so it’s just to compare. Download this file here
There’s are more comments you can use, read more about it this at MSDN

That’s all in this series!
/ Christian

Advertisements