Move past bootstrap and build our lightweight responsive framework w.v1.2

ERIC OVERFIELD | PixelMill
Microsoft MVP
SharePoint Advocate & Enthusiast
@ericoverfield
IT’S TIME TO MOVE PAST
BOOTSTRAP AND BUILD OUR
LIGHTWEIGHT RESPONSIVE
FRAMEWORK
http://pxml.ly/EO-Responsive-Framework
https://github.com/eoverfield/SP-Responsive-Framework

@ericoverfieldericoverfield.com
ERIC OVERFIELD
President & Co-Founder of PixelMill
Microsoft MVP, Office Servers & Services
Published SharePoint Author
SharePoint Community Organizer & Contributor
@ericoverfield
ericoverfield.com

PixelMill is a modern SharePoint Design Agency based in Northern California.
On the forefront of web design trends since 1998, PixelMill provides innovative
collaboration portals to enhance the user adoption of SharePoint intranets,
extranets, and public facing sites.
PIXELMILL
@pixelmillteam
pixelmill.com

1. Existing SharePoint Branding Options
2. Modern Branding Toolchain
3. Repeatable Deployment and Maintenance Practices
4. Grids, Design, Frameworks, and More
OVERVIEW

SAFE SHAREPOINT BRANDING
OPTIONS

OPTIONS FOR BRANDING
SHAREPOINT
CLOUD / SPOON-PREM 2013 / 2016
• Alternative CSS
• Custom Actions
(JavaScript Injection)
• Master Pages &
Page Layouts
• Office 365 Themes
• Very limited options to
customize
Modern UI
BRANDING OPTIONS
Composed Looks
& Themes

SharePoint 2013/2016/Online Responsive UI – Included with SharePoint PnP
https://dev.office.com/patterns-and-practices-detail/7267
SHAREPOINT RESPONSIVE UI
• Open source
• Easy to install & customize
• Provides a non-custom master
responsive strategy for classic
sites
Pros
• Only works for classic team sites
• No toolchain to build from;
simple JS / CSS / PnP Scripts
• Not production-ready
Cons
An open source
project to make
a SharePoint
site Responsive

SHAREPOINT RESPONSIVE UI
Demo

THE “RESPONSIVE ONLY” LIMITATIONS
A “Responsive” site isn’t enough
• A mobile friendly grid only provides basic layout
• A custom master page is not a good long term option
• May break with updates
• Is being replaced by the SharePoint Framework or something similar
• Need a better way to code solutions
• Multiple CSS / JS files are difficult to manage
• JavaScript may not be the best scripting language
• A repeatable toolchain will assist with development
• SharePoint Designer / Full Trust solutions are not future / cloud friendly
• A better deployment process is necessary

BUILDING A CUSTOM
RESPONSIVE FRAMEWORK :
START WITH THE TOOLCHAIN

A SPFX-READY DEVELOPMENT TOOLCHAIN
Modern
Toolchain

USE THE MODERN TOOLCHAIN
FOR COMMON PROCESSES
Demo

PROVISIONING AND MAINTAINING

Deployment Methods Pros Cons
SharePoint Designer
By hand
 Simple  Not re-deployable (difficult
repeat)
Feature Framework
Full trust/ Sandbox, VS based SP
solutions (wsp’s)
 Repeatable
 Deployable to farm;
on-prem
 Automation available; event
receivers / feature stapling
 Not cloud-friendly
 Primary benefit is on-
only
 Heavy-handed updates
Add-in Model  Cloud- friendly
 Isolation
 Clunky update method
Patterns & Practices
Application & PowerShell based
 Microsoft-preferred method
 Cloud-ready
 No Visual Studio or coding
 Repeatable; simple updates
 Incomplete automation
DEPLOYMENT AND MAINTENANCE
OPTIONS

SharePoint PnP – An open source initiative
• Originally created by Microsoft and a few others in 2013
• Thanks core team - http://aka.ms/OfficeDevPnP
• Not related to Microsoft’s general Patterns and Practices initiative
• SharePoint PnP – For SharePoint 2013/2016/O365 - consist of:
• Code, samples, best practices
• Videos, tutorials and a toolset for customizing and working with SharePoint
• All available on github - https://github.com/SharePoint/PnP
SHAREPOINT / OFFICE 365 DEVELOPMENT PATTERNS AND PRACTICES

