Rapid HTML Prototypes

brackets.io

Design worflows suck

Design worflows suck Let’s make another!

Text! Illustrator Webkit

Illustrator Webkit

Designing out of context will always be open to misinterpretation
and translation errors.

“But I’m not doing design”

Dirty code

Dirty code Simple

Dirty code Simple Available

Dirty code Simple Available Interactive

Dirty code Simple Available Interactive New

Prototype

Prototype index.html

Prototype index.html main.css

Prototype index.html main.css app.js

Prototype index.html main.css app.js assets

Examples

Examples garthdb.github.com/Brackets-UI-Prototypes

IDE Starter

IDE Starter Preprocessors

IDE Starter Preprocessors Build

IDE Starter Preprocessors Build Testing

IDE Starter Preprocessors Build Testing Hosting

Starter

Starter github.com/GarthDB/Starter

Preprocessors

Markup

body h1 Jade - node template engine #container if youAreUsingJade
p You are amazing else p Get on it! <body> <h1> Jade - node template engine</h1> <div id="container"> <p>You are amazing</p> </div> </body> Jade Code HTML

%body %h1 HAML - {markup haiku} #container - if youAreUsingHAML
%p You are amazing - else %p Get on it! <body> <h1> HAML - {markup haiku}</h1> <div id="container"> <p>You are amazing</p> </div> </body> HAML Code HTML

# This is an H1 * Red * Green *
Blue [an example](http://example.com/ "Title") inline link. <h1>This is an H1</h1> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> <p><a href="http://example.com/" title="Title">an example</a> inline link.</p> Markdown HTML

Styles

border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px
Helvetica, Arial, sans-serif & > a.button border-radius(5px) body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Stylus CSS

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
body { font: 12px Helvetica, Arial, sans-serif; & > a.button { @include border-radius(5px); } } body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } SASS CSS

.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;
} body { font: 12px Helvetica, Arial, sans-serif; & > a.button { .border-radius(5px); } } body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Less CSS

Script

class Animal constructor: (@name) -> move: (meters) -> alert @name
+ " moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 Coffeescript var Animal, Snake, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); Snake = (function(_super) { __extends(Snake, _super); function Snake() { return Snake.__super__.constructor.apply(this, arguments); } Snake.prototype.move = function() { alert("Slithering..."); return Snake.__super__.move.call(this, 5); }; return Snake; })(Animal); Javascript

Testing

httpster Testing

Hosting

Hosting gh-pages

END! Nailed it!

Rapid HTML Prototypes

Rapid HTML Prototypes

More Decks by Garth Braithwaite

Other Decks in Design

Featured

Transcript