0
Bootstrap
…
You're Doing
it Wrong!
Bootstrap - you’re
doing it wrong!#JAB14
Who is this guy?
Philip Locke
www.fastnetwebdesign.co.uk
&
www.joostrap.com
Bootstrap - you’re
doing it wrong!WHO
WHO IS THIS GUY?
YES…
YES…
AND NO!
Bootstrap - you’re
doing it wrong!WHO
Mambo
leading to
Joomla
Open Source
Matters (OSM)
Bootstrap
&
Joostrap
WHO IS THIS GUY?
Bootstrap - you’re
doing it wrong!...
SO WHAT’S THIS SESSION ABOUT?
1. What is Bootstrap
2. Learn the Power of Bootstrap
3. They all look the same
4. Customise ...
WHO ARE YOU?
MY QUESTIONS…
Bootstrap - you’re
doing it wrong!
“The most popular front-end
framework for developing
responsive, mobile first
projects on the web.”
Bootstrap - you’re
doi...
NO … it’s not!
Bootstrap - you’re
doing it wrong!WHAT IS BOOTSTRAP?
QUICK OVERVIEW
1 x CSS file
2 x JavaScript file
…and some other helpful bits
Bootstrap - you’re
doing it wrong!WHAT IS BOOTSTRAP?
QUICK O...
1. Support - HUGE community
2. Cool functionality baked in
3. Saves you time & money
Bootstrap - you’re
doing it wrong!WHA...
“Some popular front-end
bits & pieces to help develop
responsive, mobile first
projects on the web…
Quickly & Easily”
Boot...
Bootstrap - you’re
doing it wrong!POWER OF BOOTSTRAP
RTFM ;-)
http://getbootstrap.com
1. Read the documentation
2. Learn the
… Grid System
… Responsive Utilities
3. You don’t have to u...
“But, all Bootstrap websites
look the same”
“I can tell a Bootstrap site, just
by looking at it”
…REALLY?
Bootstrap - you’...
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
Bootstrap - you’re
doing it wrong!ALL LOOK THE SAME
CLONES ARE COMING
So let’s customise Bootstrap
Bootstrap - you’re
doing it wrong!CUSTOMISE BOOTSTRAP
DESIGN HAT ON…
http://getbootstrap.com/customize
Bootstrap - you’re
doing it wrong!CUSTOMISE BOOTSTRAP
DESIGN HAT ON…
Bootstrap - you’re
doing it wrong!CUSTOMISE BOOTSTRAP
DESIGN HAT ON…
NO! Stop!
Leave Bootstrap alone…
Bootstrap - you’re
doing it wrong!CUSTOMISE BOOTSTRAP
LEAVE BOOTSTRAP ALONE!
Create your own override files
Load them after Bootstrap
1. custom.css
2. custom.js
Bootstrap - you’re
doing it wrong!CUST...
.btn {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Bootstrap - you’re
doing it wrong!CUS...
.btn-custom {
background-color: #08c;
border-color: #08c;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn...
$(document).ready(function(){
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
});
Bootstrap - ...
Bootstrap is bloated.
Far too much CSS & JS.
Load times are crazy.
…this is for mobiles?!?!
Bootstrap - you’re
doing it wr...
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
That's massive reduction in bloat
from the C...
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Wait!
There’s something else
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Dust Me Down
https://addons.mozilla.org/en-
...
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
www.telegraph.co.uk
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Doh!
Brain wave!
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Bootstrap - you’re
doing it wrong!
CDN’s
BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Bootstrap - you’re
doing it wrong!
1. Distribute the load
2. Save bandwidth
3. Boost performance
4. Reduce hosting costs
W...
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Why, this site could be
systematic,
hydromat...
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
<?php if ($loadJquery == 2) : ?>
<script src...
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
<?php if ($loadBootstrap == 2) : ?>
<script ...
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
QUESTIONS & ANSWERS
Q…A
QUESTIONS?OR SHALL WE JUST GO TO THE BAR!
Bootstrap - you’re
doing it wrong!
Bootstrap - you’re
doing it wrong!BOOTSTRAP BLOAT
THE MAGIC - ROCKET SCIENCE?
Rocking Joomla! like a mad man ;-)
PHILIP LOCKECONTACT ME
Website:
www.joostrap.com
www.fastnetwebdesign.co.uk
Email:
phil@joostrap.com
Twitter:
@philiplocke...
Upcoming SlideShare
Loading in...5
×

Bootstrap - You're Doing it Wrong! Jab14

1,980

Published on

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

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,980
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Bootstrap - You're Doing it Wrong! Jab14"

  1. 1. Bootstrap … You're Doing it Wrong! Bootstrap - you’re doing it wrong!#JAB14
  2. 2. Who is this guy? Philip Locke www.fastnetwebdesign.co.uk & www.joostrap.com Bootstrap - you’re doing it wrong!WHO
  3. 3. WHO IS THIS GUY? YES… YES… AND NO! Bootstrap - you’re doing it wrong!WHO
  4. 4. Mambo leading to Joomla Open Source Matters (OSM) Bootstrap & Joostrap WHO IS THIS GUY? Bootstrap - you’re doing it wrong!WHO
  5. 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. 6. WHO ARE YOU? MY QUESTIONS… Bootstrap - you’re doing it wrong!
  7. 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. 8. NO … it’s not! Bootstrap - you’re doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW
  9. 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. 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. 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. 12. Bootstrap - you’re doing it wrong!POWER OF BOOTSTRAP RTFM ;-)
  13. 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. 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. 15. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  16. 16. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  17. 17. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  18. 18. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  19. 19. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  20. 20. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  21. 21. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  22. 22. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  23. 23. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  24. 24. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  25. 25. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  26. 26. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  27. 27. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  28. 28. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  29. 29. Bootstrap - you’re doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
  30. 30. So let’s customise Bootstrap Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON…
  31. 31. http://getbootstrap.com/customize Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON…
  32. 32. Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON…
  33. 33. NO! Stop! Leave Bootstrap alone… Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!
  34. 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. 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. 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. 37. $(document).ready(function(){ $(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); }); Bootstrap - you’re doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!
  38. 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. 39. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  40. 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. 41. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Wait! There’s something else
  42. 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. 43. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? www.telegraph.co.uk
  44. 44. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  45. 45. Doh! Brain wave! Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  46. 46. Bootstrap - you’re doing it wrong! CDN’s BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  47. 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. 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. 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. 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. 51. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
  52. 52. QUESTIONS & ANSWERS Q…A QUESTIONS?OR SHALL WE JUST GO TO THE BAR! Bootstrap - you’re doing it wrong!
  53. 53. Bootstrap - you’re doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Rocking Joomla! like a mad man ;-)
  54. 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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×