+ All Categories
Home > Education > Branding SharePoint from Prototype to Deployment - Workshop

Branding SharePoint from Prototype to Deployment - Workshop

Date post: 16-Apr-2017
Category:
Upload: eric-overfield
View: 593 times
Download: 2 times
Share this document with a friend
74
SharePoint Advocate and Enthusiast PixelMill ERIC OVERFIELD | @ericoverfield BRANDING SHAREPOINT FROM PROTOTYPE TO DEPLOYMENT http://pxml.ly/EO-SP- Branding-Workshop
Transcript
Page 1: Branding SharePoint from Prototype to Deployment - Workshop

SharePoint Advocate and EnthusiastPixelMill

ERIC OVERFIELD | @ericoverfield

BRANDINGSHAREPOINTFROM PROTOTYPETO DEPLOYMENT

http://pxml.ly/EO-SP-Branding-Workshop

Page 2: Branding SharePoint from Prototype to Deployment - 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

Page 3: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 4: Branding SharePoint from Prototype to Deployment - Workshop

WHY BRANDSHAREPOINT

Page 5: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 6: Branding SharePoint from Prototype to Deployment - Workshop

SHAREPOINTBRANDING TOOLSONLINE/2013/2016

Page 7: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 8: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 9: Branding SharePoint from Prototype to Deployment - Workshop

THE BASICS:COMPOSED LOOKS &OFFICE 365 THEMES

Page 10: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 11: Branding SharePoint from Prototype to Deployment - Workshop

DEMO

COMPOSED LOOKS &OFFICE 365 THEMES

Page 12: Branding SharePoint from Prototype to Deployment - Workshop

CUSTOM CSS / JAVASCRIPT

Page 13: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 14: Branding SharePoint from Prototype to Deployment - Workshop

BUT FIRST:A MODERNDEVELOPMENTENVIRONMENT

Page 15: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 16: Branding SharePoint from Prototype to Deployment - Workshop
Page 17: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 18: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 19: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 20: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 21: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 22: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 23: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 24: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 25: Branding SharePoint from Prototype to Deployment - Workshop

NodeJS / Grunt / GulpBower / Ruby

Page 26: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 27: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 28: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 29: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 30: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 31: Branding SharePoint from Prototype to Deployment - Workshop

GRIDS: SUSY, BOOTSTRAPAND OTHERS

Page 32: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 33: Branding SharePoint from Prototype to Deployment - Workshop

ericoverfield.com

@ericoverfield

SUSY GRID

Page 34: Branding SharePoint from Prototype to Deployment - Workshop

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%;

}}…

Page 35: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 36: Branding SharePoint from Prototype to Deployment - Workshop

ericoverfield.com

@ericoverfield

BOOTSTRAP GRID

Rows

Column padding: 0.9375rem = ~15px

Nesting

Page 37: Branding SharePoint from Prototype to Deployment - Workshop

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>

Page 38: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 39: Branding SharePoint from Prototype to Deployment - Workshop

DEMOBRANDINGDEVELOPMENTENVIRONMENTIN ACTION

Page 40: Branding SharePoint from Prototype to Deployment - Workshop

BACK TO BRANDINGWITH ONLY CSS(AND MAYBE JS)

Page 41: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 42: Branding SharePoint from Prototype to Deployment - Workshop

DEMOBRANDINGSHAREPOINT WITHCSS / JAVASCRIPT

Page 43: Branding SharePoint from Prototype to Deployment - Workshop

ADVANCEDSHAREPOINT BRANDING MASTER PAGES & PAGE LAYOUTS

Page 44: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 45: Branding SharePoint from Prototype to Deployment - Workshop

MASTER PAGE COMPONENTS

ericoverfield.com

@ericoverfield

Suite Bar

RibbonHeader

Current Nav

Page Wrapper

Page 46: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 47: Branding SharePoint from Prototype to Deployment - Workshop

DEMO

TRADITIONALMASTER PAGES

Page 48: Branding SharePoint from Prototype to Deployment - Workshop

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 49: Branding SharePoint from Prototype to Deployment - Workshop

PAGE LAYOUT COMPONENTS

ericoverfield.com

@ericoverfield

Site Columns

Snippets

Content Place Holder

Page 50: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 51: Branding SharePoint from Prototype to Deployment - Workshop

DEMO

TRADITIONALPAGE LAYOUTS

Page 52: Branding SharePoint from Prototype to Deployment - Workshop

THE NEW SHAREPOINT BRANDING TOOLDESIGN MANAGER

Page 53: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 54: Branding SharePoint from Prototype to Deployment - Workshop

HTML MASTER PAGES

Convert a HTML prototype directly into SharePoint Some assembly required – Snippets and Snippet Manager

ericoverfield.com

@ericoverfield

Page 55: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 56: Branding SharePoint from Prototype to Deployment - Workshop

DEMO

MASTER PAGESPAGES LAYOUTS& DESIGN MANAGER

Page 57: Branding SharePoint from Prototype to Deployment - Workshop

CUSTOMSEARCH RESULTSDISPLAY TEMPLATES

Page 58: Branding SharePoint from Prototype to Deployment - Workshop

DISLPAY TEMPLATES

The center of displaying SharePoint Online/2013/2016

Search

Replaces XSLT with HTML and JavaScript!

Control Templates

Item Templates

ericoverfield.com

@ericoverfield

Page 59: Branding SharePoint from Prototype to Deployment - Workshop

ericoverfield.com

@ericoverfield

Page 60: Branding SharePoint from Prototype to Deployment - Workshop

ericoverfield.com

@ericoverfield

Page 61: Branding SharePoint from Prototype to Deployment - Workshop

DEMO

DISPLAYTEMPLATES

Page 62: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 63: Branding SharePoint from Prototype to Deployment - Workshop

DEVICE CHANNELS AN EXAMPLE

ericoverfield.com

@ericoverfield

Page 64: Branding SharePoint from Prototype to Deployment - Workshop

CHOOSE THERIGHT STRATEGY

Page 65: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 66: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 67: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 68: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 69: Branding SharePoint from Prototype to Deployment - Workshop

A LOOK TOTHE FUTURE?

Page 70: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 71: Branding SharePoint from Prototype to Deployment - Workshop

DEMOTHE FUTURE OFSHAREPOINT UIBRANDING?

Page 72: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 73: Branding SharePoint from Prototype to Deployment - Workshop

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

Page 74: Branding SharePoint from Prototype to Deployment - Workshop

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)


Recommended