bootstrapa-z-151012193245-lva1-app6891x
Download
Report
Transcript bootstrapa-z-151012193245-lva1-app6891x
The A to Z of Building a
Responsive SharePoint Site
with Bootstrap
BY THOMAS DALY
Topics
What is Bootstrap
SharePoint Considerations
Responsive Design
Tools
Why Bootstrap
Resources
Implementation
Live Examples / Intranet Site
Grids
Real World Examples
Media Queries
UI Components
Expectations
About Me
Senior SharePoint Consultant Extraordinaire
Branding & Developer
Focused on the UI side of things
Community Involvement
Speaker
NJ SharePoint User Group Organizer
SharePoint Saturday NYC Organizer
SharePoint Saturday NJ Organizer
My SharePoint Blog
MSDN forums (eh not so much)
About Bootstrap
... AND RESPONSIVE DESIGN
What is Bootstrap?
The most popular HTML, CSS, and JS framework
Used for developing responsive, mobile first
projects on the web.
Mobile First Strategy
Works and looks great on the mobile device.
As the devices scale in the size the content
scales and experience is enhanced.
What is Bootstrap?
Responsive Web Design
Crafting sites that provide an
optimal viewing and
interaction experience
Easy reading and navigation
Minimal resizing, panning, and
scrolling
Works across a wide range of
devices
Illustration by Stéphanie Walter
Why Choose Bootstrap?
Speed of Development
Responsiveness
Mobile devices continue to grow in popularity year after year.
Use of Bootstrap's grid system and classes make it easier.
Consistency
Ability to fine tune your bootstrap package.
Support
Uniformity, same experience across Internet Explorer, Chrome, and Firefox
Customizable
Use of ready made code blocks and pre-defined styles.
Large user community behind it. Constantly being updated. Lots of documentation
Themes
There are a large number of Themes available and either free or very inexpensive
Similar Responsive Frameworks
Bootstrap is not alone. There are numerous frameworks that are similar. The
key to picking one is to understand your requirements.
Semantic UI
ZURB Foundation
Skeleton
HTML Boilerplate
Almost infinitely more…
Bootstrap Components
Grids – Defining pages in terms of columns and rows
Typography – Headings / body elements
Glyphs – icons that are font based, scalable
Navigation – responsive navigation
Images – responsive images
Helper Classes – clearfix / show / hide / centers
Responsive Utilities – hide / show content via class
Javascript - Carousel, Tooltip, Tab, Modal, Alerts
Grid System
Easy to use grid system for creating rows & columns for your content
https://getbootstrap.com/examples/grid/
Example Grid: Mobile, Tablet, & Desktop
Media Queries
Allows you to craft CSS to scope media
features such as height or width.
Bootstrap has pre-defined breakpoints
mobile, tablet, desktop, & large desktop
Necessary to know in order to achieve
responsive.
Bootstrap & SP2013 / O365
My Personal Disclaimer
Mobile Design works best on sites where you the developer, designer, or
owner have the most control over the content being displayed and how
the users interacts with that content.
SharePoint Lists, Libraries, Web Parts, Page Layouts, Site Templates are
generally not responsive, and therefore can be difficult (sometimes
impossible) to convert.
To obtain 100% perfect mobile experience will take a lot of work. It’s
recommended that your sites have custom master page, css, page
layouts, and web parts.
What to Expect with SharePoint &
Bootstrap
SharePoint is semi-responsive, but some aspects cannot be made
responsive without extensive amounts of time and effort.
When creating new items (page layouts, web parts, display templates)
you’ll be able to put your best foot forward for mobile. As the screen real
estate increases your content will grow and gradually be enhanced.
When working with existing SharePoint components, you’ll be forces to
write media queries to gracefully degrade these items to work on smaller
screen real estate.
Getting Started
Bootstrap v.3.3.5
Bootstrap Content Delivery Network (CDN)
Install steps & Page Examples
http://getbootstrap.com/getting-started
http://getbootstrap.com/getting-started/#examples
Master Page Modifications
HTML5 doctype
Bootstrap makes use of certain HTML elements
and CSS properties that require the use of the
HTML5 doctype. Include it at the beginning of
all your projects.
Meta Tags
To ensure proper rendering and touch
zooming, add the viewport meta tag to your
<head>.
SharePoint Considerations
Devices
Turn off Mobile Browsing
This will make mobile devices use the normal UI
Mobile Browsing View
SharePoint Considerations
Box Model Issues
Bootstrap uses border-box
SharePoint uses content-box
This causes SharePoint
components to look broken in
particular areas
Apply a reset to the broken
pieces
The Box Model Explained
Box Sizing Explained
border-box
content-box
The width and height properties (and
min/max properties) includes content,
padding and border, but not the
margin
The width and height properties (and
min/max properties) includes only the
content. Border, padding, or margin
are not included
https://jsfiddle.net/e9gn3q83/
SharePoint Considerations
Navigation
The most challenging task
You’ll need to change the default HTML markup
http://thomasdaly.net/2015/06/28/bootstrapresponsive-navigation-in-sharepoint/
Navigation will no longer be hover, but touch.
This can disable top tier nodes w/ children
SharePoint Considerations
Sites & Pages
Publishing (the way to go)
Publishing Feature is required
Publishing Sites use page layouts
Custom Page Layouts are the best
way to control how the page
responds
Wrap your Web Part Zones & Content
Areas in columns and rows using the
Bootstrap grid classes
Team Sites
Team Sites are not good because they
use Text Layouts
Text Layouts are pre-defined, not
customizable, and not responsive
Existing Team Sites pages would need
to be re-created using a custom
responsive page layout.
SharePoint Considerations
Web Parts
Try to plan ahead which web parts will be allowed, or define a set of web parts that
you will be primarily using throughout your site.
The best types of web parts are Custom, Data Views or Content By Search
Custom & Data Views – you can create the html markup and styles
Content By Search – you can utilize display templates which allow you to control the html.
(styles can be applied separately)
The worst types of web parts are Out Of The Box (OOTB) & List Views
Out Of The Box (OOTB) web parts you have no control over how they render.
List Views columns can break your design (unless you change to custom display template)
SharePoint Considerations
Site Templates
You can make Search, Wiki,
Community Portal, Blog Sites
responsive but not easily
Be prepared to write media
queries to override default styles
per each type of template
Difficult, Yes. Challenging, Yes.
But Possible
SharePoint Considerations
Lists & Libraries
Not very responsive and would be
very tough to make responsive
Similar issue are web parts, columns
and <tables> are the enemy.
Lists & Libraries are <table> based html
elements and these components are
not that responsive
Difficult, Extreme. Possible, with code?
Advice = Stay Away
Other Stuff
TOOLS, EXAMPLES, REFERENCES
Tools for the Job
Chrome
Emulation Mode
Nice Presets
FireFox
Emulation Mode
OK Presets
Internet Explorer
Other Bootstrap / SharePoint Projects
Bootstrap – online documentation, examples
Responsive SharePoint CodePlex Project (foundations or server only)
Bootstrap (2 & 3)
ZURB Foundation (4)
https://responsivesharepoint.codeplex.com/
ShareBoot – Responsive SharePoint 2013 Theme
http://getbootstrap.com/
http://www.topsharepoint.com/shareboot-responsive-sharepoint-2013-theme
Twitter Bootstrap for SharePoint (2010)
Bootstrap v2.2.1
https://bootstrapsharepoint.codeplex.com/
Alternative PnP Project
SharePoint 2013/2016 Responsive UI
Solution Overview
This solution provides you the capability to enable Responsive UI for a Site Collection in Microsoft SharePoint
2013/2016 on-premises. The solution leverages some JavaScript embedding and CSS overriding, in order to
make responsive the out of the box UI of a classic Team Site (STS#0).
The solution leverages some JavaScript embedding and CSS overriding to convert the out of the box UI of any
SharePoint 2013/2016 Team Site (STS#0) into a Responsive UI. The Responsive UI supports three rendering
models:
Desktop: screen width above 768px
Tablet: screen width between 481px and 768px
SmartPhone: screen width lower than or equal to 480px
https://github.com/OfficeDev/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive
Real World Examples
B&R Business Solutions
O365 Public
http://www.bandrsolutions.com
Center for Retail Compliance
SP2013, On-Prem Public
http://www.retailcompliancecenter.org/
ATIDAN
O365 Public
http://www.atidan.com