The A to Z of Building a Responsive SharePoint Site with Bootstrap
Download as PPTX, PDF13 likes20,283 views
This document provides an overview of using Bootstrap to build a responsive SharePoint site. It discusses what Bootstrap and responsive design are, why Bootstrap is useful, how to implement Bootstrap grids and media queries in SharePoint, Bootstrap UI components, challenges of using Bootstrap in SharePoint, and examples of responsive SharePoint sites built with Bootstrap.
The A to Z of Building a Responsive SharePoint Site with Bootstrap
- 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.
- 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