Download as PDF, PPTX
Middleman 一小時完成你的專案原形
- 1. Middleman ⼀一小時完成你的專案原形 http://rocodev.com
- 2. ○ twitter.com/evenwu ○ facebook.com/evenwu http://rocodev.com
- 3. ○ Photoshop /Illustrator / Artwork... ○ Dreamweaver or handcraft HTML / CSS... ○ Back-end Code... ○ Axure RP?... ○ Keynote?... http://rocodev.com
- 4.
- 5. ○ 畫假圖浪費你很多時間 ○ 打假字浪費你時間 ○排版要自己對齊 ○ 不能互動 http://rocodev.com
- 6.
- 7. ○ HTML超難打 orz ○寫CSS超幹 ○ 重複複製相同的東西 ○ 路徑問題 ○ 很難管理所有頁面 http://rocodev.com
- 8.
- 9. ○ 醜 ○ 拉來拉去跟photoshop一樣累 ○一個小功能要點很久才做出來 ○ 無法體驗進階效果 ○ 有些東西根本做不出來... http://rocodev.com
- 10.
- 11. ○ 先買 Rails101 ○設計師超難入門 ○ 建環境、假資料... ○ 我只要快速設計阿～～～ ○ 很抱歉今天也沒有要 洗腦這個 http://rocodev.com
- 12.
- 13. http://middlemanapp.com http://rocodev.com
- 14. ○ 靜態網站產生器 ○ geminstall middleman ○ middleman init your_project_name http://rocodev.com
- 15. ○ Layouts &Partials (喔耶不用重複copy html) ○ Helpers (喔耶亂數資料、Rails整合方便) ○ Haml (喔耶...?) ○ Sass & Compass (喔耶...?) http://rocodev.com
- 16. <html> <head> <title>text</title> </head> <body> <%= yield %> </body> </html> content http://rocodev.com
- 17. = partial ”partial_name” http://rocodev.com
- 18. ruby helper - 5.times do %li= link_to( @name, @url ) http://rocodev.com
- 19. lorem.sentence # ⼀一句廢話 lorem.words 5 # 五個詭異單字 lorem.word lorem.date # 隨便給個日子 lorem.name # 奇怪的名字 lorem.first_name lorem.last_name lorem.email http://rocodev.com
- 20. Placeholder Images http://rocodev.com
- 21. 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
- 22.
- 23. <html> <head> %html <title>text</title> %head </head> %title text <body> %body <%= yield %> = yield </body> </html> http://rocodev.com
- 24. <div> <div> <div> <div> %div <div> %div ... %div </div> %div </div> %div ... </div> </div> </div> http://rocodev.com
- 25. <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
- 26. http://compass-style.org http://rocodev.com
- 27. ○ 使用語言 sasshttp://sass-lang.com ○ 其實就跟 less 差不多好用 ○ 但加上 compass 後完全不一樣 http://rocodev.com
- 28. @import “compass”; @include global-reset; http://rocodev.com
- 29. 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
- 30. compass css3 @include border-radius(5px); prefix -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
- 31. 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
- 32. 量⼀一下圖片寬高 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
- 33. hack .group{ *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; } compass @include pie-clearfix; 沒人在記 ie 怎麼 hack 的啦 http://rocodev.com
- 34.
- 35. $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
- 36. @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
- 37. http://pinterest-clone.heroku.com/ http://rocodev.com
- 38.
- 39. Thanks. http://rocodev.com http://rgba.tw Twitter @evenwu http://rocodev.com