Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Bootstrap for Beginners

•Download as PPTX, PDF•
•
D'arce Hess
D'arce Hess

This document provides an overview and introduction to Bootstrap for beginners. It discusses what Bootstrap is, the benefits of using it, and its basic grid system including containers, rows, and columns. It also covers responsive design, integrating Bootstrap with SharePoint, common issues and bugs, and includes examples of live Bootstrap implementations. The presenter is D'arce Hess, a SharePoint interface developer, and the content is from a SharePoint Saturday event in October 2014.

1 of 44
Bootstrap for Beginners Your introduction to Responsive Design and SharePoint D’arce Hess SharePoint Interface Developer SharePoint Saturday New Hampshire #SPSNH – 10/18/2014
The Test 1 .Back_Row{ 2 move to front 3 }
For Coders 1 $(“tr:last”).each(function () { 2 moveForward(); 3 });
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
Agenda Introduction to Bootstrap Sass & LESS Responsive Design Boot Camp Integrating with SharePoint It’s a Bug’s Life Voila Questions
INTRODUCTION TO 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? 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
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 Button Dropdowns Several types of navigation Forms Pagination
Sass & LESS
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
Sass - continued Operators Do you remember your order of operations? Mixins
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 To help get you started: This was a labor of love created by community members for Community members. http://responsivesharepoint.codeplex.com/
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
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 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
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.
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
Live Examples CalGuard http://www.calguard.ca.gov
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!
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!
THANK YOU

More Related Content

Bootstrap for Beginners

  • 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
  • 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
  • 10. Our Mock Up • Keep it simple • Think Containers, Not Content
  • 12. DEMO
  • 13. How to break it down • Contains a container • Contains a row • Contains columns that equal to 12
  • 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
  • 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
  • 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
  • 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.
  • 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.
  • 38. VOILA
  • 39. Live Examples CalGuard http://www.calguard.ca.gov
  • 40. Additional Example San Jose Community College District http://www.sjeccd.edu/
  • 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!