how to improve the sharepoint ui using bootstrap 3
TRANSCRIPT
How to Improve the SharePoint UI
Using Bootstrap 3
Ryan McIntyreNational Architect, NeudesicLevel: Introductory to Intermediate
Agenda
• SharePoint 2013 Responsiveness
• Bootstrap 3 Introduction & Review
• How Bootstrap 3 can help SharePoint
• Create responsive master page & apps
Introducing Contoso
SharePoint OOTB Responsiveness
SharePoint OOTB Responsiveness
SharePoint OOTB Responsiveness
SharePoint Gaps
• Web Parts
• App Parts
• Search
• Top & Left Nav
Bootstrap 3
CSS
Grid system
TopographyCode
Tables
Forms
Buttons
ImagesHelper classes
Responsive utilities
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
JavaScript
Transitions
Modal
DropdownScrollspy
Tab Tooltip
Popover
Alert
Button
Collapse
Carousel
Affix
Grid System
Grid System
Medium(>=992px)
Small(>=768px)
Extra-Small
(Default)
Basic Bootstrap 3
http://bit.ly/1xrKo8B
http://splivebootstrap.azurewebsites.net/
How Can Bootstrap Help SharePoint?
Page Layout
FormsNavigation
Data Display
App (iframe)sizing
Page Controls
Master Page with Bootstrap 3
App with Bootstrap 3
• 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
Bootstrap/SP Gotchas
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
