Build a Better Bootstrap

The influence of Twitter's Bootstrap framework is undeniable, but it brings with it a steep learning curve and a great many features the average web app simply doesn't need. In this session, you'll learn how easy it is to build your own web framework from the ground up, so you can tailor it to your—and only your—needs. 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 NDC Oslo 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? Relatively large CSS Frameworks
9. What’s wrong with Bootstrap? CSS Frameworks
10. What’s wrong with Bootstrap? Relatively large Similar appearance CSS Frameworks
11. What’s wrong with Bootstrap? CSS Frameworks
12. What’s wrong with Bootstrap? CSS Frameworks
13. What’s wrong with Bootstrap? Relatively large Similar appearance Difficult to extend CSS Frameworks
14. What’s wrong with Bootstrap? ! .panel-default ! > .panel-heading ! + .panel-collapse ! .panel-body CSS Frameworks Source: cssstats.com
15. What’s wrong with Bootstrap? bit.ly/ndc-bb-spec CSS Frameworks
16. What’s wrong with Bootstrap? grep -r '!important' bootstrap.css | wc -l ! > 43 CSS Frameworks
17. What’s wrong with Bootstrap? Relatively large Similar appearance Difficult to extend Not targeted for your needs CSS Frameworks
18. What’s wrong with Bootstrap? http:/ /bit.ly/ndc-bb-fw CSS Frameworks
19. Challenges
20. Tools
21. Tools: Style Tiles styletil.es
23. Tools: SASS sass-lang.com
24. Tools: SMACSS smacss.com
25. Tools: Harp harpjs.com
26. Tools: Harp DEMO
27. Tools: Broccoli github.com/broccolijs/broccoli
28. Challenges
29. Challenge: Page Layout
30. Challenge: Page Layout Floated elements
31. Challenge: Page Layout Content Content
32. Challenge: Page Layout Content Content .content { float: left; }
33. Challenge: Page Layout Content Content Container Container
34. Container Challenge: Page Layout Content Content .content { float: left; } Container
35. Container Challenge: Page Layout Content Content .container { overflow: hidden; } .content { float: left; } Container
36. Challenge: Page Layout DEMO
37. Challenge: Columns
38. Challenge: Columns Floated elements Box model adjustments
39. Challenge: Columns Padding Content Border Margin 500px ?
40. Challenge: Columns .content { box-sizing: border-box; } Padding Content Border Margin 500px ?
41. Challenge: Columns atozcss.com
42. Challenge: Columns DEMO
43. Challenge: Columns bit.ly/ndc-bb-cols1 bit.ly/ndc-bb-cols2
44. Challenge: Columns .column { box-sizing: border-box; } ! .column-1 { width: 10%; } .column-2 { width: 20%; } .column-3 { width: 30%; } .column-4 { width: 40%; } .column-5 { width: 50%; } .column-6 { width: 60%; } .column-7 { width: 70%; } .column-8 { width: 80%; } .column-9 { width: 90%; }
45. Challenge: Columns Floated elements Box model adjustments SASS functions
46. Challenge: Columns $columns: 10; ! @for $col from 1 through ($columns - 1) { .column-#{$col} { width: (100% / $columns) * $col; } }
47. Challenge: Columns bit.ly/ndc-bb-sass
48. Challenge: Multiple Screens
49. Challenge: Multiple Screens Floated elements Box model adjustments SASS functions Media queries
50. Challenge: Multiple Screens @media (max-width: 360px) { /* ... */ }
51. Challenge: Multiple Screens DEMO
52. Challenge: Forms
53. Challenge: Forms Floated elements Box model adjustments SASS functions Media queries Pseudoelements
54. Challenge: Forms Cantilever
55. Challenge: Forms input { visibility: hidden; } ! Cantilever
56. Challenge: Forms input { visibility: hidden; } input:before { /* ... */ } Cantilever
57. Challenge: Forms input { visibility: hidden; } input:before { /* ... */ } input:checked:after { /* ... */ } Cantilever ✔
58. Challenge: Forms DEMO
59. Challenges: Questions?
60. Behavior
61. Behavior: KendoUI kendoui.com
62. Behavior: Stateful CSS timgthomas.com
63. Behavior: Polymer polymer-project.org
64. Behavior: Polymer <div class="modal"> <header>(Modal Title)</header> <!-- body --> <footer> <button>Close</button> </footer> </div>
65. Behavior: Polymer <modal-dialog title="(Modal Title)"> <!-- body --> </modal-dialog>
66. Behavior: Ember {{modal-dialog title='(Modal Title)'}} <!-- body --> {{/modal-dialog}}
67. Visual Style
68. Visual Style: Adobe Edge Web Fonts edgewebfonts.adobe.com
69. Visual Style: Kuler kuler.adobe.com
70. Visual Style: Design Seeds design-seeds.com
71. Visual Style: Global Colors $olive: rgb(183, 195, 114); ! $headings: $olive; ! h1 { color: $headings; }
72. Visual Style: Global Colors $olive: rgb(183, 195, 114); ! $headings: $olive; ! h1 { color: $headings; } ! h2 { color: lighten($headings, 20%); }
73. Visual Style: Color Functions $headings ! lighten($headings, 20%) ! darken($headings, 20%) ! mix($terraCotta, $olive)
74. Sharing
75. Sharing: Style Tiles styletil.es
76. Sharing: StyleDocco jacobrask.github.io/styledocco
77. Sharing: Demo Site
78. Review
79. bit.ly/ndc-bb-slides bit.ly/ndc-bb-code
80. Thanks for coming! @timgthomas