Greenfields and Front-End Style Guides

Presented at EmpireJS: http://2014.empirejs.org/

Transcript

1. Greenfields and Front-End Style Guides @markwunsch
2. Rent the Runway
3. Agenda • Surveying • Collaborating • Scaffolding
4. Prelude
5. Appendix • 24ways.org/2011/front-end-style-guides/ • 24ways.org/2012/design-systems/ • alistapart.com/article/creating-style-guides • bradfrostweb.com/blog/post/atomic-web-design/ • cf. Object Oriented CSS, SMACSS
6. www.jslint.com/lint.html Warning: JSLint will hurt your feelings.
7. Design Linter
8. Apollo in the Forge of Vulcan
 Diego Velázquez 1630
9. Wanderer above the Sea of Fog
 Caspar David Friedrich 1818 Surveying
11. HTMLElement.prototype.replicate = function () { var dupe = this.cloneNode(true), walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, null), dupeWalker = document.createTreeWalker(dupe, NodeFilter.SHOW_ELEMENT, null); ! function copyStyle(fromNode, toNode) { toNode.style.cssText = window.getComputedStyle(fromNode, null).cssText; return toNode; } ! copyStyle(this, dupe); ! while(walker.nextNode()) { copyStyle(walker.currentNode, dupeWalker.nextNode()); } ! return dupe; } gist.github.com/mwunsch/8830293
12. The Sleep of Reason Produces Monsters
 Francisco Goya 1799
