How to Improve the SharePoint UI Using Bootstrap 3
Download as PPTX, PDF4 likes16,907 views
This document discusses how to improve the SharePoint UI using Bootstrap 3. It introduces Bootstrap 3 and reviews its grid system, CSS components, and JavaScript plugins. It then explains how Bootstrap 3 can help with SharePoint page layout, forms, navigation, data display, and responsive app sizing. Specifically, it describes how to create a responsive SharePoint master page and apps using Bootstrap. Finally, it notes some potential issues to consider when using Bootstrap with SharePoint.
How to Improve the SharePoint UI Using Bootstrap 3
- 1. How to Improve the SharePoint UI Using Bootstrap 3 Ryan McIntyre National Architect, Neudesic Level: Introductory to Intermediate
- 2. Agenda • SharePoint 2013 Responsiveness • Bootstrap 3 Introduction & Review • How Bootstrap 3 can help SharePoint • Create responsive master page & apps
- 8. SharePoint Gaps • Web Parts • App Parts • Search • Top & Left Nav
- 9. Bootstrap 3
- 10. CSS Grid system Tables Code Topography Forms Buttons Images Helper classes Responsive utilities
- 11. Components Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Responsive embed Wells
- 12. JavaScript Transitions Modal Popover Alert Scrollspy Button Dropdown Tab Collapse Tooltip Carousel Affix
- 13. Grid System
- 14. Grid System Medium (>=992px) Small (>=768px) Extra-Small (Default)
- 15. Basic Bootstrap 3 http://bit.ly/1xrKo8B http://splivebootstrap.azurewebsites.net/
- 16. How Can Bootstrap Help SharePoint? Page Layout Forms Navigation Data Display App (iframe) sizing Page Controls
- 17. Master Page with Bootstrap 3
- 18. App with Bootstrap 3
- 19. Bootstrap/SP Gotchas • CSS Conflicts • Publishing Page Mode (Edit vs View) • Define Supported Site Templates • App vs Host Branding • SEO • Weigh Pros/Cons Before Defaulting to Bootstrap over SharePoint Controls
- 20. Wrap-Up and Action Items • Bootstrap 3 review • How to use Bootstrap 3 in SharePoint 2013 • Contoso • Sign up for Office 365 trial • http://getbootstrap.com/ • https://responsivesharepoint.codeplex.co m/ • Bootstrap Theme: http://bit.ly/1wu8v4U
- 21. Thank You! [email protected] @ryanmcintyre http://blog.randomdust.com
Editor's Notes
- #4: MM and responsive requirement and issues hit, continue story later
- #5: Easy to add responsiveness (custom html page for icons), but web part zones are fixed.
- #6: Easier to see on team site, such as Sales & Marketing.
- #7: Ribbon buttons resize, group and disappear as needed
- #8: Gravitation (responsiveness) is not a force (Newton), rather a curved field (result) under the influence of a force (Einstein). Time changes relative to the observers frame of reference. Responsiveness is relative, not to how fast users are moving but to the device being used to view the site and the features we want to make responsive on that device. So define what responsive means for you before identifying gaps.
- #11: Three sets of capabilities, first is CSS
- #14: 12 columns available, we control how each block is set up to wrap based on device size through media queries
- #15: Large is 1200px and up
- #17: Page Layout Data display Page Controls Forms Navigation App (iframe) sizing
- #18: Master page along with remote provisioning
- #20: First and foremost, CSS conflicts with SP Not specific to Bootstrap, but magnified, is the need to create different solutions for supported site templates Some controls may not make sense to use, like navigation. Might need to keep SP navigation features for content authors.