Bootstrap - You're Doing it Wrong! Jab14

  • 1,516 views
Uploaded on

Bootstrap - You're Doing it Wrong! …

Bootstrap - You're Doing it Wrong!
Presentation given at Jab14 www.jandbeyond.org

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,516
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
13
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Bootstrap … You're Doing it Wrong! Bootstrap - you’re doing it wrong!#JAB14
  • 2. Who is this guy? Philip Locke www.fastnetwebdesign.co.uk & www.joostrap.com Bootstrap - you’re doing it wrong!WHO
  • 3. WHO IS THIS GUY? YES… YES… AND NO! Bootstrap - you’re doing it wrong!WHO
  • 4. Mambo leading to Joomla Open Source Matters (OSM) Bootstrap & Joostrap WHO IS THIS GUY? Bootstrap - you’re doing it wrong!WHO
  • 5. SO WHAT’S THIS SESSION ABOUT? 1. What is Bootstrap 2. Learn the Power of Bootstrap 3. They all look the same 4. Customise Bootstrap 5. Boostrap Bloat 6. Q’s & A’s Bootstrap - you’re doing it wrong!WHAT ?
  • 6. WHO ARE YOU? MY QUESTIONS… Bootstrap - you’re doing it wrong!
  • 7. “The most popular front-end framework for developing responsive, mobile first projects on the web.” Bootstrap - you’re doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW
  • 8. NO … it’s not! Bootstrap - you’re doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW
  • 9. 1 x CSS file 2 x JavaScript file …and some other helpful bits Bootstrap - you’re doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW
  • 10. 1. Support - HUGE community 2. Cool functionality baked in 3. Saves you time & money Bootstrap - you’re doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW
  • 11. “Some popular front-end bits & pieces to help develop responsive, mobile first projects on the web… Quickly & Easily” Bootstrap - you’re doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW
  • 12. Bootstrap - you’re doing it wrong!POWER OF BOOTSTRAP RTFM ;-)
  • 13. http://getbootstrap.com 1. Read the documentation 2. Learn the … Grid System … Responsive Utilities 3. You don’t have to use every feature that Bootstrap provides. 4. Play, have fun & make money Bootstrap - you’re doing it wrong!POWER OF BOOTSTRAP RTFM ;-)
  • 14. “But, all Bootstrap websites look the same” “I can tell a Bootstrap site, just by looking at it” …REALLY? Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 15. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 16. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 17. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 18. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 19. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 20. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 21. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 22. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 23. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 24. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 25. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 26. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 27. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 28. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 29. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  • 30. So let’s customise Bootstrap Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON…
  • 31. http://getbootstrap.com/customize Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON…
  • 32. Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON…
  • 33. NO! Stop! Leave Bootstrap alone… Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!
  • 34. Create your own override files Load them after Bootstrap 1. custom.css 2. custom.js Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!
  • 35. .btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!
  • 36. .btn-custom { background-color: #08c; border-color: #08c; } .btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active { background-color: #f90; border-color: #f90; } Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!
  • 37. $(document).ready(function(){ $(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); }); Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!
  • 38. Bootstrap is bloated. Far too much CSS & JS. Load times are crazy. …this is for mobiles?!?! Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  • 39. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  • 40. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? That's massive reduction in bloat from the CSS & JavaScript files
  • 41. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Wait! There’s something else
  • 42. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Dust Me Down https://addons.mozilla.org/en- US/firefox/addon/dust-me-selectors
  • 43. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? www.telegraph.co.uk
  • 44. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  • 45. Doh! Brain wave! Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  • 46. Bootstrap - you’re doing it wrong! CDN’s BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  • 47. Bootstrap - you’re doing it wrong! 1. Distribute the load 2. Save bandwidth 3. Boost performance 4. Reduce hosting costs We do it with YouTube …Right? BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  • 48. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Why, this site could be systematic, hydromatic, ultramatic Why, it could be greased lightning
  • 49. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? <?php if ($loadJquery == 2) : ?> <script src=“//code.jquery.com/jquery-1.11.1.min.js”></scr <script src=“//code.jquery.com/jquery-migrate-1.2.1.min.js" <?php endif; ?>
  • 50. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? <?php if ($loadBootstrap == 2) : ?> <script src=“//netdna.bootstrapcdn.com/bootstrap/ 3.1.1/css/bootstrap.min.css”></script> <script src=“//netdna.bootstrapcdn.com/bootstrap/ 3.1.1/js/bootstrap.min.js"></script> <?php endif; ?>
  • 51. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  • 52. QUESTIONS & ANSWERS Q…A QUESTIONS?OR SHALL WE JUST GO TO THE BAR! Bootstrap - you’re doing it wrong!
  • 53. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Rocking Joomla! like a mad man ;-)
  • 54. PHILIP LOCKECONTACT ME Website: www.joostrap.com www.fastnetwebdesign.co.uk Email: phil@joostrap.com Twitter: @philiplocke @joostrap Bootstrap - you’re doing it wrong!