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
200
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
160
Prototyping all the things
polarblau
2
150
CoffeeScript vs. ECMAScript 6
polarblau
5
3.4k
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
120
Enabling Design for a Complex Reality
polarblau
2
120
A primer on Content Security Policy
polarblau
1
360
Rails and the future of the open web
polarblau
3
110
Brief Ruby/Ruby on Rails intro
polarblau
3
160
Ruby Idioms
polarblau
3
550
Other Decks in Programming
See All in Programming
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
fs2-io を試してたらバグを見つけて直した話
chencmd
0
230
MCP with Cloudflare Workers
yusukebe
2
220
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
선언형 UI에서의 상태관리
l2hyunwoo
0
150
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
190
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
300
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
ドメインイベント増えすぎ問題
h0r15h0
1
230
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210
CSC305 Lecture 25
javiergs
PRO
0
130
talk-with-local-llm-with-web-streams-api
kbaba1001
0
180
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Speed Design
sergeychernyshev
25
670
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Invisible Side of Design
smashingmag
298
50k
Why Our Code Smells
bkeepers
PRO
335
57k
Side Projects
sachag
452
42k
A better future with KSS
kneath
238
17k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
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?