• Create a provisioning template – Manually or based on “template” site
• XML based file based on a schema - https://github.com/SharePoint/PnP-Provisioning-Schema
• Can export from existing site: /> Get-PnPProvisioningTemplate -Out template.xml
• https://github.com/SharePoint/PnP-PowerShell/blob/master/Documentation/GetPnPProvisioningTemplate.md
• Connect to SharePoint Site: Connect-PnPOnline
• Apply provisioning template
• Available options and handlers to customize experience without having to rewrite template
• Apply-PnPProvisioningTemplate -Path template.xml -Handlers Lists, Files
• https://github.com/SharePoint/PnP-PowerShell/blob/master/Documentation/ApplyPnPProvisioningTemplate.md
• Create a PowerShell script to standardize for your use cases
PROVISIONING SHAREPOINT WITH PNP POWERSHELL

Demo
PROVISIONING BRANDING USING
PNP POWERSHELL

GRIDS, FRAMEWORKS,
AND MORE

RESPONSIVE GRIDS:
LEAVE THE EXTRA BEHIND

Most frameworks include a responsive grid
• Responsive grids makes mobile friendly layouts easy
• Use frameworks, the extras may help
• Strip a framework down to just what you need
• Utilize Gulp for build, compact and inclusion
RESPONSIVE GRIDS

UTILIZING A RESPONSIVE GRID
Demo

COMBINE EXTERNAL LIBRARIES:
SUPER CHARGE DEVELOPMENT

Use external libraries to improve development
• If a NodeJS Package exists, start there
• Add package using npm: “npm install”
• Add library to project files as needed
• Strip down to what is needed, if possible
ADDING EXTERNAL LIBRARIES

JavaScript Embed
Inject custom JavaScript without a custom master page
 Adds reference to custom JavaScript w/o a custom master page
 Use to provide client-side rendering, utilize CSOM, REST API’s
React, Angular, Handlebars & more
 Add as a custom action
Pros
 Provides the ability for client side rendering (i.e. DOM manipulation)
 Combine w/ Alternative CSS to provide advanced layout changes w/o custom Master Page
 Reasonable installation methods w/ PnP / Add-ins
Cons
 Does require JavaScript pros
 No Modern UI support
 Custom DOM manipulation may break w/ SharePoint updates
JAVASCRIPT EMBED

INCLUDING AN EXTERNAL LIBRARY
OFFICE UI FABRIC JS
Demo

A CUSTOM SHAREPOINT INTERFACE
WITHOUT A CUSTOM MASTER PAGE

Leave Custom Master Pages Behind
• Custom Master Pages are still an option but their time is limited
• Look at client side rendering
• Custom Page Layouts still an option
• They will also be replaced but have less update issues
• Use supported methods such as Alternative CSS and JavaScript Embed
• Once JS injected, use JS to update DOM
• CSS to style
• Popular DOM manipulation tools
• Handlebars - http://handlebarsjs.com
• React - https://github.com/reactjs
• AngularJS - https://angularjs.org/
THE CUSTOM MASTERPAGE
DILEMMA

ABANDONING CUSTOM
MASTER PAGES
Demo

REVIEW
1. Existing SharePoint Branding Options
2. Modern Branding Toolchain
3. Repeatable Deployment and Maintenance Practices
4. Grids, Design, Frameworks, and More

RESOURCES

RESOURCE
S
• Customizing "modern" team sites
https://msdn.microsoft.com/en-us/pnp_articles/modern-experience-customizations-customize-sites
• SharePoint 2013/2016/Online Responsive UI
https://dev.office.com/patterns-and-practices-detail/7267
• Office UI Fabric
https://dev.office.com/fabric
• Customize your SharePoint site UI by using JavaScript
https://msdn.microsoft.com/en-us/pnp_articles/customize-your-sharepoint-site-ui-by-using-javascript
• Embedding JavaScript into SharePoint
https://msdn.microsoft.com/en-us/pnp_articles/embedding-javascript-into-sharepoint
• Set up a modern development environment
https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment
• Gulp Babel
https://www.npmjs.com/package/gulp-babel
• Sass Language
https://sass-lang.com/

RESOURCE
S

THANK YOU
IT’S TIME TO MOVE PAST
BOOTSTRAP AND BUILD OUR
LIGHTWEIGHT RESPONSIVE
FRAMEWORK

Move past bootstrap and build our lightweight responsive framework w.v1.2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Move past bootstrap and build our lightweight responsive framework w.v1.2

Similar to Move past bootstrap and build our lightweight responsive framework w.v1.2 (20)

More from Eric Overfield

More from Eric Overfield (14)

Recently uploaded

Recently uploaded (16)

Move past bootstrap and build our lightweight responsive framework w.v1.2

Editor's Notes