Presented by D'arce Hess, AvePoint Strategic Consultant on October 3, 2015 at SharePoint Saturday DC/Reston Bootstrap is a framework that is widely used in web development to create beautiful responsive websites. Applying this framework to SharePoint requires skill and patience. In this session, we will begin with a basic mock-up of a site. We will review how to break-down the elements of the mock-up and being the mark-up for your master page and page layout using Bootstrap. You will learn the basic structure, language, CSS resets and use of coding techniques such as Sass to adapt this framework to your SharePoint project. More from AvePoint: http://www.avepoint.com/community

1. Accessible content is available upon request.
Putting on your Design Bootstraps
Intro to Responsive Design & SharePoint
By: D’arce Hess

2. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

3. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

4. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
@darcehess
https://www.linkedin.com/in/darcehess
Darce.Hess@avepoint.com
D’arce Hess

5. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Introduction
References
Responsive vs. Adaptive Bootstrap
Integration with
SharePoint
QuestionsBest PracticesIt’s a Bugs Life
Agenda

6. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
INTRODUCTION

7. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
RESPONSIVE DESIGN
Coined by Ethan
Marcotte in “A List
Apart” article.
Requires:
• Media Queries
• Flexible Images
• Grid

8. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
More than
meets the
eye.

9. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
MobileTabletDesktop

10. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
ADAPTIVE DESIGN
Distinct layouts for
multiple screen sizes,
and the layout used
depends on the screen
size used.

11. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
COMPONENTS

12. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Grid Flexible ImagesMedia Queries
WHAT DO YOU NEED?

13. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
THE GRID
12 Columns
Allows for Design to be easily broken up into
common layouts.

14. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
MEDIA QUERIES
CSS3 module allowing content rendering to adapt to conditions such
as screen resolution

15. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
FLEXIBLE IMAGES
Images created in
correct format and size
to allow for CSS
re-sizing based on
screen width

16. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
BOOTSTRAP 3

17. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
ABOUT BOOTSTRAP FRAMEWORK
Supports both Sass and Less solutions for
development.
Bootstrap is the most popular HTML, CSS, and
JS framework for developing responsive,
mobile first projects on the web.
Lots of added functionality, i.e.
Glyphicons, Navigation & responsive
embed

18. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
PROS vs CONS
Pros Cons
• Allows for faster
prototyping
• Grid has already been
established
• Easy to engage newer
web developers
• SASS and LESS
• Can be bloated
• Some resets need to be
made to work with
SharePoint
• May be too restrictive for
experienced developers

19. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
UNDERSTANDING THE STRUCTURE

20. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
IMPLEMENT INTO MASTER PAGE

21. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Set up your frame the same and then bring in the webpart containers inside of your columns
This is a page layout example
IMPLEMENT INTO PAGE LAYOUT

22. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Both of these layouts us the “Wiki” page layout. These are out-of-the-box layouts that do not come with
Publishing Features enabled.
This means you cannot create a custom layout for these pages. You can make them responsive by
adjusting the tables in the layout, but it is very difficult to do.
MY SITES & TEAM SITES

23. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
DEMO

24. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Sass is a pre-processor for CSS
Compiles to
WHAT IS SASS (NOT SAS)

25. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Mixins
Do you remember your order of operations?

26. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Mindscape Web Workbench
SassyStudio
SASS SUPPORT IN VISUAL STUDIO

27. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
IT’S A BUGS LIFE

28. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Bootstrap uses box-sizing: border-box;
This means that padding does not affect the
computed width of an element.
SharePoint uses box-sizing: content-box;
This means that if you add a border to an element
it equals the element + 2px.
THE BOX MODEL

29. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
CSS OVERIDES NEEDED

30. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
BEST PRACTICES

31. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
WITH GREAT POWER…
Just because you can, doesn’t mean that you should!
Time to think about the user experience:
• Do you want your users to scroll forever when down
on a mobile device?
• That beautiful banner image and rotator do not add
any value on a phone.
• Mobile users are using data to load your site, size of
images and files matters. Time to optimize.
• Think of options for links and buttons to be easier to
use for touch.
• Remember, there is no hover functionality on a
mobile device

32. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
ON PREM OR CLOUD?
• More control over Master Page
• Create Custom Page Layouts
• Use javascript injections for specific
functionality
• Advised not to alter Master Page
• Create Custom Page Layouts
• Use alternative CSS
• Use javascript injections for specific
functionality

33. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Powershell
Manual
Deployment
“Add-in”
Model/CSOM
Third-Party
Solution
Multiple Site Collection Deployment

34. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
QUESTION & ANSWER

35. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.