In Part 1 of the Design Manager I took the Design Manager under the loop and talked about each step. At the end you could generate a Design Package. In this post, we’ll take that design package apart and see what’s inside.
If you have Visual Studio 2012 with Update 1 but don’t have the SharePoint 2013 templates yet, download them from MSDN → under Tools → “Download the tools”.
Importing the WSP into Visual Studio 2012
- Open Visual Studio 2012
- Select New project → Templates → Visual C# → Office/SharePoint → SharePoint Solutions → Import Solution Package
- Choose between sandboxed or farm solution (I chose farm for simplicity)
- Select the
.wspfile generated in Part 1 - Leave defaults and click Finish
What’s in the Package?
In the Solution Explorer you can see the WSP structure. There are two sets of list instance folders:
Built-in list instances:
- Master page gallery
- Theme gallery
- Composed Looks gallery (new in SP2013, URL:
_catalogs/design)
Regular list instances:
- Device channels
- Style library
The Composed Looks Gallery
The Composed Looks gallery (at _catalogs/design) is essentially a list that maps a name to a combination of:
- Master page
- Theme
- Background image
- Font schema
- Display sequence/order
This is how SharePoint 2013 packages “looks” — everything needed to apply a consistent visual identity in one place.
The rest of the package is master page files, images, JavaScript files, and their elements files.
SP2010 vs SP2013 Design Philosophy
I found a great SPC 2012 session on “Best Practices for Designing Websites with SP2013” that had two slides worth sharing.
The SP2010 way:
Complex, developer-heavy, required deep SharePoint knowledge to change anything visual.
The SP2013 way:
HTML/CSS-first approach. Design in any editor, upload HTML, let SharePoint convert it. The designer doesn’t need to know about master pages or ASPX syntax.
Microsoft did a lot of work to lower the barrier for design in SharePoint 2013.
A Note for Developers
Here’s something worth paying attention to: people are increasingly surfing the web via mobile devices, and less from desktops. Bandwidth is the new memory.
This means as a SharePoint developer, knowing only C# isn’t sufficient anymore if you want to build great solutions. You don’t need to be a full-blown designer — but understanding HTML, CSS, and responsive design is now part of the job.
Diversify your skills.
That’s it for now — have a nice day!