Making Peace with Twitter Bootstrap

9,774 views

Published on

Presentation at the April 2013 HTML5 Dev Conf, San Francisco, CA by Melanie Archer.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,774
On SlideShare
0
From Embeds
0
Number of Embeds
7,341
Actions
Shares
0
Downloads
60
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Making Peace with Twitter Bootstrap

  1. 1. Making Peace with Twitter Bootstrap Melanie Archer HTML5 Developer Conference San Francisco, CA April 2013Wednesday, March 27, 2013 1
  2. 2. Who’s talking? Web developer @mejarc http://twobanjos.comWednesday, March 27, 2013 2
  3. 3. Who’s talking? Slide URL: http://slidesha.re/Wuboo4Wednesday, March 27, 2013 3
  4. 4. Why bother? You will have to deal with it Photo: Bundesarchiv, B 145 Bild-F024624-0004 / Gräfingholt, Detlef / CC-BY-SA, via Wikimedia CommonsWednesday, March 27, 2013 4
  5. 5. Problems Bootstrap BloatWednesday, March 27, 2013 5
  6. 6. Problems Bootstrap Bloat Bootstrap’s Class-itisWednesday, March 27, 2013 6
  7. 7. Problems Bootstrap Bloat Bootstrap’s Class-itis Bootstrap: inflexibleWednesday, March 27, 2013 7
  8. 8. PROBLEMWednesday, March 27, 2013 8
  9. 9. Bootstrap Bloat Photo: http://www.flickr.com/photos/wanderlost63Wednesday, March 27, 2013 9
  10. 10. Bootstrap Bloat The problem might not be with BootstrapWednesday, March 27, 2013 10
  11. 11. FixWednesday, March 27, 2013 11
  12. 12. Strategies Customize download Customize @importWednesday, March 27, 2013 12
  13. 13. Downloading The least, firstWednesday, March 27, 2013 13
  14. 14. git clone https://github.com/ twitter/bootstrap.gitWednesday, March 27, 2013 14
  15. 15. Using LESS Delete unwanted @importWednesday, March 27, 2013 15
  16. 16. cp bootstrap.less my-bootstrap.lessWednesday, March 27, 2013 16
  17. 17. gem ‘twitter-bootstrap-rails’Wednesday, March 27, 2013 17
  18. 18. gem ‘therubyracer’ gem ‘less-rails’ gem ‘twitter-bootstrap-rails’Wednesday, March 27, 2013 18
  19. 19. Using bower or npm More LESSWednesday, March 27, 2013 19
  20. 20. bower install bootstrapWednesday, March 27, 2013 20
  21. 21. cp components/bootstrap/bootstrap.less ...Wednesday, March 27, 2013 21
  22. 22. npm install twitter-bootstrap-nodeWednesday, March 27, 2013 22
  23. 23. cp vendor/bootstrap/less/bootstrap.less ...Wednesday, March 27, 2013 23
  24. 24. Using SASS Delete unwanted @importWednesday, March 27, 2013 24
  25. 25. gem bootstrap-sassWednesday, March 27, 2013 25
  26. 26. $ cd `bundle show bootstrap-sass`$ cd vendor/assets/stylesheets$ cp bootstrap.scss ...$ cp bootstrap/bootstrap.scss ...Wednesday, March 27, 2013 26
  27. 27. git clone https://github.com/jlong/sass- twitter-bootstrap.gitWednesday, March 27, 2013 27
  28. 28. yo webappWednesday, March 27, 2013 28
  29. 29. Would you like to include Twitter Bootstrap for Sass? (Y/n) YWednesday, March 27, 2013 29
  30. 30. Using InitializrWednesday, March 27, 2013 30
  31. 31. <link href=”[CDN]/bootstrap.css” />Wednesday, March 27, 2013 31
  32. 32. <link href=”[CDN]/bootstrap.css” />Wednesday, March 27, 2013 32
  33. 33. Treating Bootstrap Bloat Use Bootstrap in LESS/ SASS components Copy bootstrap.* Revise your copyWednesday, March 27, 2013 33
  34. 34. PROBLEMWednesday, March 27, 2013 34
  35. 35. Bootstrap’s Class-itis Photo: http://www.flickr.com/photos/dukeyearlookWednesday, March 27, 2013 35
  36. 36. What you wantWednesday, March 27, 2013 36
  37. 37. ! ! <div class="page">! ! ! <header class="global">! ! ! ! <h1>My Semantic Markup Fantasy </h1>! ! ! </header>! ! ! <nav class="global">! ! ! ! <ul>! ! ! ! ! <li class="active">! ! ! ! ! ! <a href="#article1">! ! ! ! ! ! ! Article 1Wednesday, March 27, 2013 37
  38. 38. What you useWednesday, March 27, 2013 38
  39. 39. ! ! <div class="container">! ! ! <div class="row">! ! ! ! <div class="span8 page-header"id="header">! ! ! ! ! ! <h1> My Presentational Markup Reality </h1>! ! ! ! </div>! ! ! </div>! ! ! <div class="row">! ! ! ! <div class="span12" id="nav">! ! ! ! ! <ul class="span8 nav nav-pills">! ! ! ! ! ! <li class="active">! ! ! ! ! ! ! <a href="#article1">! ! ! ! ! ! ! ! Article 1Wednesday, March 27, 2013 39
  40. 40. FixWednesday, March 27, 2013 40
  41. 41. What you wantWednesday, March 27, 2013 41
  42. 42. ! ! <div class="page">! ! ! <header class="global">! ! ! ! <h1>My Semantic Markup Fantasy </h1>! ! ! </header>! ! ! <nav class="global">! ! ! ! <ul>! ! ! ! ! <li class="active">! ! ! ! ! ! <a href="#article1">! ! ! ! ! ! ! Article 1Wednesday, March 27, 2013 42
  43. 43. @import "mixins.less";Wednesday, March 27, 2013 43
  44. 44. Treating Bootstrap’s Class-itis @import Bootstrap’s mixins or style rules Use these rules for your own selectorsWednesday, March 27, 2013 44
  45. 45. PROBLEMWednesday, March 27, 2013 45
  46. 46. Bootstrap: inflexible? Photo: http://www.flickr.com/photos/walkingsfWednesday, March 27, 2013 46
  47. 47. The Plan Photo: http://www.flickr.com/photos/telstarWednesday, March 27, 2013 47
  48. 48. The Result Photo: http://www.flickr.com/photos/caseorganicWednesday, March 27, 2013 48
  49. 49. !importantWednesday, March 27, 2013 49
  50. 50. .alt { margin: 10px 5px; } .alt.exception { margin-top: 18px; } .alt.exception.just-this-one-time { margin-top: 0; }Wednesday, March 27, 2013 50
  51. 51. FixWednesday, March 27, 2013 51
  52. 52. New process No more PSDsWednesday, March 27, 2013 52
  53. 53. Wednesday, March 27, 2013 53
  54. 54. // // Variables // -------------------------------------------------- // Global values // -------------------------------------------------- // Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555;Wednesday, March 27, 2013 54
  55. 55. builtwithbootstrap.com expo.getbootstrap.comWednesday, March 27, 2013 55
  56. 56. Make peace Take only what you needWednesday, March 27, 2013 56
  57. 57. Make peace Use your class namesWednesday, March 27, 2013 57
  58. 58. Make peace Design with Bootstrap, not against itWednesday, March 27, 2013 58
  59. 59. ☮Wednesday, March 27, 2013 59
  60. 60. Thanks Bill Fisher Dave Nugent Michael Knowles Angel InokonWednesday, March 27, 2013 60
  61. 61. QuestionsWednesday, March 27, 2013 61
  62. 62. More BVision, “Please stop embedding Bootstrap classes in your HTML” http://ruby.bvision.com/blog/please-stop-embedding- bootstrap-classes-in-your-html Roberto Soares, “Integrating Twitter Bootstrap with Ruby on Rails” http://blog.robertosoares.me/blog/2012/08/17/ integrating-twitter-bootstrap-with-ruby-on-rails/Wednesday, March 27, 2013 62
  63. 63. More Mario Noble, “Getting started with SCSS and Bootstrap” http://www.slideshare.net/marionoble/getting-started- with-scss-and-bootstrap Sean Brewer, “How-To: Awesome Web Design with Twitter Bootstrap” http://saidigital.co/customize-twitter-bootstrap-4216/Wednesday, March 27, 2013 63
  64. 64. More Ash Tewari, “Bootstrap With LESS” http://blog.appliedis.com/2013/02/04/bootstrap-with- less/ Pat Shaughnessy, “Twitter Bootstrap, Less, and Sass: Understanding Your Options for Rails 3.1” http://rubysource.com/twitter-bootstrap-less-and-sass- understanding-your-options-for-rails-3-1Wednesday, March 27, 2013 64

×