Downloaded 54 times
Uploaded byEven Wu
Rapid Prototyping
This document discusses rapid prototyping tools and techniques using Compass and Middleman. It provides examples of how Compass can automate common CSS tasks like prefixing, clearfixes, image replacement, vertical rhythm, sprites, and more. This allows designers and developers to prototype faster without having to write repetitive CSS code.
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Rapid Prototyping
- 1. Rapid Prototyping Even Wu
- 2. • 30~40 minsTalk • 20~30 mins Q&A + Live Demo
- 3.
- 4.
- 5. Prototyping Tools • Photoshop/ Illustrator / Artwork... • Dreamweaver or handcraft HTML / CSS... • Back-end Code... • Axure RP?... • Keynote?...
- 6. 很久以前... BOSS PM 翻譯官 Designer Developer
- 7. 今天 co-work Designer Developer 產品
- 8. 今天 老闆? 老闆?...XD co-work Designer Developer 產品
- 9.
- 10. 流程的改變 • Logo &Branding • Design Colors • Design partials • Design layouts • Fonts & Rhythm
- 11.
- 14. widget widget
- 17. 工具的改變 • ruby • middleman •sass/compass framework • haml markup
- 19. Middleman middleman init new_project_name . !""config.rb #"" source !"" index.html.haml !"" javascripts $ #"" all.js !"" layout.haml #"" stylesheets #"" all.css.scss
- 20. Middleman css, js, img... 路徑, 壓縮方式... . haml !"" config.rb #"" source !"" index.html.haml !"" javascripts $ #"" all.js scss / compass !"" layout.haml #"" stylesheets #"" all.css.scss
- 21. Middleman = partial ”partial_name” ruby rails helper - 5.times do %li= link_to( @name, @url ) <html> <head> <title>text</title> </head> content <body> <%= yield %> </body> </html>
- 23. <html> <head> %html <title>text</title> %head </head> %title text <body> %body <%= yield %> = yield </body> </html>
- 24. <div class=”book”> <div> <h2>text</h2> .book </div> %div <article> %h2 text <div class=”inner”> %article <%= yield %> .inner </div> = yield </article> </div>
- 25. <div class=”book”> <div> <h2>text</h2> .book </div> %div <article> %h2 text <div class=”inner”> %article <%= yield %> .inner </div> = yield </article> </div> <div class=”book”> <h2>text</h2> .book <article> %h2 text <%= yield %> %article </article> = yield </div>
- 27. compass • 使用語言 sasshttp://sass-lang.com 其實就跟 less 差不多好用 • 但加上 compass 後完全不⼀一樣
- 28. compass basic @import “compass”; @includeglobal-reset;
- 29. • Logo &Branding • Design Colors • Design partials • Design layouts • Fonts & Rhythm
- 30. blog design partials #"" stylesheets !"" _article.scss !"" _formalize.sass !"" _global.scss !"" _icon.scss !"" _layout.scss hacks !"" _setting.scss !"" _superfish.scss import them... !"" ie.css.scss #"" main.css.scss
- 31. #"" stylesheets !"" _ggs.scss !"" _setup.scss !"" ggs $ !"" _border-box.scss $ !"" _default-style.scss import media... $ !"" _mixins.scss $ !"" _prettify.scss $ !"" _responsive-layout.scss $ !"" _type-size-presets.scss $ #"" media $ !"" _desktop-wide.scss $ !"" _desktop-wide2.scss $ !"" _desktop-wide3.scss $ !"" _desktop.scss $ !"" _mobile-wide.scss $ !"" _mobile.scss $ !"" _tablet-wide.scss $ #"" _tablet.scss #"" main.css.scss
- 32.
- 33. css scss a { a { color: blue; color: blue; } &:hover { a:hover { color: black; color: black; } } &:visited { a:visited { color: blue; color: blue; } } } compass a { @include link-colors(blue, black); }
- 34. 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
- 35. inline block @include inline-block; @mixin inline-block { @if $legacy-support-for-ie { & { hack *display: inline; } } display: -moz-inline-box; hack -moz-box-orient: vertical; display: inline-block; vertical-align: middle; hack @if $legacy-support-for-ie { *vertical-align: auto; } }
- 36. 圖片取代文字 量⼀一下圖片寬高 orz... width: 439px; 高手都知道的普通技巧 orz... height: 276px; text-indent: -99999px; background: url(logo.png) no-repeat; clearfix hack .group { *zoom: 1; hack } .group:after { content: “”; display: table; clear: both; }
- 37. 圖片取代文字 @include replace-text-with-dimensions($img); 沒人在算寬高的啦XDDD clearfix @include pie-clearfix; or @include clearfix; 沒人在記 ie 怎麼 hack 的啦
- 38.
- 39. 內建 Vertical Rhythm!! $base-font-size:16px; $base-line-height: 24px; @import “compass”; h2 { @include adjust-font-size-to(24px); } font-size: 0.938em; line-height: 1.6em; 電腦幫你算啦！！！
- 40. Spriting with Compass @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; }
- 41.
- 42.
- 43.
- 44.
- 45. Thanks. http://rocodev.com http://rgba.tw Twitter @evenwu