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!

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