how to improve the sharepoint ui using bootstrap 3

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

Thank You!

ryan.mcintyre@neudesic.com

@ryanmcintyre

http://blog.randomdust.com