早點寫完早點回家XD

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 別擔心他們都差不多XD
http://lesscss.org/
SCSS/SASS
http://sass-lang.com/
Stylus
http://learnboost.github.com/stylus/

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