Slide 1
Slide 1 text
Greenfields
and Front-End Style Guides
@markwunsch
Slide 2
Slide 2 text
Rent the Runway
Slide 3
Slide 3 text
Agenda
• Surveying
• Collaborating
• Scaffolding
Slide 4
Slide 4 text
Prelude
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
www.jslint.com/lint.html
Warning: JSLint will hurt your feelings.
Slide 7
Slide 7 text
Design Linter
Slide 8
Slide 8 text
Apollo in the Forge of Vulcan
Diego Velázquez 1630
Slide 9
Slide 9 text
Wanderer above the Sea of Fog
Caspar David Friedrich 1818
Surveying
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
The Sleep of Reason Produces Monsters
Francisco Goya 1799
Slide 13
Slide 13 text
!
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()
Slide 14
Slide 14 text
Slide 15
Slide 15 text
!
All Sizes Available!
Available in size
*
Not Available
Slide 17
Slide 17 text
The Barque of Dante
Eugène Delacroix 1822
Collaborating
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Separation of Light from Darkness
Michelangelo 1512
Scaffolding
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Encapsulation
Slide 23
Slide 23 text
Slide 24
Slide 24 text
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…
Slide 25
Slide 25 text
www.polymer-project.org
Slide 26
Slide 26 text
Slide 27
Slide 27 text
{{}}
Polymer('my-select', {
ready: function() { this.options = []; }
});
var select = document.createElement('my-select');
select.options = ['One', 'Two', 'Three'];
Slide 28
Slide 28 text
Slide 29
Slide 29 text
Statically Typed Design
Slide 30
Slide 30 text
Greenfields
The Homecoming
Alvan Fisher 1835
Slide 31
Slide 31 text
^D