13. ! evaluation = (s) -> el = document.querySelector s dupe = el.replicate() document.body = document.createElement "body" document.body.bgColor = "white" document.body.appendChild dupe [dupe.getBoundingClientRect(), el.outerHTML] ! ! page.open url, (status) -> page.includeJs replicateJs, () -> [rect, original] = page.evaluate evaluation, selector ! page.clipRect = rect console.log original page.render "element.png" phantom.exit()
14. <div class="grid-thumb" id="grid-thumb-mnl10"> <a href="/shop/designers/mlmoniquelhuillier_dresses/alicedress" class="grid-thumb-images" stylename="MNL10"> <img class="thumb-img dancing-image" alt="ML Monique Lhuillier - Alice Dress" src="https://cdn.rtrcdn.com/ sites/default/files/imagecache/270x/product_images/dress_monique_lhuiller_alice.jpg"> </a> <div class="thumb-info"> <a href="/shop/designers/mlmoniquelhuillier_dresses/alicedress" stylename="MNL10"> <div class="thumb-designer">ML Monique Lhuillier</div> <div class="thumb-name">Alice Dress</div> </a> <div class="thumb-retail">Retail $498</div> </div> <a href="/shop/designers/mlmoniquelhuillier_dresses/alicedress" stylename="MNL10"><div class="thumb-price thumb- price-default ">RENTAL $45</div></a> ! <div class="heart-wrapper"> <div class="thumb-heart favorite_add favorite-MNL10 s32-heart-lg-off" rel="stylename=MNL10" title="Add to favorites"></div> </div> <div class="thumb-admin-sizes" style="display:none;">Sizes: 2, 10, 0, 6, 4, 8, 14, 12</div> <div class="view-similar" style="display:none;"> <a class="standard-content-strong" href="/dress/similar/seed-MNL10">View more like this</a> </div> </div>
15. <div class="shortlist-style-display" data-style-name="BM79"> <div class="pricing-style-display" data-style-name="BM79"> <a href="/shop/designers/markjamesbadgleymischka_dresses/minisequinpixiedress" class="svg"> <div class="imagery dancing-ladies"> <object width="100%" data="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox= %220%200%201080%201620%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Ctitle%3EMark%20%2526amp;%20James%20by%20Badgley%20Mischka%20-%20Mini%20Sequin%20Pixie%20Dress%3C/title%3E%3Cstyle%3Esvg%7Bwidth:100%25;height:100%25;background-size: %20100%25%20100%25;background-repeat:%20no-repeat%7D@media%20screen%20%20and%20(max-width:183px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/product_teaser/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie.jpg')%7D%7D@media%20screen%20and%20(min-width:184px)%20and%20(max-width:270px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/270x/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie.jpg')%7D%7D@media%20screen%20and%20(min-width:271px)%20and%20(max-width:480px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/720y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie.jpg')%7D%7D@media%20screen%20and%20(min-width:481px)%20and%20(max-width:600px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/900y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie.jpg')%7D%7D@media%20screen%20and%20(min-width:601px)%20and%20(max-width:800px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/1200y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie.jpg')%7D%7D@media%20screen%20and%20(min-width:801px)%20%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/product_images/dress_mark-james_badgley_mischka_mini_sequin_pixie.jpg')%7D%7D%3C/style %3E%3C/svg%3E" type="image/svg+xml" alt="Mark &amp; James by Badgley Mischka - Mini Sequin Pixie Dress" class="dancing-image first"><!--[if lte IE 8]><img src="https://cdn.rtrcdn.com/sites/default/files/imagecache/900y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie.jpg" alt="Mark &amp; James by Badgley Mischka - Mini Sequin Pixie Dress" class="dancing-image first"><![endif]--></object> <object width="100%" data="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox= %220%200%201080%201620%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Ctitle%3EMark%20%2526amp;%20James%20by%20Badgley%20Mischka%20-%20Mini%20Sequin%20Pixie%20Dress%3C/title%3E%3Cstyle%3Esvg%7Bwidth:100%25;height:100%25;background-size: %20100%25%20100%25;background-repeat:%20no-repeat%7D@media%20screen%20%20and%20(max-width:183px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/product_teaser/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_detail1.jpg')%7D%7D@media%20screen%20and%20(min-width:184px)%20and%20(max-width:270px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/270x/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_detail1.jpg')%7D%7D@media%20screen%20and%20(min-width:271px)%20and%20(max-width:480px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/720y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_detail1.jpg')%7D%7D@media%20screen%20and%20(min-width:481px)%20and%20(max-width:600px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/900y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_detail1.jpg')%7D%7D@media%20screen%20and%20(min-width:601px)%20and%20(max-width:800px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/1200y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_detail1.jpg')%7D%7D@media%20screen%20and%20(min-width:801px)%20%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/product_images/dress_mark-james_badgley_mischka_mini_sequin_pixie_detail1.jpg')%7D %7D%3C/style%3E%3C/svg%3E" type="image/svg+xml" alt="Mark &amp; James by Badgley Mischka - Mini Sequin Pixie Dress" class="dancing-image not-first"><!--[if lte IE 8]><img src="https://cdn.rtrcdn.com/sites/default/files/imagecache/900y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_detail1.jpg" alt="Mark &amp; James by Badgley Mischka - Mini Sequin Pixie Dress" class="dancing-image not-first"><![endif]--></object> <object width="100%" data="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox= %220%200%201080%201620%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Ctitle%3EMark%20%2526amp;%20James%20by%20Badgley%20Mischka%20-%20Mini%20Sequin%20Pixie%20Dress%3C/title%3E%3Cstyle%3Esvg%7Bwidth:100%25;height:100%25;background-size: %20100%25%20100%25;background-repeat:%20no-repeat%7D@media%20screen%20%20and%20(max-width:183px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/product_teaser/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_over.jpg')%7D%7D@media%20screen%20and%20(min-width:184px)%20and%20(max-width:270px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/270x/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_over.jpg')%7D%7D@media%20screen%20and%20(min-width:271px)%20and%20(max-width:480px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/720y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_over.jpg')%7D%7D@media%20screen%20and%20(min-width:481px)%20and%20(max-width:600px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/900y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_over.jpg')%7D%7D@media%20screen%20and%20(min-width:601px)%20and%20(max-width:800px)%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/imagecache/1200y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_over.jpg')%7D%7D@media%20screen%20and%20(min-width:801px)%20%7Bsvg%7Bbackground-image:%20url('http://cdn.rtrcdn.com/sites/default/files/product_images/dress_mark-james_badgley_mischka_mini_sequin_pixie_over.jpg')%7D%7D %3C/style%3E%3C/svg%3E" type="image/svg+xml" alt="Mark &amp; James by Badgley Mischka - Mini Sequin Pixie Dress" class="dancing-image not-first"><!--[if lte IE 8]><img src="https://cdn.rtrcdn.com/sites/default/files/imagecache/900y/product_images/dress_mark- james_badgley_mischka_mini_sequin_pixie_over.jpg" alt="Mark &amp; James by Badgley Mischka - Mini Sequin Pixie Dress" class="dancing-image not-first"><![endif]--></object> </div> <div class="details"> <div class="designer standard-subhead-light"> Mark &amp; James by Badgley Mischka </div> <div class="style-name sexy-subhead-strong"> Mini Sequin Pixie Dress </div> <div class="retail disclaimer"> Retail $495 </div> <div class="price"> <span class="inverted standard-subhead">Rental $75</span> </div> </div> </a> <div class="favorite-wrapper heart-wrapper"> <div title="Add to favorites" class="favorite_add shortlist-favorite favorite-BM79 s32-heart-lg-off" rel="stylename=BM79&amp;nid="></div> </div> </div> ! <div class="available-style"><strong>All Sizes Available!</strong></div> <div class="partially-available-style"> <strong title="Size Scale: US_XXS-XL" class="simple- tooltip"> Available in <span class="sizes">size</span> <span class="simple-tooltip-indicator">*</span> </strong> </div> <div class="unavailable-style">Not Available</div> </div>
16. <div class="carousel-thumb" style="width: 118px; height: 171px; "> <a href="/shop/designers/bracelets_jewelry/ladydianabracelet" data- style="KJLBRC16"> <img alt="Kenneth Jay Lane" height="170" src="https://cdn.rtrcdn.com/sites/ default/files/imagecache/product_teaser/jewelry_bracelet_kenneth_jay_lane_lady_diana_0.jpg"> <div class="carousel-thumb-info"> <label class="designer-name">Kenneth Jay Lane</label> <label class="item-price">Rental $10</label> <!-- <div class="heart-wrapper"> <span title="Add to favorites" class="favorite_add favorite-KJLBRC16 s32-heart-lg-off" rel="stylename=KJLBRC16&amp;nid="></span> </div> --> </div> </a> </div>
17. The Barque of Dante
 Eugène Delacroix 1822 Collaborating
20. Separation of Light from Darkness
 Michelangelo 1512 Scaffolding
22. Encapsulation
23. <div class=“wrapper”> <div class=“ui-shibboleth clrfix”> <div> <div class=“hidden”>
24. Jenn $chiffer medium.com/cool-code-pal/b21bfc1f63c7 Web Components is a new type of HTML being written which allows the creation of visually rich widgets and templates without the use of C.S.S. and heavy JavaScript libraries like Swing and SpringJDBC. Not many people outside of the NYC JavaScript community know about this exciting new spec…
25. www.polymer-project.org
26. <select multiple>
27. <polymer-element name="my-select"> <template> <select> <option template repeat="{{options}}">{{}}</option> </select> </template> <script> Polymer('my-select', { ready: function() { this.options = []; } }); </script> </polymer-element> <script> var select = document.createElement('my-select'); select.options = ['One', 'Two', 'Three']; </script>
28. <rtr-product />
29. Statically Typed Design
30. Greenfields The Homecoming
 Alvan Fisher 1835
31. ^D