Table of Contents



Download & Installation

Note that SP Blueprint requires a Microsoft SharePoint Server 2013 site collection, or a SharePoint Online site collection. You must have the Design permission level to create and deploy master pages.

  1. Download the latest release from Downloads
  2. Copy source files located in SharePoint 2013/_catalogs/masterpage/blueprint to your site collection master page gallery located at _catalogs/masterpage/blueprint
  3. Change your site collection's site and system master pages to use the new blueprint.master master page template

MySite Customization

SP Blueprint also includes a starter master page template for SharePoint 2013 MySites called blueprint-mysite.master. This file is only a template, and should ideally be used in conjunction with a feature stapler that is created by a SharePoint developer with knowledge of MySite provisioning and customization. If you do not plan to use or customize your SharePoint 2013 MySite site collections, feel free to omit this file from installation.



Responsive CSS Grid System

SP Blueprint includes a responsive mobile-first 12-column CSS grid system. Using this system, setting up columns and layouts should be fairly simple, and page components will automatically transform to adapt to various viewport sizes. To use this system, you must organize your HTML into rows and columns. Each row should have a total of twelve columns, like the following examples:

<div class="row">
   <div class="col twelve"></div>
</div>

<div class="row">
   <div class="col six"></div>
   <div class="col six"></div>
</div>

<div class="row">
   <div class="col three"></div>
   <div class="col nine"></div>
</div>


Opt-In Padding

The grid system includes "opt-in" padding. Simply add the CSS class padded, padded-left, or padded-right to a column to create spacing between columns.

<div class="row">
   <div class="col four padded"></div>
   <div class="col four padded"></div>
   <div class="col four padded"></div>
</div>

<div class="row">
   <div class="col six padded-right"></div>
   <div class="col six padded-left"></div>
</div>


By default, the main.css file establishes a 1% padding. You may freely change this value to a different percentage, pixel, em, or other CSS unit. Because the grid system uses a special CSS property called box-sizing, the padding won't affect the width of each column.

Synonyms

The grid system also includes synonyms for varying column widths, which should help to make the column language more semantic.

<div class="col wide"></div>
<div class="col three-fourths"></div>
<div class="col two-thirds"></div>
<div class="col half"></div>
<div class="col one-third"></div>
<div class="col one-fourth"></div>



Design Pattern Widgets

SP Blueprint includes a number of design pattern widgets that should make it easier to implement more complex design customizations.

Navigation

This jQuery plugin allows you to enhance the default SharePoint navigation menu for increased accessibility and ease of use on devices with smaller screens. The most basic functionality is already configured and enabled when deploying SP Blueprint, but you can further configure the navigation menu to your preferences.

Configuration
Enhanced navigation is already installed when deploying SP Blueprint, but you can further configure your navigation menus by tweaking the spNav() function in main.js. The configuration options and default values for this function are shown below.

$('.top-nav').spNav({
  style: 'drawer', // navigation style ("drawer" or "off-canvas")
  accordion: false, // add an "expand/collapse" link on all parent menu items
  overlay: false, // should the navigation menu "overlay" page content?
  label: 'Menu', // optional label that appears next to menu icon
  speed: 250, //speed of all navigation menu animations
  canvas: '#s4-workspace', // used with "off-canvas" navigation style
  destroy: false // remove all enhancements from navigation menu
});


Tabs

This jQuery plugin utilizes jQuery UI to transform a SharePoint 2013 web part zone into a tabbed widget control. It also includes responsive accordion behavior at smaller screen sizes.

Installation
Download TabifyWebParts.dwp and deploy it to your web parts gallery (/_catalogs/wp/). This will create a new "Tabify Web Parts" web part in the web part gallery (it will appear in the "Miscellaneous" group by default).

Usage
Add the Tabify Web Parts web part to any web part zone in order to "tabify" it. Web parts must be configured to appear with a web part title.

Configuration
You can further configure your tabs widget by tweaking the wpTabs() function in main.js. The configuration options and default values for this function are shown below.

$('.wp-tabify-this-zone').wpTabs({
  accordion: 768 // when the screen width is at or below 768 pixels, web part tabs will automatically appears as a vertical accordion
});


Slideshow

Use this script to transform a content query web part into an animated image slideshow. This technique requires some knowledge of SharePoint content query web parts and item styles.

Installation
  1. Download Slideshow.webpart and deploy it to your web parts gallery (/_catalogs/wp/). This will create a new "Slideshow" web part in the web part gallery (it will appear in the "Miscellaneous" group by default).
  2. Download Slideshow.xsl and deploy it to the XSL Style Sheets folder located at /Style Library/XSL Style Sheets/.

Usage
  1. Configure a picture library to store slide data. The recommended content type should be structured like so:
    • Parent content type - Picture
    • SlideContent (publishing HTML column)
    • SlideLinkUrl (single line of text column)
    • SlideOrder (number column)
    • SlideActive (yes/no column)
  2. Upload some slides
  3. Add your customized slideshow content query web part to any web part zone (see Installation)
  4. Configure your content query web part to point to the picture library you created in step #1

Configuration
You can further configure your slideshow widget by tweaking the slides() function in main.js. The configuration options and default values for this function are shown below.

$('.slide-item').slides({
  effect: 'pan', // transition effect, "pan" or "fade"
  delay: 8000, // time between slide transitions
  speed: 250, // transition speed
  navigation: false, // show navigation links (1, 2, 3, etc.)
  paging: false // show paging links (previous, next)
});

Last edited Dec 3, 2013 at 7:10 PM by kyleschaeffer, version 26

Comments

aackose Apr 28, 2014 at 6:31 PM 
Just a few additions to the installation part:

To copy the folder, its easier to use SharePoint designer and move the files to the "catalog" and "wp" folders (Click on "All Files" once you open your site collection on the SP Designer and you will be able to browse all the folders including catalog).

Once all files are copied, you will have to edit the properties of the copied .master files and change the Content Type to "ASP Net MasterPage" (from Design File) and then publish a major version of it.

Once done, you will be able to see both the master page files in the dropdown under the Site Masterpage settings page. (Site Settings -> Master Pages [under Look and Feel])