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

Greenfields and Front-End Style Guides

Greenfields and Front-End Style Guides

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

Mark Wunsch

May 05, 2014
Tweet

More Decks by Mark Wunsch

Other Decks in Programming

Transcript

  1. 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
  2. ! 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()
  3. <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>
  4. <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>
  5. <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>
  6. 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…
  7. <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>
  8. ^D