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:
Why should we consider using it?
• 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
• May be too restrictive for experienced developers
Inside each container is
a row. You can also
have containers inside
of a row (nested).
A row equals 12
Every row needs to have 12 columns
You can split the columns in any
division by 12
How to know what column size to use
You can add multiple classes to an element to adjust how it will display on
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.
Glyphicons Dropdowns Button
Several types of
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)
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
• That beautiful banner image and rotator do not add any value on a
• 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
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.
SharePoint 2010 automatically reverts users to using IE8.
HTML5 and CSS3 properties
• HTML5 shiv
You will need to adjust your media queries
Browser Compatibility - continued
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.
Proceed with caution. If Microsoft locks master pages, this will become
a lot more difficult to create.
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.