Making Peace with Twitter Bootstrap

Click here to load reader

  • date post

    13-May-2015
  • Category

    Technology

  • view

    8.901
  • download

    1

Embed Size (px)

description

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

Transcript of Making Peace with Twitter Bootstrap

  • 1.Making Peace withTwitter Bootstrap Melanie ArcherHTML5 Developer ConferenceSan Francisco, CA April 2013Wednesday, March 27, 20131

2. Whos talking? Web developer @mejarc http://twobanjos.comWednesday, March 27, 2013 2 3. Whos talking?Slide URL: http://slidesha.re/Wuboo4Wednesday, March 27, 20133 4. Why bother? You will have to deal with itPhoto: Bundesarchiv, B 145 Bild-F024624-0004 / Grngholt, Detlef / CC-BY-SA, via Wikimedia CommonsWednesday, March 27, 2013 4 5. ProblemsBootstrap BloatWednesday, March 27, 2013 5 6. ProblemsBootstrap BloatBootstraps Class-itisWednesday, March 27, 20136 7. ProblemsBootstrap BloatBootstraps Class-itisBootstrap: inexibleWednesday, March 27, 20137 8. PROBLEMWednesday, March 27, 2013 8 9. Bootstrap BloatPhoto: http://www.ickr.com/photos/wanderlost63Wednesday, March 27, 2013 9 10. Bootstrap Bloat The problem mightnot be with BootstrapWednesday, March 27, 2013 10 11. FixWednesday, March 27, 2013 11 12. Strategies Customize download Customize @importWednesday, March 27, 2013 12 13. Downloading The least, rstWednesday, March 27, 201313 14. git clonehttps://github.com/twitter/bootstrap.gitWednesday, March 27, 2013 14 15. Using LESSDelete [email protected], March 27, 2013 15 16. cp bootstrap.less my-bootstrap.lessWednesday, March 27, 2013 16 17. gem twitter-bootstrap-railsWednesday, March 27, 2013 17 18. gem therubyracer gem less-rails gem twitter-bootstrap-railsWednesday, March 27, 201318 19. Usingboweror npmMore LESSWednesday, March 27, 201319 20. bower install bootstrapWednesday, March 27, 2013 20 21. cp components/bootstrap/bootstrap.less ...Wednesday, March 27, 201321 22. npm install twitter-bootstrap-nodeWednesday, March 27, 201322 23. cp vendor/bootstrap/less/bootstrap.less ...Wednesday, March 27, 2013 23 24. Using SASSDelete [email protected], March 27, 2013 24 25. gem bootstrap-sassWednesday, March 27, 2013 25 26. $ cd `bundle show bootstrap-sass`$ cd vendor/assets/stylesheets$ cp bootstrap.scss ...$ cp bootstrap/bootstrap.scss ...Wednesday, March 27, 2013 26 27. git clone https://github.com/jlong/sass- twitter-bootstrap.gitWednesday, March 27, 2013 27 28. yo webappWednesday, March 27, 2013 28 29. Would you like to include Twitter Bootstrap for Sass? (Y/n) YWednesday, March 27, 201329 30. Using InitializrWednesday, March 27, 201330 31. Wednesday, March 27, 2013 31 32. Wednesday, March 27, 2013 32 33. Treating Bootstrap BloatUse Bootstrap in LESS/SASS componentsCopy bootstrap.*Revise your copyWednesday, March 27, 201333 34. PROBLEMWednesday, March 27, 2013 34 35. Bootstraps Class-itisPhoto: http://www.ickr.com/photos/dukeyearlookWednesday, March 27, 2013 35 36. What you wantWednesday, March 27, 2013 36 37. ! !

! ! ! ! ! ! ! My Semantic Markup Fantasy! ! ! ! ! ! ! ! ! !
  • ! ! ! ! !
  • ! ! ! ! ! ! ! ! ! ! ! ! ! Article 1Wednesday, March 27, 201337 38. What you useWednesday, March 27, 201338 39. ! !
    ! ! !
    ! ! ! !
    ! ! ! ! ! ! My Presentational Markup Reality! ! ! !
    ! ! !
    ! ! !
    ! ! ! !
    ! ! ! ! !
    • ! ! ! ! ! !
    • ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Article 1Wednesday, March 27, 201339 40. FixWednesday, March 27, 2013 40 41. What you wantWednesday, March 27, 2013 41 42. ! !
      ! ! ! ! ! ! ! My Semantic Markup Fantasy! ! ! ! ! ! ! ! ! !
      • ! ! ! ! !
      • ! ! ! ! ! ! ! ! ! ! ! ! ! Article 1Wednesday, March 27, 201342 43. @import "mixins.less";Wednesday, March 27, 201343 44. Treating Bootstraps [email protected] Bootstrapsmixins or style rulesUse these rules for yourown selectorsWednesday, March 27, 201344 45. PROBLEMWednesday, March 27, 2013 45 46. Bootstrap: inexible?Photo: http://www.ickr.com/photos/walkingsfWednesday, March 27, 201346 47. The Plan Photo: http://www.ickr.com/photos/telstarWednesday, March 27, 2013 47 48. The ResultPhoto: http://www.ickr.com/photos/caseorganicWednesday, March 27, 201348 49. !importantWednesday, March 27, 201349 50. .alt { margin: 10px 5px; } .alt.exception { margin-top: 18px; } .alt.exception.just-this-one-time { margin-top: 0; }Wednesday, March 27, 201350 51. FixWednesday, March 27, 2013 51 52. New process No more PSDsWednesday, March 27, 2013 52 53. Wednesday, March 27, 2013 53 54. //// Variables// --------------------------------------------------// Global values// --------------------------------------------------// Grays// [email protected]: #000;@grayDarker:#222;@grayDark:#333;@gray:#555;Wednesday, March 27, 2013 54 55. builtwithbootstrap.comexpo.getbootstrap.comWednesday, March 27, 2013 55 56. Make peaceTake only what youneedWednesday, March 27, 201356 57. Make peace Use your class namesWednesday, March 27, 2013 57 58. Make peaceDesign with Bootstrap,not against itWednesday, March 27, 201358 59. Wednesday, March 27, 2013 59 60. ThanksBill FisherDave NugentMichael KnowlesAngel InokonWednesday, March 27, 2013 60 61. QuestionsWednesday, March 27, 2013 61 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, 201362 63. MoreMario Noble, Getting started with SCSS and Bootstraphttp://www.slideshare.net/marionoble/getting-started-with-scss-and-bootstrapSean Brewer, How-To: Awesome Web Design with TwitterBootstraphttp://saidigital.co/customize-twitter-bootstrap-4216/Wednesday, March 27, 201363 64. MoreAsh Tewari, Bootstrap With LESShttp://blog.appliedis.com/2013/02/04/bootstrap-with-less/Pat Shaughnessy, Twitter Bootstrap, Less, and Sass:Understanding Your Options for Rails 3.1http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1Wednesday, March 27, 201364