Build a Better Bootstrap (Øredev 2014)

Af7acd01448753af3dfd648c3f5ea287?s=47 timgthomas
November 05, 2014

Build a Better Bootstrap (Øredev 2014)

Need the power of Bootstrap without the bulk? Come see how to build your own CSS framework! We'll start with a solid CSS foundation, add on some component scaffolding for your most common use cases, and top it off by discussing how to share your new web framework with your team. Grab your hard hat and come learn how to build a better Bootstrap!

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

November 05, 2014
Tweet

Transcript

  1. Build a Better Bootstrap Øredev 2014

  2. Tim G. Thomas

  3. frog design Austin, TX

  4. @timgthomas.com

  5. @timgthomas.com

  6. #betterbootstrap

  7. What’s wrong with Bootstrap? CSS Frameworks

  8. What’s wrong with Bootstrap? CSS Frameworks

  9. What’s wrong with Bootstrap? Relatively large CSS Frameworks

  10. What’s wrong with Bootstrap? CSS Frameworks

  11. What’s wrong with Bootstrap? Relatively large Similar appearance CSS Frameworks

  12. What’s wrong with Bootstrap? CSS Frameworks

  13. What’s wrong with Bootstrap? CSS Frameworks

  14. What’s wrong with Bootstrap? Relatively large Similar appearance Difficult to

    extend CSS Frameworks
  15. What’s wrong with Bootstrap? .panel-default > .panel-heading + .panel-collapse .panel-body

    CSS Frameworks Source: cssstats.com
  16. What’s wrong with Bootstrap? bit.ly/ore-bb-spec CSS Frameworks

  17. What’s wrong with Bootstrap? grep -r '!important' bootstrap.css | wc

    -l > 63 CSS Frameworks
  18. What’s wrong with Bootstrap? Relatively large Similar appearance Difficult to

    extend Not targeted for your needs CSS Frameworks
  19. What’s wrong with Bootstrap? bit.ly/ore-bb-fw CSS Frameworks

  20. What’s right with Bootstrap? CSS Frameworks

  21. What’s right with Bootstrap? CSS challenges CSS Frameworks

  22. What’s right with Bootstrap? CSS challenges Plugins for behavior CSS

    Frameworks
  23. What’s right with Bootstrap? CSS challenges Plugins for behavior Standard

    “API” CSS Frameworks
  24. What’s right with Bootstrap? CSS challenges Plugins for behavior Standard

    “API” CSS Frameworks
  25. The Box Model

  26. The Box Model Content

  27. The Box Model Content Padding Border Margin 500px ?

  28. The Box Model .content { box-sizing: border-box; } Content Padding

    Border Margin ? 500px
  29. The Box Model atozcss.com

  30. CSS Challenges

  31. Challenge: Columns

  32. Challenge: Columns Floated elements

  33. Content Challenge: Columns Content Content

  34. Challenge: Columns Content Content

  35. Challenge: Columns Content Content .content { float: left; }

  36. Content Challenge: Columns Content Content Container

  37. Challenge: Columns Content Content Container Content

  38. Content Challenge: Columns Content Content .content { float: left; }

    Container
  39. Content Challenge: Columns Content Content .container { overflow: hidden; }

    .content { float: left; } Container
  40. Challenge: Columns DEMO

  41. Challenge: Columns Revisited

  42. Challenge: Columns Revisited Floated elements

  43. Challenge: Columns Revisited Floated elements Table layout

  44. Challenge: Columns Revisited Content Content .container { display: table; }

    .content { display: table-cell; } Container
  45. Challenge: Columns Revisited DEMO

  46. Challenge: Complex Layouts

  47. Challenge: Complex Layouts Header Aside Main Footer

  48. Challenge: Complex Layouts Flexbox

  49. Challenge: Complex Layouts Content Content Container .container { display: flex;

    }
  50. Challenge: Complex Layouts Content Content Container .container { display: flex;

    } Content Content
  51. Challenge: Complex Layouts Content Content Container .container { display: flex;

    } .content-3 { flex-grow: 2; } Content Content
  52. Challenge: Complex Layouts Content Content Container .container { display: flex;

    flex-direction: column; } Content Content
  53. Challenge: Complex Layouts Content Content Container .container { display: flex;

    flex-direction: column; } .content-3 { order: 2; } .content-2 { order: 3; } Content Content
  54. Challenge: Complex Layouts bit.ly/ore-bb-flexbox

  55. Challenge: Complex Layouts DEMO

  56. Challenges: Questions?

  57. Behavior

  58. Behavior: Bootstrap getbootstrap.com

  59. Behavior: KendoUI kendoui.com

  60. Behavior: Stateful CSS timgthomas.com

  61. Behavior: Stateful CSS DEMO

  62. Behavior: Stateful CSS bit.ly/ore-bb-stateful

  63. Behavior: Web Components <div class="modal"> <header>(Modal Title)</header> <!-- body -->

    <footer> <button>Close</button> </footer> </div>
  64. Behavior: Web Components <modal-dialog title="(Modal Title)"> <!-- body --> </modal-dialog>

  65. Behavior: Polymer polymer-project.org

  66. Behavior: Ember {{modal-dialog title='(Modal Title)'}} <!-- body --> {{/modal-dialog}}

  67. Behavior: Ember 2.0 <modal-dialog title="(Modal Title)"> <!-- body --> </modal-dialog>

  68. Standard API

  69. Standard API: Approach Steal it

  70. Standard API: Column Definitions with CSS .column { box-sizing: border-box;

    } .col-md-1 { width: 10%; } .col-md-2 { width: 20%; } .col-md-3 { width: 30%; } .col-md-4 { width: 40%; } .col-md-5 { width: 50%; } .col-md-6 { width: 60%; } .col-md-7 { width: 70%; } .col-md-8 { width: 80%; } .col-md-9 { width: 90%; }
  71. Standard API: Column Definitions with SASS $columns: 10; @for $col

    from 1 through ($columns - 1) { .col-md-#{$col} { width: (100% / $columns) * $col; } }
  72. Standard API: Approach .panel-default > .panel-heading + .panel-collapse .panel-body

  73. Standard API: Approach Steal (some of) it

  74. Standard API: Approach Steal (some of) it Document it

  75. Standard API: Demo Site

  76. Standard API: StyleDocco jacobrask.github.io/styledocco

  77. Standard API: SMACSS smacss.com

  78. Review

  79. Thanks for coming! @timgthomas #betterbootstrap bit.ly/ore-bb-slides bit.ly/ore-bb-code