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
160
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
380
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
AWS Step Functions は CDK で書こう!
konokenj
4
280
CloudNativePGを布教したい
nnaka2992
0
120
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
Unity Android XR入門
sakutama_11
0
180
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
Ça bouge du côté des animations CSS !
goetter
2
150
Learning Kotlin with detekt
inouehi
1
140
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
900
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
490
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
How STYLIGHT went responsive
nonsquared
98
5.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Code Reviewing Like a Champion
maltzj
521
39k
Facilitating Awesome Meetings
lara
52
6.2k
Unsuck your backbone
ammeep
669
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Cult of Friendly URLs
andyhume
78
6.2k
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?