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

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!