Middleman 一小時完成你的專案原形
39
http://rocodev.com Middleman 小時完成你的專案原形
-
Upload
even-wu -
Category
Technology
-
view
7.187 -
download
2
description
介紹為何使用、如何使用強大的 Middleman 工具，快速建構你的專案原形 (rapid prototyping)
Transcript of Middleman 一小時完成你的專案原形
http://rocodev.com
Middleman⼀一小時完成你的專案原形
http://rocodev.com
自我介紹○ twitter.com/evenwu
○ facebook.com/evenwu
http://rocodev.com
Prototyping Tools○ Photoshop / Illustrator / Artwork...
○ Dreamweaver or handcraft HTML / CSS...
○ Back-end Code...
○ Axure RP?...
○ Keynote?...
http://rocodev.com
Photoshop?
http://rocodev.com
Photoshop○ 畫假圖浪費你很多時間
○ 打假字浪費你時間
○ 排版要自己對齊
○ 不能互動
http://rocodev.com
Handcraft
http://rocodev.com
Handcraft HTML/CSS○ HTML超難打 orz
○ 寫CSS超幹
○ 重複複製相同的東西
○ 路徑問題
○ 很難管理所有頁面
http://rocodev.com
Axure RP
http://rocodev.com
Axure RP○ 醜
○ 拉來拉去跟photoshop一樣累
○ 一個小功能要點很久才做出來
○ 無法體驗進階效果
○ 有些東西根本做不出來...
http://rocodev.com
傳說中... Rails 很快
http://rocodev.com
Rails○ 先買 Rails101
○ 設計師超難入門
○ 建環境、假資料...
○ 我只要快速設計阿～～～
○ 很抱歉今天也沒有要洗腦這個
http://rocodev.com
身為一個設計師也是可以寫點程式的
http://rocodev.com
Middleman○ 靜態網站產生器
○ gem install middleman
○ middleman init your_project_name
http://rocodev.com
Middleman○ Layouts & Partials (喔耶不用重複copy html)
○ Helpers (喔耶亂數資料、Rails整合方便)
○ Haml (喔耶...?)
○ Sass & Compass (喔耶...?)
http://rocodev.com
Layout
<html><head> <title>text</title></head><body> <%= yield %></body></html> content
http://rocodev.com
Partials
= partial ”partial_name”
http://rocodev.com
Ruby and Helpers
- 5.times do %li= link_to( @name, @url )
rubyhelper
http://rocodev.com
Lorem Helperslorem.sentence # ⼀一句廢話lorem.words 5 # 五個詭異單字lorem.word
lorem.date # 隨便給個日子
lorem.name # 奇怪的名字lorem.first_name
lorem.last_name
lorem.email
http://rocodev.com
Placeholder Images
lorem.image('300x400') #=> http://placehold.it/300x400
lorem.image('300x400', :background_color => '333', :color => 'fff')
#=> http://placehold.it/300x400/333/fff
lorem.image('300x400', :random_color => true)
#=> http://placehold.it/300x400/f47av7/9fbc34d
lorem.image('300x400', :text => 'blah')
#=> http://placehold.it/300x400&text=blah
http://rocodev.com
http://rocodev.com
<html><head> <title>text</title></head><body> <%= yield %></body></html>
%html %head %title text %body = yield
Haml
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> </header> <div class=”content”> <div class=”inner”> <%= @content %> </div> </div></article>
%article %header %h2 標題 .content .inner = @content
%article %h2 標題 .content = @content
<article> <h2>標題</h2> <div class=”content”> <%= @content %> </div></article>
http://rocodev.com
Compass○ 使用語言 sass http://sass-lang.com
○ 其實就跟 less 差不多好用
○ 但加上 compass 後完全不一樣
http://rocodev.com
Compass Basic
@import “compass”;
@include global-reset;
http://rocodev.com
a { color: blue;}a:hover { color: black;}
a { color: blue; &:hover { color: black; }}
a { @include link-colors(blue, black);}
compass
scss lessLinks
http://rocodev.com
@include border-radius(5px);compass css3
-ms-border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;-khtml-border-radius: 5px;
prefix
$experimental-support-for-khtml: false$experimental-support-for-mozilla: false
CSS3
http://rocodev.com
@include inline-block;inline block
@mixin inline-block { @if $legacy-support-for-ie { & { *display: inline; } } display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; @if $legacy-support-for-ie { *vertical-align: auto; } }
hack
hack
IE hack
http://rocodev.com
width: 200px;height: 200px;text-indent: -99999px;background: url(logo.png) no-repeat;
量⼀一下圖片寬高 orz...
高手都知道的普通技巧 orz...
@include replace-text-with-dimensions($img);
compass
沒人在算寬高的啦XDDD
圖片取代文字
http://rocodev.com
@include pie-clearfix;
compass
沒人在記 ie 怎麼 hack 的啦
.group { *zoom: 1;}.group:after { content: “”; display: table; clear: both;}
hack
hack
Clearfix
http://rocodev.com
內建 Vertical Rhythm!!
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;
電腦幫你算啦！！！
內建 Vertical Rhythm!!
http://rocodev.com
@import "icon/*.png";@include all-icon-sprites;
.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; }
沒人在算座標的啦
自動產生 (^o^)
Spriting with Compass
http://rocodev.com
http://pinterest-clone.heroku.com/
http://rocodev.com
單用 compass ^_^
http://rocodev.com
Thanks.
http://rocodev.com http://rgba.tw
Twitter @evenwu
