Branding SharePoint from Prototype to Deployment - Workshop

1. SharePoint Advocate and
Enthusiast
PixelMill
ERIC OVERFIELD | @ericoverfield
BRANDING
SHAREPOINT
FROM PROTOTYPE
TO DEPLOYMENT
http://pxml.ly/EO-SP-Branding-Workshop

2. Founder and SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate, Author
SharePoint Community Organizer
Located in Davis, CA
Co-author: “Black Magic Solutions for White Hat SharePoint”
(August, 2013)
Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
ericoverfield.com @ericoverfield
INTRODUCTION ERIC OVERFIELD

3. WHAT YOU WILL LEARN TODAY
1 GENERALLY SUPPORTED BRANDING PATHWAYS
2 CURRENT BRANDING METHODOLOGIES
3 MASTER PAGES / PAGE LAYOUTS / DESIGN MANAGER
ericoverfield.com @ericoverfield
4 CONTENT SEARCH / ROLLUP BRANDING
5 CHOOSING THE RIGHT STRATEGY

4. WHY BRAND
SHAREPOINT

5. THE BENEFITS OF BRANDING
 Improve SharePoint User eXperience (UX)
 Enhance user adoption
 Further your organization’s brand
 Provide a cohesive strategy
 In order words, make SharePoint not look like SharePoint
ericoverfield.com @ericoverfield

6. SHAREPOINT
BRANDING TOOLS
ONLINE/2013/2016

7. GENERALLY RECOMMENDED BRANDING SOLUTIONS
 Logo replacement
 Composed Looks
 Replaces SharePoint 2010 themes
 Office 365 Themes
 Tenant wide very basic theming
 Custom CSS – Alternative CSS
 Available in publishing
 CSS and JavaScript inject with PnP PowerShell
 Does not require a custom Master Page
ericoverfield.com @ericoverfield

8. ADVANCED BRANDING SOLUTIONS
 Custom Master Pages and Page Layouts
 Responsive Grids with enhanced Custom CSS / JavaScript
 Display Templates
 Device Channels
 My opinion: Replaced by Responsive Design
ericoverfield.com @ericoverfield

9. THE BASICS:
COMPOSED LOOKS &
OFFICE 365 THEMES

10. COMPOSED LOOKS / OFFICE 365 THEMES
 Start your branding here - Set the color palette
 Composed Looks - create your own
 SharePoint Color Palette Tool - http://pxml.ly/2BNgqwa
 Only inherited when publishing enabled
 Office 365 Themes
 Admin -> Company Profile -> Custom Theming
 Set a basic logo, basic colors – May take a few hours to propagate
 Tenant wide, but may be overridden by end users
ericoverfield.com @ericoverfield

11. DEMO
COMPOSED LOOKS &
OFFICE 365 THEMES

12. CUSTOM CSS /
JAVASCRIPT

13. CUSTOM CSS AND JAVASCRIPT
 Alternative CSS
 Available when Publishing enabled
 Script Editor Webpart
 Specific to one page at a time
 PnP PowerShell (or Add-in) allowing for CSS and JS injection
 Add JavaScript and CSS without a custom Master Page
 Uses JavaScript Embed pattern - http://pxml.ly/yYPt6yK
 Available in SharePoint 2016/Online – SharePoint 2013 w/May 2015* CU installed
ericoverfield.com @ericoverfield

14. BUT FIRST:
A MODERN
DEVELOPMENT
ENVIRONMENT

15. MODERN DEVELOPMENT ENVIRONMENT
 Sass / SassScript
 Syntactically Awesome Stylesheets
 Scripting language that provides a programming like language for CSS
 “Replacement” for CSS though final product is CSS
 NodeJS / Bower / Grunt / Gulp
 Compiling, Package Manager and Task Processing
 CSS/HTML Grids – Bootstrap, Susy and others
 Yeoman or other webapp scaffolding for quick development
ericoverfield.com @ericoverfield

17. INTRODUCING SASS
 Syntactically Awesome Stylesheets
 Scripting language that provides a programming like language for CSS
 Considered a CSS preprocessor
 http://sass-lang.com
 Requires a compiler / Ruby
 Allows for Nesting / Variables / Mixins / Imports / Extend
 The way to go – Please no longer code raw CSS!
