Rapid HTML

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 Simple Available Interactive New

Prototype index.html main.css app.js assets

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

IDE Starter Preprocessors Build Testing Hosting

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

httpster Testing

Hosting gh-pages

END! Nailed it!

Rapid HTML

Rapid HTML

Garth Braithwaite

More Decks by Garth Braithwaite

Other Decks in Design

Featured

Transcript

Goals

Design worflows suck Let’s make another!

Text! Illustrator Webkit

Illustrator Webkit

Designing out of context will always be open to misinterpretation

“But I’m not doing design”

Dirty code Simple Available Interactive New

Prototype index.html main.css app.js assets

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

IDE Starter Preprocessors Build Testing Hosting

IDE

Starter github.com/GarthDB/Starter

Preprocessors

Markup

body h1 Jade - node template engine #container if youAreUsingJade

%body %h1 HAML - {markup haiku} #container - if youAreUsingHAML

# This is an H1 * Red * Green *

Styles

border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }

.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;

Script

class Animal constructor: (@name) -> move: (meters) -> alert @name

Build

httpster Testing

Hosting gh-pages

END! Nailed it!