Bootstrap

Bootstrap You're Doing it Wrong! Bootstrap - youre doing it wrong!#JAB14

Who is this guy? Philip Locke www.fastnetwebdesign.co.uk & www.joostrap.com Bootstrap - youre doing it wrong!WHO

WHO IS THIS GUY? YES YES AND NO! Bootstrap - youre doing it wrong!WHO

Mambo leading to Joomla Open Source Matters (OSM) Bootstrap & Joostrap WHO IS THIS GUY? Bootstrap - youre doing it wrong!WHO

SO WHATS 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. Qs & As Bootstrap - youre doing it wrong!WHAT ?

WHO ARE YOU? MY QUESTIONS Bootstrap - youre doing it wrong!

The most popular front-end framework for developing responsive, mobile first projects on the web. Bootstrap - youre doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW

NO its not! Bootstrap - youre doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW

1 x CSS file 2 x JavaScript file and some other helpful bits Bootstrap - youre doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW

1. Support - HUGE community 2. Cool functionality baked in 3. Saves you time & money Bootstrap - youre doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW

Some popular front-end bits & pieces to help develop responsive, mobile first projects on the web Quickly & Easily Bootstrap - youre doing it wrong!WHAT IS BOOTSTRAP? QUICK OVERVIEW

Bootstrap - youre doing it wrong!POWER OF BOOTSTRAP RTFM ;-)

http://getbootstrap.com 1. Read the documentation 2. Learn the Grid System Responsive Utilities 3. You dont have to use every feature that Bootstrap provides. 4. Play, have fun & make money Bootstrap - youre doing it wrong!POWER OF BOOTSTRAP RTFM ;-)

But, all Bootstrap websites look the same I can tell a Bootstrap site, just by looking at it REALLY? Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING

Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING

So lets customise Bootstrap Bootstrap - youre doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON

http://getbootstrap.com/customize Bootstrap - youre doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON

Bootstrap - youre doing it wrong!CUSTOMISE BOOTSTRAP DESIGN HAT ON

NO! Stop! Leave Bootstrap alone Bootstrap - youre doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!

Create your own override files Load them after Bootstrap 1. custom.css 2. custom.js Bootstrap - youre doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!

.btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } Bootstrap - youre doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!

.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 - youre doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!

$(document).ready(function(){ $(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); }); Bootstrap - youre doing it wrong!CUSTOMISE BOOTSTRAP LEAVE BOOTSTRAP ALONE!

Bootstrap is bloated. Far too much CSS & JS. Load times are crazy. this is for mobiles?!?! Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?

Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?

Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? That's massive reduction in bloat from the CSS & JavaScript files

Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Wait! Theres something else

Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Dust Me Down https://addons.mozilla.org/en- US/firefox/addon/dust-me-selectors

Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? www.telegraph.co.uk

Doh! Brain wave! Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?

Bootstrap - youre doing it wrong! CDNs BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?

Bootstrap - youre 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?

Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE? Why, this site could be systematic, hydromatic, ultramatic Why, it could be greased lightning

QUESTIONS & ANSWERS QA QUESTIONS?OR SHALL WE JUST GO TO THE BAR! Bootstrap - youre doing it wrong!

Bootstrap - youre 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: [email protected] Twitter: @philiplocke @joostrap Bootstrap - youre doing it wrong!

Bootstrap - You're Doing it Wrong! Jab14

Design

quick overview

quick overview

rocket science

popular front

css amp

bootstrap

coming bootstrap