ericoverfield.com @ericoverfield

18. SASS VARIABLES AND NESTING
ericoverfield.com @ericoverfield
//declare variables
$color-text: #444444;
$color-primary: #009899; //turquoise
//start styles
#s4-workspace {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: $color-text;
A {
text-decoration: none;
color: $color-primary;
}
}
SassScript
#s4-workspace {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #444444;
#s4-workspace A {
text-decoration: none;
color: #009899;
}
CSS

19. SASS @IMPORT
ericoverfield.com @ericoverfield
@import “variables” //where “_variables.scss” exists
//start styles
#s4-workspace {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: $color-text;
A {
text-decoration: none;
color: $color-primary;
}
}
SassScript
#s4-workspace {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #444444;
#s4-workspace A {
text-decoration: none;
color: #009899;
}
CSS

20. SASS MIXINS
ericoverfield.com @ericoverfield
@mixin border-box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
@include border-box();
}
SassScript
.container {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
CSS

21. SASS MIXINS WITH PARAMETERS
ericoverfield.com @ericoverfield
@mixin box-sizing($type) {
@if $type == “border" {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} else {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
}
.container {
@include box-sizing(“content”);
}
SassScript
.container {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
CSS

22. SASS EXTEND
ericoverfield.com @ericoverfield
$color-alert: #ff0000;
.alert {
color: $color-alert;
font-weight: bold;
}
.container {
SPAN {
color: black;
&.message {
@extent .alert;
}
}
}
SassScript
.alert {
color: #ff0000;
font-weight: bold;
}
.container SPAN {
color: black;
}
.container SPAN.message {
color: #ff0000;
font-weight: bold;
}
CSS

23. SASS LOOPS - @for - @while - @each
ericoverfield.com @ericoverfield
$column-count: 4;
@for $i from 1 through $column-count {
.col-span-#{$i} {
width: percentage($i / 4);
}
}
SassScript
.col-span-1 {
width: 25%;
}
.col-span-2 {
width: 50%;
}
.col-span-3 {
width: 75%;
}
.col-span-4 {
width: 100%;
}
CSS

24. SASS RECAP
 SassScript is very powerful
 We only scratched surface
 Other preprocessed include Less and Stylus
 Sass most widely adopted
 Open source and originally coded in Ruby
 Compilers include CodeKit, Ghostlab, Koala, Scout and others
 Or NodeJS!
ericoverfield.com @ericoverfield

25. NodeJS / Grunt / Gulp
Bower / Ruby

26. NODEJS AND MORE
ericoverfield.com @ericoverfield
 Network Application Framework
 Based on Chrome JavaScript engine
 Event-driven, non-blocking I/O model
 Lightweight and efficient, great at I/O
 Free and works on very inexpensive hardware
 Great at running tasks and creating a development environment

27. NODEJS AND MORE
 Use NodeJS Packages to build a development environment
 Bower – Package manager for projects
 Grunt / Gulp – Task Manager
 JSLint – JavaScript Code Quality Tool
 Sass Compiler – Need Ruby *we will get to that
 Uglify – Combine and Minify JavaScript Source
 BrowserSync - Host a local web server… What???
ericoverfield.com @ericoverfield

28. INSTALL NODE.JS
 Install Node.js
 Download Node.js from http://nodejs.org
 *Have installer add node and npm to path
 Install Ruby – RubyInstaller and Sass
 http://rubyinstaller.org/
 gem install sass
 Install Git
 https://git-scm.com/
ericoverfield.com @ericoverfield

29. Tools: GRUNT/GULP, BOWER
 Bower
 npm install –g bower
 Grunt
 npm install –g grunt-cli
 Or Gulp
 npm install –g gulp-cli
 Yeoman – Web Scaffolding
 npm install -g yo
ericoverfield.com @ericoverfield

30. YEOMAN OR OTHER PROJECTS
 Tools like Yeoman make building a prototype dev environment easier
 http://yeoman.io/
 1000+ Yeoman templates exists - http://yeoman.io/generators/
 npm install -g generator-webapp //install the generic webapp generator
 yo webapp //will create a new Yeoman project using the webapp template
 npm install //will install necessary node js packages
 bower install //will install this particular bower package requirements
 Or use git to clone this workshop’s demo code
 git clone https://github.com/eoverfield/SP-Branding-Workshop.git workspace
ericoverfield.com @ericoverfield

31. GRIDS:
SUSY, BOOTSTRAP
AND OTHERS

32. INTRODUCTION TO SUSY
 Susy - http://susy.oddbird.net/
 Your layout – our math
 Susy allows use to create our own grids
 Separates presentational CSS from HTML
 No need to use column widths in HTML
 Inject grid CSS directly into existing HTML
 Easy to download and hookup using Sass
 http://susydocs.oddbird.net/en/latest/install/
ericoverfield.com @ericoverfield

33. ericoverfield.com @ericoverfield
SUSY GRID

34. SUSY BASIC STRUCTURE
ericoverfield.com @ericoverfield
@import "src/susy-master/sass/susy";
#contentRow { @include container(80em); }
#sideNavBox {
@include span(12 of 12);
@include susy-breakpoint(768px, $susy) {
@include span(3 of 12 border-box);
}
}
#contentBox {
@include span(12 of 12);
@include susy-breakpoint(768px, $susy) {
@include span(9 of 12 border-box last);
}
}
#contentRow {
max-width: 80em;
margin-left: auto;
margin-right: auto; }
#contentRow:after {
content: " ";
display: block;
clear: both; }
#sideNavBox {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0; }
@media (min-width: 768px) {
#sideNavBox {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
}
…

