Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build a Better Bootstrap

Af7acd01448753af3dfd648c3f5ea287?s=47 timgthomas
June 04, 2014

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!

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

June 04, 2014
Tweet

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

  22. None
  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