Networking in the Penumbra presented by Geoff Huston at NZNOG
Move past bootstrap and build our lightweight responsive framework w.v1.2
1. 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
3. @ericoverfieldericoverfield.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
6. @ericoverfieldericoverfield.com
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
7. @ericoverfieldericoverfield.com
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
9. @ericoverfieldericoverfield.com
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
14. @ericoverfieldericoverfield.com
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
15. @ericoverfieldericoverfield.com
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
16. @ericoverfieldericoverfield.com
• 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
20. @ericoverfieldericoverfield.com
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
23. @ericoverfieldericoverfield.com
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
24. @ericoverfieldericoverfield.com
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
27. @ericoverfieldericoverfield.com
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
31. @ericoverfieldericoverfield.com
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/
Slides will be available from blog and twitter
Responsive web design isn’t enough, we need a much more robust strategy. Look at how to pull together different tools for web dev into our own framework for SP branding / design
DEMO HEAVY
https://dev.office.com/patterns-and-practices-detail/7267
For those of you looking at just “Responsive” an intro solution exists
This is the most popular download in PnP
Look at response ui, download, execute install scripts
Look at nodeJS, npm, git, package, gulp, gulp file to process sass and create a local web server for simple style changes.
Typescript for basic JS too if possible.
http://github.com/sharepoint/pnp
http://github.com/sharepoint/pnp-powershell
https://github.com/SharePoint/PnP-Provisioning-Schema
Look at Alt css and JS example
get Bootstrap, combine in gulp / sass
Look at inserting JS header and such using responsive grid tools
Get office UI fabric, link grid and js in our gulp tasks
Use handlebars to inject extra dom elements into design