35. INTRODUCTION TO BOOTSTRAP
 Most widely used front end web framework
 Includes a grid but also navigation, forms, buttons, etc
 Grid is based on strict rows / columns structure
 Default is 12 column grid, but is customizable, once
 Extras don’t always play nice with SP
 Recommend Sass source and include only what you need
ericoverfield.com @ericoverfield

36. ericoverfield.com @ericoverfield
BOOTSTRAP GRID
Rows
Column padding: 0.9375rem = ~15px
Nesting

37. BOOTSTRAP GRID BASIC STRUCTURE
ericoverfield.com @ericoverfield
<header>
<div class="container-fluid">
<div class="row">
<div class=“col-xs-2 col-sm-8 col-lg-6">
<div id="logo">
<a href="/index.html" ><img src="/images/logo.gif" alt="" /></a>
</div>
</div>
<div class=“col-xs-10 col-sm-4 col-lg-6">
<div class="searchbox">
<input id="header-search" name="header-search" type="text" value="" />
<a href="javascript: {}"><img src="/images/icon-search.png" alt="Search" /></a>
</div>
</div>
</div>
</div>
</header>

38. SUSY VS BOOTSTRAP
 Susy – you provide the HTML, Susy provides the CSS
 Does not have concept of rows, nor nested rows
 Responsive columns do not exist OOTB, must create
 But column structure can change on the fly on a given page
 Bootstrap – stick with their HTML Grid and structure, CSS included
 Bootstrap is “heavy” as it contains many extras
 But it could also be stripped to just what you need
 Many different frameworks of each type exist
 Bootstrap recommended if you are creating your own Master Page
 Susy great if you want a grid without a custom Master Page
ericoverfield.com @ericoverfield

39. DEMO
BRANDING
DEVELOPMENT
ENVIRONMENT
IN ACTION

40. BACK TO BRANDING
WITH ONLY CSS
(AND MAYBE JS)

41. CUSTOM CSS AND JAVASCRIPT
 Alternative CSS
 Script Editor Webpart
 PnP PowerShell allowing for CSS and JS injection
 Responsive UI Package for SharePoint - http://pxml.ly/2MS66gJ
 Also use CSOM/REST API’s as well as Add-in model
ericoverfield.com @ericoverfield

42. DEMO
BRANDING
SHAREPOINT WITH
CSS / JAVASCRIPT

43. ADVANCED
SHAREPOINT BRANDING
MASTER PAGES &
PAGE LAYOUTS

