Frameworks of Tomorrow UDE 2013

Bc4ab438f7a4ce1c406aadc688427f2c?s=47 Mark Otto
November 21, 2013

Frameworks of Tomorrow UDE 2013

A look back at how we got to the large comprehensive frameworks today through simple tools of five years ago, and more importantly, where those tools are leading us again for frameworks.

Bc4ab438f7a4ce1c406aadc688427f2c?s=128

Mark Otto

November 21, 2013
Tweet

Transcript

  1. 1.
  2. 3.
  3. 4.
  4. 5.

    B

  5. 9.
  6. 12.

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

    ! html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
  7. 13.
  8. 14.
  9. 15.
  10. 17.
  11. 18.
  12. 19.
  13. 20.
  14. 21.
  15. 28.
  16. 30.
  17. 31.
  18. 32.
  19. 34.
  20. 35.
  21. 37.
  22. 38.
  23. 39.
  24. 40.
  25. 42.
  26. 43.
  27. 44.

    // Dismiss a modal <button class=“close” data-dismiss=“modal”>
 &times;
 </button> !

    // Or an alert <button class=“close” data-dismiss=“alert”>
 Dismiss
 </button> 1 2 3 4 5 6 7 8
  28. 47.

    Breaking interfaces down into patterns has been immensely helpful in

    learning and re- evaluating the best possible code to implement them. — Dan Cedarholm, on Pears https://github.com/simplebits/Pears
  29. 48.
  30. 49.
  31. 50.
  32. 51.
  33. 52.
  34. 55.
  35. 56.

    // Media query on individual components // as envisioned by

    @jon_neal. // // github.com/jonathantneal/MediaClass ! .widget:media(max-width: 300px) { font-size: 14px; background-color: red; } ! .widget:media(max-width: 728px) { font-size: 12px; background-color: blue; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  36. 58.
  37. 59.