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
140
CoffeeScript vs. ECMAScript 6
polarblau
5
3.3k
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
110
Enabling Design for a Complex Reality
polarblau
2
110
A primer on Content Security Policy
polarblau
1
340
Rails and the future of the open web
polarblau
3
110
Brief Ruby/Ruby on Rails intro
polarblau
3
150
Ruby Idioms
polarblau
3
540
Other Decks in Programming
See All in Programming
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
140
Competitionsだけじゃない! Kaggle Notebooks Grandmasterのすすめ
corochann
2
510
"Swarming" をコンセプトに掲げるアジャイルチームのベストプラクティス
boykush
2
250
App Router 悲喜交々
quramy
7
380
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
190
"noncopyable types" の使いどころについて考えてみた
andpad
0
160
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
540
RDBの世界をぬりかえていくモデルグラフDB〜truncus graphによるモデルファースト開発〜
jurabi
0
170
Quarto Clean Theme
nicetak
0
220
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
270
クラウドサービスの 利用コストを削減する技術 - 円安の真南風を感じて -
pyama86
3
400
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
240
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
300
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Raft: Consensus for Rubyists
vanstee
136
6.6k
The Invisible Side of Design
smashingmag
297
50k
Debugging Ruby Performance
tmm1
73
12k
BBQ
matthewcrist
85
9.2k
A Philosophy of Restraint
colly
203
16k
Done Done
chrislema
181
16k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
590
Fireside Chat
paigeccino
32
3k
How To Stay Up To Date on Web Technology
chriscoyier
787
250k
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?