44. TRADITIONAL SHAREPOINT MASTER PAGES
 Provides main HTML wrapper used by all pages
 Defines HTML <html />, <head /> and <body /> tags
 Loads resources such as JS and CSS files
 Defines page flow and shared page components
 Header, footer, logo, navigation, suite bar / ribbon, etc.
 Uses ContentPlaceHolders for replaceable areas
 Two types of Master Pages – System (Default) and Site (Custom)
ericoverfield.com @ericoverfield

45. MASTER PAGE COMPONENTS
ericoverfield.com @ericoverfield
Suite Bar
Ribbon
Header
Current Nav
Page Wrapper

46. TRADITIONAL SHAREPOINT MASTER PAGES BEST PRACTICES
 Start with seattle.master, oslo.master or a starter Master Page
 Always include all ContentPlaceHolders found in seattle.master
 Use hidden <div /> to hide unneeded ContentPlaceHolders
 Keep the suite bar / ribbon at the top of the page
 Replace <PublishingRibbon:PublishingRibbon /> if more control needed
 Include your custom layout HTML within #s4-workspace
 Must use <SharePoint:AjaxDelta /> blocks to allow for MDS
 Must register tag prefixes to access SharePoint and .Net controls
ericoverfield.com @ericoverfield

47. DEMO
TRADITIONAL
MASTER PAGES

48. TRADITIONAL SHAREPOINT PAGE LAYOUTS
 Specific to Publishing sites
 Defines content layout for a given page
 Contains “Content” blocks that link to Master Page
 Does not contain <html />, <head />, <body /> and other common tags
 Associated with a Content Type
 May surface Content Type columns
ericoverfield.com @ericoverfield

49. PAGE LAYOUT COMPONENTS
ericoverfield.com @ericoverfield
Site Columns
Snippets
Content Place Holder

50. TRADITIONAL SHAREPOINT PAGE LAYOUTS BEST PRACTICES
 Start with an existing page layout
 Stick with same content type if possible
 Always keep custom code within <asp:Content /> blocks
 Consider different content viewing and authoring experiences
 Use <Publishing:EditModePanel /> controls
 Bake in specific rollup webparts, or default webparts in webpart zones
 Must register tag prefixes to access SharePoint and .Net controls
ericoverfield.com @ericoverfield

51. DEMO
TRADITIONAL
PAGE LAYOUTS

52. THE NEW SHAREPOINT
BRANDING TOOL
DESIGN MANAGER

53. DESIGN MANAGER OVERVIEW
 New to SharePoint 2013
 Available in SharePoint Online/2013/2016
 Requires Publishing Infrastructure
 Import a HTML prototype directly into SharePoint
 SharePoint handles conversion
 Interface for custom Master Pages and Page Layouts
 Also includes Display Templates and Device Channels
 No longer limited by SharePoint Designer
ericoverfield.com @ericoverfield

54. HTML MASTER PAGES
 Convert a HTML prototype directly into SharePoint
 Some assembly required – Snippets and Snippet Manager
ericoverfield.com @ericoverfield

55. HTML PAGE LAYOUTS
 Must derive from a Master Page
 Many out of the box layouts
 Also uses Snippets and Snippet Manager
 Only edit what is in “Content” blocks
ericoverfield.com @ericoverfield

56. DEMO
MASTER PAGES
PAGES LAYOUTS
& DESIGN MANAGER

57. CUSTOM
SEARCH RESULTS
DISPLAY TEMPLATES

58. DISLPAY TEMPLATES
 The center of displaying SharePoint Online/2013/2016 Search
 Replaces XSLT with HTML and JavaScript!
 Control Templates
 Item Templates
ericoverfield.com @ericoverfield

59. ericoverfield.com @ericoverfield

60. ericoverfield.com @ericoverfield

61. DEMO
DISPLAY
TEMPLATES

62. DEVICE CHANNELS
 New to SharePoint 2013 and available on SharePoint Online
 Interfaces tailored and mapped to specific device(s)
 Custom Master Pages per Channel
 Custom DeviceChannelPanels
 *Replaced by Responsive Web Design
ericoverfield.com @ericoverfield

