An introduction to the Bootstrap framework and integration into SharePoint

1. Bootstrap for Beginners
Your introduction to Responsive Design and SharePoint
D’arce Hess
SharePoint Interface Developer
SharePoint Saturday New Hampshire #SPSNH – 10/18/2014

2. The Test
1 .Back_Row{
2 move to front
3 }

3. For Coders
1 $(“tr:last”).each(function () {
2 moveForward();
3 });

4. Who am I?
D’arce Hess
Developer, Athlete and Musician
Atrion
Blog: www.thebrandingbutterfly.com
Website: www.atrion.net
Email: dhess@atrion.net
@darcehess
www.linkedin.com/in/darcehess/
http://www.youtube.com/user/DarceHess

5. Agenda
Introduction
to Bootstrap
Sass & LESS
Responsive
Design
Boot Camp
Integrating
with
SharePoint
It’s a Bug’s
Life
Voila Questions

6. INTRODUCTION
TO BOOTSTRAP

7. What is Bootstrap?
“Bootstrap is the most popular HTML, CSS and
JS framework for developing responsive, mobile
first projects on the web”
Where to get it:
http://getbootstrap.com/

8. Why should we consider using it?
Pros
• Allows for faster prototyping
• Grid has already been established
• Easy to engage newer web developers
• SASS and LESS
Cons
• Can be bloated
• Some resets need to be made to work with
SharePoint
• May be too restrictive for experienced developers

9. The Grid

10. Our Mock Up
• Keep it simple
• Think Containers, Not
Content

11. After Development

12. DEMO

13. How to break it down
• Contains a container
• Contains a row
• Contains columns that
equal to 12

14. Containers

15. Rows
Inside each container is
a row. You can also
have containers inside
of a row (nested).
A row equals 12
columns total.

16. Columns
Every row needs to have 12 columns
You can split the columns in any
division by 12

17. How to know what column size to use
You can add multiple classes to an element to adjust how it will display on
different devices.

18. The Box Model
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.

19. Bootstrap Extras
Glyphicons Dropdowns Button
Dropdowns
Several types of
navigation
Forms Pagination

20. Sass & LESS

21. Sass
Sass is a pre-processor for CSS
English translation: You can now write CSS and compile the same way you
would write regular code.
Variables
Compiles to
Nesting

22. Sass - continued
Operators
Do you remember your order of
operations?
Mixins

23. Sass and Less Support
Visual Studio Plug-ins
Mindscape Web Workbench
SassyStudio

24. RESPONSIVE
DESIGN
BOOTCAMP

25. RWD History Lesson
The term “Responsive Web Design” was coined by Ethan Marcotte in his
article “A List Apart”.
States that there are three requirements to implement Responsive Design:
• CSS3 Media Queries
• Fluid Grid
• Flexible Images
Three main types
• Responsive Web Design
• Adaptive Design
• Progressive Enhancement (mobile-first)

26. 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

27. INTEGRATION
WITH
SHAREPOINT

28. CodePlex – Responsive SharePoint
To help get you started: This was a labor of love created by community
members for Community members.
http://responsivesharepoint.codeplex.com/

29. Bring in the .Net controls
Set up your frame the same and then bring in the webpart containers inside of your columns
This is a page layout example

30. Master Page Controls
Master page

31. MySites and Team Sites
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.

32. IT’S A BUG’S LIFE

33. Bootstrap 3 resets for SharePoint

34. Browser Compatibility
SharePoint 2010
SharePoint 2010 automatically reverts users to using IE8.
You will need to plan on installing the following javascript libraries to emulate
HTML5 and CSS3 properties
• Respond.js
• Modernizr
• HTML5 shiv
You will need to adjust your media queries

35. Browser Compatibility - continued
SharePoint 2013
SharePoint 2013 supports modern browsers staring with IE9+
<form> </form tag is not supported.
If using Design Manager, all code must be able to be
Validated through an IE6 xml validator.
Office 365
Proceed with caution. If Microsoft locks master pages, this will become
a lot more difficult to create.

36. Tables – Yup, I said it
Okay, get it out of your system. Tables still exist in SharePoint and there is some
information that should be presented in tables. Tables are hard to deal with and
they are made to be rigid.
For minor tables of information, we can use FooTable as an option. It is jQuery
plug-in that will combine information from fields into an expandable container.

37. FooTable Example

38. VOILA

39. Live Examples
CalGuard
http://www.calguard.ca.gov

40. Additional Example
San Jose Community College District
http://www.sjeccd.edu/

41. QUESTIONS

42. Was made possible by the generous
support of the following sponsors…
And by your participation… Thank you!

43. Join us for the raffle & SharePint following the
last session
Be sure to fill out your eval form &
turn in at the end of the day for a
ticket to the BIG raffle!

44. THANK YOU