SP Blueprint

In my previous post, Minifying SharePoint 2013, I talked about the idea of minifying SharePoint’s CSS files in order to achieve better performance and better style cascading in CSS. Truly, this was the direct result of my work on a starter master page template I had been working on for SharePoint 2013, which is now available on CodePlex.

SP Blueprint is a responsive starter master page template for SharePoint 2013. Simply deploy the SP Blueprint design package and you will have a mobile-first responsive design that adapts to desktops, tablets, smart phones, televisions, and more. It isn’t a silver bullet for your mobile-friendly SharePoint site, but it can certainly help you optimize your content for today’s diverse and sometimes overwhelming plethora of screen sizes and characteristics. This is what it looks like in a few common viewport sizes:

SP Blueprint (desktop size):
sp-blueprint-desktop

SP Blueprint (smart phone portrait size):
sp-blueprint-smartphone

As you can see, the template is designed to adapt to the screen size automatically.  Using this in conjunction with SharePoint publishing features like page layouts and web parts can really open the door for creating great SharePoint mobile experiences.

Pattern Library Widgets

The template also includes design pattern widgets for more complex interface customization like tabs and slideshows. Simply drop a “tabify” web part into any web part zone, and it will transform that zone into tabs:

spblueprint-tabs

The tabs are responsive as well. If the viewport is too small for horizontal orientation, the tabs will automatically collapse into an accordion:

spblueprint-tabs-accordion

The template also includes a script, styles, and instructions to configure a slideshow web part using a picture library to store slide data. The basic slideshow looks like this:

spblueprint-slideshow

The text on top of the slide image is list data stored along side the picture, so it’s easily maintained. The slideshow, too, is responsive. The images are completely flexible and will stretch or shrink to fit any width.  The slideshow includes options for different transition effects (pan and fade), or customizing the timing on the transitions.

Get SP Blueprint

While the template is fairly bland, it provides a great starting point for building your responsive design in SharePoint 2013. Download the SP Blueprint design package and deploy it to your SharePoint 2013 environment in just a few minutes. To follow, contribute to, or download SP Blueprint, visit the project page on CodePlex.

 

11 comments

  1. Peng says:

    Great stuff on Sharepoint 2013! Thanks for sharing this.

  2. Thanks Kyle for this starter masterpage. I’ve made a VS solution for it (for those who loves deploying stuff :D)

    Cheers!

  3. […] First of all, thanks to Kyle Schaeffer’s awesome responsive starter SP2013 masterpage project, see here: http://kyleschaeffer.com/sharepoint/sp-blueprint/ […]

  4. […] First of all, thanks to Kyle Schaeffer’s awesome responsive starter SP2013 masterpage project, see here: http://kyleschaeffer.com/sharepoint/sp-blueprint/ […]

  5. Larry Milask says:

    I just deployed a SP Blueprint site on Office 365 SharePoint 2103. I was busy applying my branding updates and did not try to edit a page (publishing site). When I decided to edit a page, I discovered that the editing ribbon does not display. No page edit controls.

    Any ideas about this?

    Thanks much,

    • Kyle says:

      Hi, Larry. I haven’t actually updated SP Blueprint in quite a long time. I’ve been using a very minimal 2013/Office 365 starter master page that our team created called SPBones. Check it out here:
      https://github.com/oldrivercreative/SPBones

      • Larry says:

        Thanks for the heads up on the SPBones. I have branded sites with it for both Office 365 and OP. Like it a lot and so far behaves very well. Some observations:
        1. Global navigation works fine for Office 365 deploy. For OP deploy the Home page link is placed on a separate line (above) from other links (still can’t locate why)?
        2. The default scaling for a mobile phone seems too small. Is perfect with SP Blue.
        3. Needed to turn on horizontal scrolling for mobile phones. Touch zooming worked, but you could not scroll horizontal with default settings. Visually impaired people need this.

        Thanks again for your great service to the SP community.

        Larry

      • Larry Milask says:

        Is it possible to get your Tabs function working with the SPBones deployment and how. Copied over the jQuery code, wp, but not working.

    • Larry Milask says:

      Is it possible to get your Tabs function working with the SPBones deployment and how.

      Thanks much;

      Larry

Post a comment

Your email address will not be published. Required fields are marked *