63. DEVICE CHANNELS AN EXAMPLE
ericoverfield.com @ericoverfield

64. CHOOSE THE
RIGHT STRATEGY

65. WHAT IS BEST FOR YOU
 Build a solid foundation first
 Line up project sponsors
 Get the content, structure and purpose right before branding
 Secure resources, talent and budget
 This will help set level of effort
 Sitemaps, Information Architecture
ericoverfield.com @ericoverfield

66. WHAT IS BEST FOR YOU
 Start with a Composed Look and/or Office 365 theme
 Remember with Publishing, inherit Composed Look from parent
 Can use PowerShell, Add-in or CSOM to set a specific web to inherit
 Design requirements / budget / resources will determine next step
 Limit design to what may be done using CSS / JS alone if possible
 Yet be aware SPO may still change – CSS / JS only branding may still break
 On SPO? Use development tenant set to First Release
 http://pxml.ly/3YUghXx
ericoverfield.com @ericoverfield

67. SHAREPOINT AND CSS TRICKS
 Learn the SharePoint DOM
 Ribbon, #s4-workspace, navigation, webparts and webpart chrome
 ID’s and classes matter
 Try to be as light on CSS selectors as possible
 i.e. #myNavigation A.menu-item, #myNavigation SPAN.menu-item {}
 List Views are tables
 May be very difficult to make responsive / mobile friendly
 Webparts may contain data / content that is too wide for branding
 overflow: auto;
ericoverfield.com @ericoverfield

68. A QUICK REVIEW
ericoverfield.com @ericoverfield
1 GENERALLY SUPPORTED BRANDING PATHWAYS
2 CURRENT BRANDING METHODOLOGIES
3 MASTER PAGES / PAGE LAYOUTS / DESIGN MANAGER
4 CONTENT SEARCH / ROLLUP BRANDING
5 CHOOSING THE RIGHT STRATEGY

69. A LOOK TO
THE FUTURE?

70. WHAT IS STORE FOR BRANDING SHAREPOINT
 New UI for Document Libraries in SharePoint Online
 Originally released to First Release only
 Looks very similar to OneDrive for Business interface
 Completely removes custom branding besides Office 365 theme
 Future of SharePoint virtual event – May 4th, 2016
 http://pxml.ly/4Qwhw96
 Live keynote from SF by Microsoft’s Jeff Teper, CVP OneDrive and SharePoint
 Afterwards, watch on-demand sessions detailing upcoming innovations
ericoverfield.com @ericoverfield

71. DEMO
THE FUTURE OF
SHAREPOINT UI
BRANDING?

72. RESOURCES
ericoverfield.com @ericoverfield
The Future of SharePoint – May 4th 2016
http://pxml.ly/4Qwhw96
Starter on learning SharePoint Branding
http://pxml.ly/1CHNXKc
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
Theming and Composed Looks Demo from SPC 2014
http://pxml.ly/2BTVW42
SP Blueprint for SharePoint 2013
http://pxml.ly/1ql6Dqa
SharePoint 2013 Starter Master Pages
http://pxml.ly/1uFeG8Z
SharePoint 2013 Design Manager branding and design capabilities
http://pxml.ly/1vBC3PD
Master pages, the Master Page Gallery, and page layouts in SharePoint 2013
http://pxml.ly/1rBdcLJ
Responsive UI Package for SharePoint
http://pxml.ly/2MS66gJ

73. RESOURCES
ericoverfield.com @ericoverfield
SharePoint Color Palette Tool
http://pxml.ly/2BNgqwa
Sass Language
http://sass-lang.com
SharePoint JavaScript Embed Pattern
http://pxml.ly/yYPt6yK
NodeJS
http://nodejs.org
Bootstrap
http://getbootstrap.com
Susy
http://susy.oddbird.net/
Ruby for Windows
http://rubyinstaller.org/
Yeoman
http://yeoman.io
SharePoint Online First Release
http://pxml.ly/3YUghXx

74. BRANDING SHAREPOING FROM
PROTOTYPE TO DEPLOYMENT
THANK YOU
QUESTIONS?
@ericoverfield http://pxml.ly/EO-SP-Branding-Workshop
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)