Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Future is in Pieces

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 80 Ad

The Future is in Pieces

Download to read offline

Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu

The Future is in Pieces
with Jonathan Snook

OVERVIEW
In the last few years, we’ve seen an emergence of a modular way of thinking about code and design. We’ve seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We’ll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks.

OBJECTIVE
To learn how modular design can improve our development process.

TARGET AUDIENCE
Front-end developers

FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Modular Design
Modular CSS
Naming Convention
State-based Design
Web Components

Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu

The Future is in Pieces
with Jonathan Snook

OVERVIEW
In the last few years, we’ve seen an emergence of a modular way of thinking about code and design. We’ve seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We’ll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks.

OBJECTIVE
To learn how modular design can improve our development process.

TARGET AUDIENCE
Front-end developers

FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Modular Design
Modular CSS
Naming Convention
State-based Design
Web Components

Advertisement
Advertisement

More Related Content

Advertisement

Similar to The Future is in Pieces (20)

More from FITC (20)

Advertisement

Recently uploaded (20)

The Future is in Pieces

  1. 1. Web Unleashed — September 16, 2015 The Future is in pieces
  2. 2. Wired Redesign (2002)
  3. 3. Simple Blog Designs
  4. 4. Coding like it’s 2003 #header h1, #header h2 { font-size:13px; font-weigh… } #header h1 { color: #680; float:right; padding-b…} #header h2 { float:left; padding:18px 20px; posi…} #header h2 img { position:absolute; left:0; top:0; } #header h2 a { text-decoration:none; color:#333; } #main h2 {text-transform:uppercase; font-weight:…} #main h2 a {text-decoration:none; color:#444;} #main h2 a:hover {color:#680;} #main .article.inside h1 { text-transform:uppercase;…} #comments .comment .meta .authorname { text-transfo… } #comments .comment .meta .commentnumber a { float: … }
  5. 5. Wait what? #comments .comment .meta .authorname { } #comments .comment .meta .commentnumber a { }
  6. 6. Wait what? #comments .comment .meta .authorname { } #comments .comment .meta .commentnumber a { }
  7. 7. Patterns
  8. 8. Identify and 
 Document Patterns
  9. 9. <div>
  10. 10. <div>
  11. 11. ? { }
  12. 12. Categorization
  13. 13. Categorization Base Layout Module State Theme
  14. 14. Sidebar Content Header
  15. 15. <div class="layout-header">
  16. 16. Customized List Button Tabs
  17. 17. <ul class="tabs">
  18. 18. Large Search Dark Small
  19. 19. <button class="button button-dark">
  20. 20. <div class=“modal”> <div class=“modal--header”></div> <div class=“modal--body”></div> <div class=“modal--footer”></div> </div>
  21. 21. Naming Convention ❖ .btn ❖ .btn-variation ❖ .btn--component ❖ .btn ❖ .btn--variation ❖ .btn__component
  22. 22. .modal > .btn
  23. 23. .modal > .btn
  24. 24. .btn-slim
  25. 25. All the things // Modules // --------------------------------------- @import "btn"; @import "img"; @import "layout"; @import "nav"; @import "tables"; @import "forms"; @import "section"; @import "fluid_container"; @import "table_filter"; @import "modal"; @import "dropdown"; @import "flags"; @import "progress"; @import "arrows"; @import "box";
  26. 26. All the things btn.mu img.mu layout.mu nav.mu table.mu forms.mu section.mu fluid_container.mu table_filter.mu modal.mu dropdown.mu flags.mu progress.mu arrows.mu box.mu
  27. 27. All the things <!-- btn.mu --> <button class="btn">{{button}}</button>
  28. 28. Components JSON CSSTemplate HTML JavaScriptl11n
  29. 29. React Components React.render( <Video onError={ onError } videoId={ videoId } /> );
  30. 30. React Components <div class='vimeo'> <div class='vimeo-loading'> <svg>...</svg> </div> <div class='vimeo-image'> <button type='button' class='vimeo-play-button'> <svg>...</svg> </button> </div> <div class='video-embed'> <iframe>...</iframe> </div> </div>
  31. 31. Web Components <gold-cc-cvc-input card-type="amex"> </gold-cc-cvc-input>
  32. 32. Web Components <style> :host { display: block; } iron-icon { margin-left: 10px; } </style> <template> <paper-input-container id="container" disabled$="[[disabled]]" no-label-float="[[noLabelFloat]]" always-float- label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" invalid="[[invalid]]"> <label hidden$=“[[!label]]">[[label]]</label> </template>
  33. 33. “I’m so alone.”
  34. 34. Give a hoot.
  35. 35. * + *
  36. 36. Give a hoot. Don’t pollute …the global namespace.
  37. 37. .btn + .btn .card + .card .input + .input
  38. 38. .input + .btn ?
  39. 39. Helpers
  40. 40. .layout-spacer {} .m5 / .m10 / .mi6
  41. 41. Media queries killed the modular star
  42. 42. If Module A in Module B in Layout C Then I’m fucked.
  43. 43. If I have this much room, 
 do this.
  44. 44. Element Queries
  45. 45. Element Queries
  46. 46. “Element Query” declarations in JavaScript or in HTML, not in CSS
  47. 47. ❖ I honestly didn't think you could even USE emoji in variable names. Or that there were so many different crying ones.
  48. 48. <div class="😭">help me</div> .😭 { color: red; font-size: 100px; }
  49. 49. Create Standards 
 For Your CSS
  50. 50. Code Review Your CSS
  51. 51. Styleguides.io
  52. 52. Patternlab.io
  53. 53. Shopify Style Guide
  54. 54. Patterns ❖ Create a conversation around what exceptions should or should not exist ❖ Create a conversation around what components should or should not exist
  55. 55. The Future is in Pieces ❖ Move towards composable UIs ❖ Ensure your modules are self-contained ❖ Frameworks like React are making this easier ❖ Communicate!

×