Integrating the Bootstrap responsive mobile framework into SharePoint 2013 or Office 365.

1. The A to Z of Building a
Responsive SharePoint Site
with Bootstrap
BY THOMAS DALY

2. Topics
 What is Bootstrap
 Responsive Design
 Why Bootstrap
 Implementation
 Grids
 Media Queries
 UI Components
 Expectations
 SharePoint Considerations
 Tools
 Resources
 Live Examples / Intranet Site
 Real World Examples

3. 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)

4. About Bootstrap
... AND RESPONSIVE DESIGN

5. 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.

6. What is Bootstrap?

7. 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

8. Illustration by Stéphanie Walter

9. Why Choose Bootstrap?
 Speed of Development
 Use of ready made code blocks and pre-defined styles.
 Responsiveness
 Mobile devices continue to grow in popularity year after year.
 Use of Bootstrap's grid system and classes make it easier.
 Consistency
 Uniformity, same experience across Internet Explorer, Chrome, and Firefox
 Customizable
 Ability to fine tune your bootstrap package.
 Support
 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

10. 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…

11. 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

12. Grid System
 Easy to use grid system for creating rows & columns for your content
https://getbootstrap.com/examples/grid/

13. Example Grid: Mobile, Tablet, & Desktop

14. 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.

15. Bootstrap & SP2013 / O365

16. 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.

17. 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.

18. 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

19. 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>.

20. SharePoint Considerations
Devices
 Turn off Mobile Browsing
 This will make mobile devices use the normal UI
Mobile Browsing View

21. 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

22. Box Sizing Explained
 border-box
 The width and height properties (and
min/max properties) includes content,
padding and border, but not the margin
 content-box
 The width and height properties (and
min/max properties) includes only the
content. Border, padding, or margin are
not included
https://jsfiddle.net/e9gn3q83/

23. SharePoint Considerations
Navigation
 The most challenging task
 You’ll need to change the default HTML markup
 http://thomasdaly.net/2015/06/28/bootstrap-
responsive-navigation-in-sharepoint/
 Navigation will no longer be hover, but touch.
 This can disable top tier nodes w/ children

24. 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.

25. 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)

26. 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

27. 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

28. Other Stuff
TOOLS, EXAMPLES, REFERENCES

29. Tools for the Job
 Chrome
 Emulation Mode
 Nice Presets
 FireFox
 Emulation Mode
 OK Presets
 Internet Explorer

30. Other Bootstrap / SharePoint Projects
 Bootstrap – online documentation, examples
 http://getbootstrap.com/
 Responsive SharePoint CodePlex Project (foundations or server only)
 Bootstrap (2 & 3)
 ZURB Foundation (4)
 https://responsivesharepoint.codeplex.com/
 ShareBoot – Responsive SharePoint 2013 Theme
 http://www.topsharepoint.com/shareboot-responsive-sharepoint-2013-theme
 Twitter Bootstrap for SharePoint (2010)
 Bootstrap v2.2.1
 https://bootstrapsharepoint.codeplex.com/

31. Alternative PnP Project
 SharePoint 2013/2016 Responsive UI
 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).
 Solution Overview
 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

32. 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