branding sharepoint from prototype to deployment - workshop
TRANSCRIPT
SharePoint Advocate and EnthusiastPixelMill
ERIC OVERFIELD | @ericoverfield
BRANDINGSHAREPOINTFROM PROTOTYPETO DEPLOYMENT
http://pxml.ly/EO-SP-Branding-Workshop
Founder and SharePoint Branding/UI Lead, PixelMillSpeaker, Teacher, Advocate, AuthorSharePoint Community OrganizerLocated 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 Copyhttp://pxml.ly/zsqykd
ericoverfield.com
@ericoverfield
INTRODUCTION ERIC OVERFIELD
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
WHY BRANDSHAREPOINT
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
SHAREPOINTBRANDING TOOLSONLINE/2013/2016
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
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
THE BASICS:COMPOSED LOOKS &OFFICE 365 THEMES
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
DEMO
COMPOSED LOOKS &OFFICE 365 THEMES
CUSTOM CSS / JAVASCRIPT
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
installedericoverfield.com
@ericoverfield
BUT FIRST:A MODERNDEVELOPMENTENVIRONMENT
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
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
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
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
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
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
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
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
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
NodeJS / Grunt / GulpBower / Ruby
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
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.c
om@ericoverfield
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
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
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
GRIDS: SUSY, BOOTSTRAPAND OTHERS
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
ericoverfield.com
@ericoverfield
SUSY GRID
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%;
}}…
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
ericoverfield.com
@ericoverfield
BOOTSTRAP GRID
Rows
Column padding: 0.9375rem = ~15px
Nesting
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>
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
DEMOBRANDINGDEVELOPMENTENVIRONMENTIN ACTION
BACK TO BRANDINGWITH ONLY CSS(AND MAYBE JS)
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
DEMOBRANDINGSHAREPOINT WITHCSS / JAVASCRIPT
ADVANCEDSHAREPOINT BRANDING MASTER PAGES & PAGE LAYOUTS
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
MASTER PAGE COMPONENTS
ericoverfield.com
@ericoverfield
Suite Bar
RibbonHeader
Current Nav
Page Wrapper
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 controlsericoverfield.c
om@ericoverfield
DEMO
TRADITIONALMASTER PAGES
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
PAGE LAYOUT COMPONENTS
ericoverfield.com
@ericoverfield
Site Columns
Snippets
Content Place Holder
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
controlsericoverfield.com
@ericoverfield
DEMO
TRADITIONALPAGE LAYOUTS
THE NEW SHAREPOINT BRANDING TOOLDESIGN MANAGER
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
HTML MASTER PAGES
Convert a HTML prototype directly into SharePoint Some assembly required – Snippets and Snippet Manager
ericoverfield.com
@ericoverfield
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
DEMO
MASTER PAGESPAGES LAYOUTS& DESIGN MANAGER
CUSTOMSEARCH RESULTSDISPLAY TEMPLATES
DISLPAY TEMPLATES
The center of displaying SharePoint Online/2013/2016
Search
Replaces XSLT with HTML and JavaScript!
Control Templates
Item Templates
ericoverfield.com
@ericoverfield
ericoverfield.com
@ericoverfield
ericoverfield.com
@ericoverfield
DEMO
DISPLAYTEMPLATES
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
DEVICE CHANNELS AN EXAMPLE
ericoverfield.com
@ericoverfield
CHOOSE THERIGHT STRATEGY
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
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/3YUghXxericoverfield.com
@ericoverfield
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
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
A LOOK TOTHE FUTURE?
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
DEMOTHE FUTURE OFSHAREPOINT UIBRANDING?
RESOURCES
ericoverfield.com
@ericoverfield
The Future of SharePoint – May 4th 2016http://pxml.ly/4Qwhw96
Starter on learning SharePoint Brandinghttp://pxml.ly/1CHNXKc
Responsive Frameworks for SharePoint 2010 and 2013http://responsivesharepoint.codeplex.com
Theming and Composed Looks Demo from SPC 2014http://pxml.ly/2BTVW42
SP Blueprint for SharePoint 2013http://pxml.ly/1ql6Dqa
SharePoint 2013 Starter Master Pages
http://pxml.ly/1uFeG8Z
SharePoint 2013 Design Manager branding and design capabilitieshttp://pxml.ly/1vBC3PD
Master pages, the Master Page Gallery, and page layouts in SharePoint 2013http://pxml.ly/1rBdcLJ
Responsive UI Package for SharePointhttp://pxml.ly/2MS66gJ
RESOURCES
ericoverfield.com
@ericoverfield
SharePoint Color Palette Toolhttp://pxml.ly/2BNgqwa
Sass Languagehttp://sass-lang.com
SharePoint JavaScript Embed Patternhttp://pxml.ly/yYPt6yK
NodeJShttp://nodejs.org
Bootstraphttp://getbootstrap.com
Susyhttp://susy.oddbird.net/
Ruby for Windowshttp://rubyinstaller.org/
Yeomanhttp://yeoman.io
SharePoint Online First Releasehttp://pxml.ly/3YUghXx
BRANDING SHAREPOING FROMPROTOTYPE TO DEPLOYMENT
THANK YOUQUESTIONS?
@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)