Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Prototyping 2 — Structure
Search
Florian Plank
May 08, 2012
Programming
2
210
Prototyping 2 — Structure
Close look at HAML, SASS + a Git & Github “crash tour”.
Florian Plank
May 08, 2012
Tweet
Share
More Decks by Florian Plank
See All by Florian Plank
Ready, set, immersion!
polarblau
0
170
Prototyping all the things
polarblau
2
170
CoffeeScript vs. ECMAScript 6
polarblau
5
3.5k
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
130
Enabling Design for a Complex Reality
polarblau
2
130
A primer on Content Security Policy
polarblau
1
400
Rails and the future of the open web
polarblau
3
120
Brief Ruby/Ruby on Rails intro
polarblau
3
180
Ruby Idioms
polarblau
3
570
Other Decks in Programming
See All in Programming
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
CursorはMCPを使った方が良いぞ
taigakono
1
180
GoのGenericsによるslice操作との付き合い方
syumai
3
690
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
440
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
NPOでのDevinの活用
codeforeveryone
0
310
XP, Testing and ninja testing
m_seki
3
200
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Agile that works and the tools we love
rasmusluckow
329
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Transcript
Prototyping in the browser
II / Structure
— Recap
Homebrew
Download Install Configure Update Remove brew install brew uninstall brew
upgrade brew list
Git * * More on Git/Github in a bit
## MAC OS .DS_Store ## TEXTMATE *.tmproj tmtags [...] ##
PROJECT::GENERAL .sass-cache coverage rdoc pkg ## PROJECT::SPECIFIC *.gem .rvmrc .bundle
RVM
Install Remove Sandbox rvm install rvm uninstall rvm use rvm
gemset
rvm_gemset_create_on_use_flag=1 rvm use ruby-1.9.3-p125@foobar
Ruby
module ViewHelpers # Calculate the years # for a copyright
def copyright_years(start_year) end_year = Date.today.year if start_year == end_year "\#{start_year}" else "\#{start_year} ↵ –\#{end_year}" end end # Add your own helpers below... end
Rubygems
source :rubygems gem 'serve' gem 'haml' gem 'sass'
Serve
http://localhost:4000/ http://localhost:4000/hello
http://localhost:4000/stylesheets/screen.css http://localhost:4000/ http://localhost:4000/images
Create Run Export serve serve create serve export
Layouts
!!! 5 %html %head %title= @title %link(rel="stylesheet" ↵ href="/ stylesheets/screen.css")
%body = yield
Layout Content yield:
Logic: Which layout?
GIT & GITHUB ”Crash Tour“
Version control
1 Revision 2 3 4 5 6 7 8 9
Revert
Branches
1 Merge 2 7 9 10 4 5 6 8
Branch
Collaboration
Remote Local Local User B User A
Workflow
git init git add . git status git commit -m
“Commit message”
git add path/file.rb git rm path/file.rb git mv path/file.rb
git remote add origin
[email protected]
:polarblau/foo.git git clone
[email protected]
:polarblau/foo.git git fetch
origin git merge origin git pull [...] git push
git checkout -b my-branch git checkout master
None
Github
None
HAML
%tag(attribute="value") Content <tag attribute="value">Content</tag>
Nesting
!!! 5 %html %head %title Hello HTML %body %p Hello
World!
%body %div %h1 Hello World! %div %h1 Hello World!
Attributes
#foo(title="Hello!") Hello World <div title="Hello">Hello World</div>
Classes & IDs
#foo Hello World <div id="foo">Hello World</div>
.foo Hello World <div class="foo">Hello World</div>
.foo.bar Hello World <div class="foo bar">Hello World</div>
#foo.foo.bar Hello World <div class="foo" class="foo bar">Hello World</div>
#foo(id="bar") Hello World
#foo(id="bar") Hello World <div class="foo_bar">Hello World</div>
Boolean attributes
%input(selected=true) <input selected />
Comments
/ A comment .foo Hello World <!-- A comment -->
<div class="foo">Hello World</div>
/ .foo Hello World <!-- <div class="foo">Hello World</div> -->
-# A comment .foo Hello World <div class="foo">Hello World</div>
Inline Ruby
- headline = "Hello World" %h1= headline <h1>Hello World</h1>
- id = 2 + 5 %h1(id="headline-#{id}") Headline <h1 id="headline-7">Hello
World</h1>
%ul - ["Huey", "Dewey", "Louie"].each do |name| %li= name <ul>
<li>Huey</li> <li>Dewey</li> <li>Louie</li> </ul>
Escaping HTML
%h1 &= "Adam & Eve" <h1>Adam & Eve</h1>
Partials (via Serve)
%footer = render "shared/footer" Layout Footer Page
Errors
SASS
None
SASS
h1, h2 font-size: 24px color: red
Nesting
Selectors
article font-size: 1em h1 font-size: 1.5em span color: red font-weight:
bold
article { font-size: 1em; } article h1 { font-size: 1.5em;
} article h1 span { color: red; font-weight: bold; }
Properties
article .foo border: left: width: 4px color: red
article .foo { border-left-width: 4px; border-left-color: red; }
Reference parent
article section &.foo color: red &.bar color: blue
article section.foo { color: red; } article section.bar { color:
blue; }
article section body.js & color: red body.no-js & color: blue
body.js article section { color: red; } body.no-js article section
{ color: blue; }
None
Variables
$headline-highlight: #f00 h1 span color: $headline-highlight
h1 span { color: red; }
Operations
$width: 100px div width: $width / 2
div { width: 50px; }
$width: 100px div width: $width / 2 - 20px
div { width: 30px; }
Functions
$headline-highlight: #f00 h1 color: lighten($headline-highlight, 50%)
h1 { color: #ff3333; }
Interpolation
$side: top div border-#{$side}: 3px solid red
div { border-top: 3px solid red; }
Mixins
=very-important font-weight: bold font-size: 24px color: red h1 +very-important
h1 { font-weight: bold; font-size: 24px; color: red; }
Arguments
=very-important($color: red) font-weight: bold font-size: 24px color: $color h1 +very-important
h2 +very-important(blue)
h1 { font-weight: bold; font-size: 24px; color: red; } h2
{ font-weight: bold; font-size: 24px; color: blue; }
Includes
@import "shared/colors"
Errors
None
FROM MOCKUP TO PROTOTYPE
WHAT THE FL*G?