Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap for Beginners

2,271 views

Published on

An introduction to the Bootstrap framework and integration into SharePoint

Published in: Technology
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report  https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Bootstrap for Beginners

  1. 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. 2. The Test 1 .Back_Row{ 2 move to front 3 }
  3. 3. For Coders 1 $(“tr:last”).each(function () { 2 moveForward(); 3 });
  4. 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. 5. Agenda Introduction to Bootstrap Sass & LESS Responsive Design Boot Camp Integrating with SharePoint It’s a Bug’s Life Voila Questions
  6. 6. INTRODUCTION TO BOOTSTRAP
  7. 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. 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. 9. The Grid
  10. 10. Our Mock Up • Keep it simple • Think Containers, Not Content
  11. 11. After Development
  12. 12. DEMO
  13. 13. How to break it down • Contains a container • Contains a row • Contains columns that equal to 12
  14. 14. Containers
  15. 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. 16. Columns Every row needs to have 12 columns You can split the columns in any division by 12
  17. 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. 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. 19. Bootstrap Extras Glyphicons Dropdowns Button Dropdowns Several types of navigation Forms Pagination
  20. 20. Sass & LESS
  21. 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. 22. Sass - continued Operators Do you remember your order of operations? Mixins
  23. 23. Sass and Less Support Visual Studio Plug-ins Mindscape Web Workbench SassyStudio
  24. 24. RESPONSIVE DESIGN BOOTCAMP
  25. 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. 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. 27. INTEGRATION WITH SHAREPOINT
  28. 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. 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. 30. Master Page Controls Master page
  31. 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. 32. IT’S A BUG’S LIFE
  33. 33. Bootstrap 3 resets for SharePoint
  34. 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. 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. 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. 37. FooTable Example
  38. 38. VOILA
  39. 39. Live Examples CalGuard http://www.calguard.ca.gov
  40. 40. Additional Example San Jose Community College District http://www.sjeccd.edu/
  41. 41. QUESTIONS
  42. 42. Was made possible by the generous support of the following sponsors… And by your participation… Thank you!
  43. 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. 44. THANK YOU

×