早點回家的工具

Transcript

1. 早點下班的工具 Kytu @ CCSP 2012F
2. 大綱 讓 CSS 寫得更快 – LESS、SCSS 讓 SITE 建立得更快 – Bootstrap、Foundation 補充 – How to build a beautiful site
3. 如何讓 CSS 寫得更快? 每天練寫一萬行 – 生命該浪費在美好的事物上 寫少行代表多行 – Compile into CSS
4. Solution! LESS http://lesscss.org/ SCSS/SASS http://sass-lang.com/ Stylus http://learnboost.github.com/stylus/ 別擔心他們都差不多XD
6. LESS Compiler Nodejs module ( 最常用 ) https://npmjs.org/package/less-middleware Other server-side compiler ( Such as Winless ) http://winless.org/ Client-side Compile ( use Javascript ) http://lesscss.org/ Less.js
7. Nodejs Module Usage 新建專案時 express -css less {專案名稱} 已有專案 npm install less-middleware 在 app.configure 裡 app.use(require('less-middleware')({ src: __dirname + '/public' }));
8. Let’s Learn it online! (LESS) 官方 document http://lesscss.org/ Online LESS Compiler ( 練習教學用) http://winless.org/online-less-compiler
9. How it works it Nodejs? 檢查是否更新，立即compile Live Demo
11. SCSS / SASS Compiler Compass.app http://compass.handlino.com/ Fire.app http://fireapp.handlino.com/ Ruby Gem
12. SCSS / SASS 官方 document http://sass-lang.com/ Try Sass Online ( 練習用) http://sass-lang.com/try.html
14. Compass http://compass-style.org SCSS 的 library 提供 CSS3 Helper 及許多好工具 這過渡的年代(嘆 Sprite ─ 小圖示合成圖，減少request數 網路上 sprite online generator 也不少
15. Sass vs. LESS Which better? http://css-tricks.com/sass-vs-less/
16. 練習 Compile LESS express -e -css less LESSTEST npm install Copy https://gist.github.com/4221193 into index.ejs Download Bootstrap LESS source https://github.com/twitter/bootstrap Copy all file in less folder into /public/stylesheets
17. The similar concept in HTML Zen coding http://code.google.com/p/zen-coding/ Sublime text 2 安裝教學 http://fredchiu.wordpress.com/2011/12/14/install- zen-coding-plugin-for-sublime-text-2/ HAML (HTML abstraction markup language) http://haml.info/ HTML to HAML http://html2haml.heroku.com/
18. The similar concept in Javascript 用更高階的語言編譯成 Javascript CoffeeScript CoffeeScript is a little language that compiles into JavaScript. http://coffeescript.org/ TypeScript 具有型別的 Javascript 超集合 http://www.typescriptlang.org/
20. 如何讓 SITE 寫得更快? 現成漂亮的 UI Button、Navbar、Icon set 大量定義好的 JS component Tooltip、Dropdown、Modal Grid System In old days, 960.gs、blueprint Responsive Design
21. Responsive Design Media Query Responsive Framework Bootstrap Foundation JQuery Mobile
22. Bootstrap 官方 document http://twitter.github.com/ Online Builder ( not so handy actually… ) http://jetstrap.com
23. Bootstrap 其他工具 Font-Awesome http://fortawesome.github.com/Font-Awesome/ Bootswatch http://bootswatch.com/ 18 Useful Twitter Bootstrap Goodies You Should Know http://www.queness.com/post/11632/18-useful- twitter-boostrap-goodies-you-should-know
24. 快速起手 HTML5 ★ BOILERPLATE http://html5boilerplate.com/ Initializr http://www.initializr.com/
25. Modernizr 判斷瀏覽器支援性好工具! http://modernizr.com/
26. One More Thing How to build a beautiful site
27. Texture http://subtlepatterns.com/ Keywords (Google it!) Vintage, Retro, Fiber, Old paper, Grunge, Leather, Metal, Silk, Wood, Bokeh, Noise … Kit, Bundle, Scraps
28. Icon http://www.iconarchive.com/ Icon is a design itself.
29. Detail The Devil is in the details Border-radius Shadow Border line Gradient Font-size, Line-height, Font-face Padding, Margin
30. Gallery http://www.awwwards.com/ 詩經﹒小雅﹒鹿鳴： 「他山之石，可以攻錯。」
31. Design Trend http://webmarketingtoday.com/articles/10-web-design-trends-for-2012/ 滾動視差(Parallax Scrolling)、單頁設計 (SAP)、大圖設計、Infographics、自訂字形 等… 滾動視差範例 http://webdesignledger.com/inspiration/18-beautiful-examples-of-parallax- scrolling-in-web-design
32. Photoshop Photoshop、Illustrator You can learn it at http://thenewboston.org/ http://psd.tutsplus.com/ http://www.lynda.com/ (You know…)
33. 下課 : ) Kytu @ CCSP 2012F