Bootstrap - You're Doing it Wrong! Jab14
54
Bootstrap … You're Doing it Wrong! Bootstrap - you’re doing it wrong! #JAB14
-
Upload
philip-locke -
Category
Design
-
view
1.183 -
download
2
description
Bootstrap - You're Doing it Wrong! Presentation given at Jab14 www.jandbeyond.org
Transcript of Bootstrap - You're Doing it Wrong! Jab14
- 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
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- Bootstrap - youre doing it wrong!ALL LOOK THE SAME CLONES ARE COMING
- 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
- Bootstrap - youre doing it wrong!BOOTSTRAP BLOAT THE MAGIC - ROCKET SCIENCE?
- 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
- 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?
- 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!