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
   

   View Slide

2. Tim G. Thomas
   

   View Slide

3. frog design Austin, TX
   

   View Slide

4. @timgthomas.com
   

   View Slide

5. @timgthomas.com
   

   View Slide

6. #betterbootstrap
   

   View Slide

7. What’s wrong with Bootstrap?
   CSS Frameworks
   

   View Slide

8. What’s wrong with Bootstrap?
   CSS Frameworks
   

   View Slide

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

   View Slide

10. What’s wrong with Bootstrap?
    CSS Frameworks
    

    View Slide

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

    View Slide

12. What’s wrong with Bootstrap?
    CSS Frameworks
    

    View Slide

13. What’s wrong with Bootstrap?
    CSS Frameworks
    

    View Slide

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

    View Slide

15. What’s wrong with Bootstrap?
    .panel-default
    > .panel-heading
    + .panel-collapse
    .panel-body
    CSS Frameworks
    Source: cssstats.com
    

    View Slide

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

    View Slide

17. What’s wrong with Bootstrap?
    grep -r '!important' bootstrap.css | wc -l
    > 63
    CSS Frameworks
    

    View Slide

18. What’s wrong with Bootstrap?
    Relatively large
    Similar appearance
    Difficult to extend
    Not targeted for your needs
    CSS Frameworks
    

    View Slide

19. What’s wrong with Bootstrap?
    bit.ly/ore-bb-fw
    CSS Frameworks
    

    View Slide

20. What’s right with Bootstrap?
    CSS Frameworks
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. The Box Model
    

    View Slide

26. The Box Model
    Content
    

    View Slide

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

    View Slide

28. The Box Model
    .content { box-sizing: border-box; }
    Content
    Padding
    Border
    Margin
    ?
    500px
    

    View Slide

29. The Box Model
    atozcss.com
    

    View Slide

30. CSS Challenges
    

    View Slide

31. Challenge: Columns
    

    View Slide

32. Challenge: Columns
    Floated elements
    

    View Slide

33. Content
    Challenge: Columns
    Content Content
    

    View Slide

34. Challenge: Columns
    Content
    Content
    

    View Slide

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

    View Slide

36. Content
    Challenge: Columns
    Content Content
    Container
    

    View Slide

37. Challenge: Columns
    Content
    Content
    Container
    Content
    

    View Slide

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

    View Slide

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

    View Slide

40. Challenge: Columns
    DEMO
    

    View Slide

41. Challenge: Columns Revisited
    

    View Slide

42. Challenge: Columns Revisited
    Floated elements
    

    View Slide

43. Challenge: Columns Revisited
    Floated elements
    Table layout
    

    View Slide

44. Challenge: Columns Revisited
    Content Content
    .container { display: table; }
    .content { display: table-cell; }
    Container
    

    View Slide

45. Challenge: Columns Revisited
    DEMO
    

    View Slide

46. Challenge: Complex Layouts
    

    View Slide

47. Challenge: Complex Layouts
    Header
    Aside Main
    Footer
    

    View Slide

48. Challenge: Complex Layouts
    Flexbox
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. Challenge: Complex Layouts
    bit.ly/ore-bb-flexbox
    

    View Slide

55. Challenge: Complex Layouts
    DEMO
    

    View Slide

56. Challenges: Questions?
    

    View Slide

57. Behavior
    

    View Slide

58. Behavior: Bootstrap
    getbootstrap.com
    

    View Slide

59. Behavior: KendoUI
    kendoui.com
    

    View Slide

60. Behavior: Stateful CSS
    timgthomas.com
    

    View Slide

61. Behavior: Stateful CSS
    DEMO
    

    View Slide

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

    View Slide

63. Behavior: Web Components
    
    (Modal Title)
    
    
    Close
    
    
    

    View Slide

64. Behavior: Web Components
    
    
    
    

    View Slide

65. Behavior: Polymer
    polymer-project.org
    

    View Slide

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

    View Slide

67. Behavior: Ember 2.0
    
    
    
    

    View Slide

68. Standard API
    

    View Slide

69. Standard API: Approach
    Steal it
    

    View Slide

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%; }
    

    View Slide

71. Standard API: Column Definitions with SASS
    $columns: 10;
    @for $col from 1 through ($columns - 1) {
    .col-md-#{$col} {
    width: (100% / $columns) * $col;
    }
    }
    

    View Slide

72. Standard API: Approach
    .panel-default
    > .panel-heading
    + .panel-collapse
    .panel-body
    

    View Slide

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

    View Slide

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

    View Slide

75. Standard API: Demo Site
    

    View Slide

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

    View Slide

77. Standard API: SMACSS
    smacss.com
    

    View Slide

78. Review
    

    View Slide

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

    View Slide