Middleman 一小時完成你的專案原形

Middleman⼀一小時完成你的專案原形 http://rocodev.com

○ twitter.com/evenwu○ facebook.com/evenwu http://rocodev.com

○ Photoshop / Illustrator / Artwork...○ Dreamweaver or handcraft HTML / CSS...○ Back-end Code...○ Axure RP?...○ Keynote?... http://rocodev.com

http://rocodev.com

○ 畫假圖浪費你很多時間○ 打假字浪費你時間○ 排版要自己對齊○ 不能互動 http://rocodev.com

http://rocodev.com

○ HTML超難打 orz○ 寫CSS超幹○ 重複複製相同的東西○ 路徑問題○ 很難管理所有頁面 http://rocodev.com

http://rocodev.com

○ 醜○ 拉來拉去跟photoshop一樣累○ 一個小功能要點很久才做出來○ 無法體驗進階效果○ 有些東西根本做不出來... http://rocodev.com

http://rocodev.com

○ 先買 Rails101○ 設計師超難入門○ 建環境、假資料...○ 我只要快速設計阿～～～○ 很抱歉今天也沒有要洗腦這個 http://rocodev.com

http://rocodev.com

http://middlemanapp.com http://rocodev.com

○ 靜態網站產生器○ gem install middleman○ middleman init your_project_name http://rocodev.com

○ Layouts & Partials (喔耶不用重複copy html)○ Helpers (喔耶亂數資料、Rails整合方便)○ Haml (喔耶...?)○ Sass & Compass (喔耶...?) http://rocodev.com

<html><head> <title>text</title></head><body> <%= yield %></body></html> content http://rocodev.com

= partial ”partial_name” http://rocodev.com

ruby helper- 5.times do %li= link_to( @name, @url ) http://rocodev.com

lorem.sentence # ⼀一句廢話lorem.words 5 # 五個詭異單字lorem.wordlorem.date # 隨便給個日子lorem.name # 奇怪的名字lorem.first_namelorem.last_namelorem.email http://rocodev.com

Placeholder Images http://rocodev.com

lorem.image(300x400) #=> http://placehold.it/300x400lorem.image(300x400, :background_color => 333, :color => fff) #=> http://placehold.it/300x400/333/ffflorem.image(300x400, :random_color => true) #=> http://placehold.it/300x400/f47av7/9fbc34dlorem.image(300x400, :text => blah) #=> http://placehold.it/300x400&text=blah http://rocodev.com

http://rocodev.com

<html><head> %html <title>text</title> %head</head> %title text<body> %body <%= yield %> = yield</body></html> http://rocodev.com

<div> <div> <div> <div> %div <div> %div ... %div </div> %div </div> %div ... </div> </div></div> http://rocodev.com

<article> <header> <h2>標題</h2> %article </header> %header <div class=”content”> %h2 標題 <div class=”inner”> .content <%= @content %> .inner </div> = @content </div></article><article> <h2>標題</h2> %article <div class=”content”> %h2 標題 <%= @content %> .content </div> = @content</article> http://rocodev.com

http://compass-style.org http://rocodev.com

○ 使用語言 sass http://sass-lang.com○ 其實就跟 less 差不多好用○ 但加上 compass 後完全不一樣 http://rocodev.com

@import “compass”;@include global-reset; http://rocodev.com

scss lessa { a { color: blue; color: blue;} &:hover {a:hover { color: black; color: black; }} }compassa { @include link-colors(blue, black);} http://rocodev.com

compass css3 @include border-radius(5px); preﬁx -ms-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; $experimental-support-for-khtml: false $experimental-support-for-mozilla: false http://rocodev.com

inline block @include inline-block; @mixin inline-block { @if $legacy-support-for-ie { & { hack *display: inline; } } display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; hack @if $legacy-support-for-ie { *vertical-align: auto; } } http://rocodev.com

量⼀一下圖片寬高 orz... width: 200px; 高手都知道的普通技巧 orz... height: 200px; text-indent: -99999px; background: url(logo.png) no-repeat; compass@include replace-text-with-dimensions($img); 沒人在算寬高的啦XDDD http://rocodev.com

hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; } compass@include pie-clearfix; 沒人在記 ie 怎麼 hack 的啦 http://rocodev.com

http://rocodev.com

$base-font-size: 16px;$base-line-height: 24px;@import “compass”;h2 { @include adjust-font-size-to(24px); @include trailer(1,24px);} font-size: 1.375em; line-height: 2.182em; margin-bottom: 1.091em; 電腦幫你算啦！！！ http://rocodev.com

@import "icon/*.png";@include all-icon-sprites; 自動產生 (^o^).icon-sprite,.icon-delete,.icon-edit,.icon-new,.icon-save { background: url(/images/icon-s34fe0604ab.png) no-repeat; } 沒人在算座標的啦.icon-delete { background-position: 0 0; }.icon-edit { background-position: 0 -32px; }.icon-new { background-position: 0 -64px; }.icon-save { background-position: 0 -96px; } http://rocodev.com

http://pinterest-clone.heroku.com/ http://rocodev.com

http://rocodev.com

Thanks.http://rocodev.com http://rgba.tw Twitter @evenwu http://rocodev.com

Middleman 一小時完成你的專案原形

by Even Wu

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 17

Statistics