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
150
Prototyping all the things
polarblau
2
130
CoffeeScript vs. ECMAScript 6
polarblau
5
3.2k
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
95
Enabling Design for a Complex Reality
polarblau
2
110
A primer on Content Security Policy
polarblau
1
330
Rails and the future of the open web
polarblau
3
100
Brief Ruby/Ruby on Rails intro
polarblau
3
150
Ruby Idioms
polarblau
3
540
Other Decks in Programming
See All in Programming
LPIXEL×CADDi_kaerururu
kaerururu
3
300
Open Source Swiftc Workshop
kitasuke
1
290
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
140
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
290
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
25
7.6k
品質が高いコードって何?Rev2.1
ickx
1
490
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
180
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
790
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
770
Featured
See All Featured
Embracing the Ebb and Flow
colly
78
4.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Cult of Friendly URLs
andyhume
73
5.6k
Raft: Consensus for Rubyists
vanstee
130
6.2k
KATA
mclloyd
14
11k
Six Lessons from altMBA
skipperchong
19
2.9k
How to Ace a Technical Interview
jacobian
272
22k
Happy Clients
brianwarren
91
6.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
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?