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

Rapid HTML

Rapid HTML

Code is a design tool.

Build interactive prototypes to make friends and then bend them to your will.

Garth Braithwaite

October 23, 2012
Tweet

More Decks by Garth Braithwaite

Other Decks in Design

Transcript

  1. IDE

  2. 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
  3. %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
  4. # 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
  5. 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
  6. @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
  7. .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
  8. 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