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

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

http://rocodev.com

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

http://rocodev.com

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

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.word

lorem.date # 隨便給個日子

lorem.name # 奇怪的名字
lorem.first_name
lorem.last_name

lorem.email

http://rocodev.com

Placeholder Images

http://rocodev.com

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

<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 less
a { a {
color: blue; color: blue;
} &:hover {
a:hover { color: black;
color: black; }
} }

compass
a {
@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

$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

Thanks.

http://rocodev.com http://rgba.tw

Twitter @evenwu

http://rocodev.com

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

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

More from Even Wu

More from Even Wu (6)

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