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

Rapid HTML

Garth Braithwaite
October 23, 2012
Design
14
3.5k

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

See All by Garth Braithwaite
Sometimes You Suck
garthdb
0
500
PhoneGap Needs Design
garthdb
0
150
Open Source Needs Design
garthdb
0
810
Creating Realistic Designs That Work and Won't Frustrate Your Developer
garthdb
1
130
Working with Design in Development
garthdb
1
76
How to Design
garthdb
1
630
Designers Can Open Source
garthdb
1
990
Resolution Independence
garthdb
0
83
Retina Ready
garthdb
3
6k

Other Decks in Design

See All in Design
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
Fleet Gas Station
joshtang
0
140
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
610
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
820
Credence
lratmansunu
0
460
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
350
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
210
Night Shift concept 9/15/2024
cpineda57
0
740
ito aya|Portfolio2409
itoaya116
0
260

Featured

See All Featured
Code Review Best Practice
trishagee
64
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Unsuck your backbone
ammeep
668
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
GitHub's CSS Performance
jonrohan
1030
460k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
A Modern Web Designer's Workflow
chriscoyier
693
190k
Ruby is Unlike a Banana
tanoku
97
11k
It's Worth the Effort
3n
183
27k
Building Adaptive Systems
keathley
38
2.3k

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None

  12. Goals

  13. None

  14. Design worflows suck Let’s make another!

  15. None

  16. Text! Illustrator Webkit

  17. Illustrator Webkit

  18. Designing out of context will always be open to misinterpretation

    and translation errors.
  19. None

  20. “But I’m not doing design”

  21. Dirty code Simple Available Interactive New

  22. Prototype index.html main.css app.js assets

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

  24. None

  25. IDE Starter Preprocessors Build Testing Hosting

  26. IDE

  27. Starter github.com/GarthDB/Starter

  28. Preprocessors

  29. Markup

  30. 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

  31. %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

  32. # 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

  33. Styles

  34. 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

  35. @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

  36. .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

  37. Script

  38. 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

  39. Build

  40. httpster Testing

  41. Hosting gh-pages

  42. END! Nailed it!