Bootstrap for Beginners
44
Your introduction to Responsive Design and SharePoint D’arce Hess SharePoint Interface Developer SharePoint Saturday New Hampshire #SPSNH – 10/18/2014 Bootstrap for Beginners
-
Upload
darce-hess -
Category
Technology
-
view
539 -
download
4
description
An introduction to the Bootstrap framework and integration into SharePoint
Transcript of Bootstrap for Beginners
Your introduction to Responsive Design and SharePoint
D’arce HessSharePoint Interface Developer
SharePoint Saturday New Hampshire #SPSNH – 10/18/2014
Bootstrap for Beginners
1 .Back_Row{2 move to front3 }
The Test
1 $(“tr:last”).each(function () {2 moveForward();3 });
For Coders
Who am I?
D’arce HessDeveloper, Athlete and Musician
Atrion
Blog: www.thebrandingbutterfly.com
Website: www.atrion.net
Email: [email protected]
@darcehess
www.linkedin.com/in/darcehess/
http://www.youtube.com/user/DarceHess
Agenda
Introduction to
Bootstrap
Sass & LESS
Responsive Design
Boot Camp
Integrating with
SharePoint
It’s a Bug’s Life
Voila Questions
INTRODUCTIONTO BOOTSTRAP
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/
Why should we consider using it?
• Allows for faster prototyping• Grid has already been established• Easy to engage newer web
developers• SASS and LESS
Pros
Cons
• Can be bloated• Some resets need to be made to work with
SharePoint • May be too restrictive for experienced
developers
The Grid
Our Mock Up
• Keep it simple
• Think Containers, Not Content
After Development
DEMO
How to break it down
• Contains a container
• Contains a row
• Contains columns that equal to 12
Containers
Rows
Inside each container is a row. You can also have containers inside of a row (nested).
A row equals 12 columns total.
Columns
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 different devices.
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.
Bootstrap Extras
Glyphicons
Dropdowns
ButtonDropdowns
Several types of
navigation
Forms
Pagination
Sass & LESS
Sass
Sass is a pre-processor for CSSEnglish translation: You can now write CSS and compile the same way you would write regular code.
Variables
Compiles to
Nesting
Sass - continued
Operators
Mixins
Do you remember your order of operations?
Sass and Less Support
Visual Studio Plug-ins
Mindscape Web Workbench
SassyStudio
RESPONSIVE DESIGN
BOOTCAMP
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 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
INTEGRATION WITH
SHAREPOINT
CodePlex – Responsive SharePoint
http://responsivesharepoint.codeplex.com/
To help get you started: This was a labor of love created by community members for Community members.
Bring in the .Net controls
Set up your frame the same and then bring in the webpart containers inside of your columnsThis is a page layout example
Master Page Controls
Master page
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.
IT’S A BUG’S LIFE
Bootstrap 3 resets for SharePoint
Browser Compatibility
SharePoint 2010SharePoint 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
Browser Compatibility - continued
SharePoint 2013 supports modern browsers staring with IE9+
SharePoint 2013
<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.
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.
FooTable Example
VOILA
Additional Example
San Jose Community College District
http://www.sjeccd.edu/
QUESTIONS
Was made possible by the generous support of the
following sponsors…
And by your participation… Thank you!
Be sure to fill out your eval form & turn in at the end of the day for a
ticket to the BIG raffle!
Join us for the raffle & SharePint following the last session
THANK YOU
