33
早點下班的工具 Kytu @ CCSP 2012F

CCSP 2012F 早點下班的工具

  • Upload
    -

  • View
    1.696

  • Download
    5

Embed Size (px)

DESCRIPTION

早點寫完早點回家XD

Citation preview

Page 1: CCSP 2012F 早點下班的工具

早點下班的工具 Kytu @ CCSP 2012F

Page 2: CCSP 2012F 早點下班的工具

大綱

讓 CSS 寫得更快 – LESS、SCSS

讓 SITE 建立得更快 – Bootstrap、Foundation

補充 – How to build a beautiful site

Page 3: CCSP 2012F 早點下班的工具

如何讓 CSS 寫得更快?

每天練寫一萬行 – 生命該浪費在美好的事物上

寫少行代表多行

– Compile into CSS

Page 4: CCSP 2012F 早點下班的工具

Solution!

LESS http://lesscss.org/

SCSS/SASS

http://sass-lang.com/

Stylus http://learnboost.github.com/stylus/

別擔心他們都差不多XD

Page 5: CCSP 2012F 早點下班的工具
Page 6: CCSP 2012F 早點下班的工具

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

Page 7: CCSP 2012F 早點下班的工具

Nodejs Module Usage

新建專案時 express -css less {專案名稱}

已有專案 npm install less-middleware

在 app.configure 裡 app.use(require('less-middleware')({ src: __dirname + '/public' }));

Page 8: CCSP 2012F 早點下班的工具

Let’s Learn it online! (LESS)

官方 document http://lesscss.org/

Online LESS Compiler ( 練習教學用) http://winless.org/online-less-compiler

Page 9: CCSP 2012F 早點下班的工具

How it works it Nodejs?

檢查是否更新,立即compile

Live Demo

Page 10: CCSP 2012F 早點下班的工具
Page 11: CCSP 2012F 早點下班的工具

SCSS / SASS

Compiler Compass.app

http://compass.handlino.com/

Fire.app http://fireapp.handlino.com/

Ruby Gem

Page 12: CCSP 2012F 早點下班的工具

SCSS / SASS

官方 document http://sass-lang.com/

Try Sass Online ( 練習用) http://sass-lang.com/try.html

Page 13: CCSP 2012F 早點下班的工具
Page 14: CCSP 2012F 早點下班的工具

Compass

http://compass-style.org SCSS 的 library 提供 CSS3 Helper 及許多好工具

這過渡的年代(嘆

Sprite ─ 小圖示合成圖,減少request數 網路上 sprite online generator 也不少

Page 15: CCSP 2012F 早點下班的工具

Sass vs. LESS

Which better? http://css-tricks.com/sass-vs-less/

Page 16: CCSP 2012F 早點下班的工具

練習 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

Page 17: CCSP 2012F 早點下班的工具

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/

Page 18: CCSP 2012F 早點下班的工具

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/

Page 19: CCSP 2012F 早點下班的工具
Page 20: CCSP 2012F 早點下班的工具

如何讓 SITE 寫得更快?

現成漂亮的 UI Button、Navbar、Icon set

大量定義好的 JS component Tooltip、Dropdown、Modal

Grid System In old days, 960.gs、blueprint

Responsive Design

Page 21: CCSP 2012F 早點下班的工具

Responsive Design

Media Query Responsive Framework

Bootstrap Foundation JQuery Mobile

Page 22: CCSP 2012F 早點下班的工具

Bootstrap

官方 document http://twitter.github.com/

Online Builder ( not so handy actually… ) http://jetstrap.com

Page 23: CCSP 2012F 早點下班的工具

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

Page 24: CCSP 2012F 早點下班的工具

快速起手

HTML5 ★ BOILERPLATE http://html5boilerplate.com/ Initializr http://www.initializr.com/

Page 25: CCSP 2012F 早點下班的工具

Modernizr

判斷瀏覽器支援性好工具! http://modernizr.com/

Page 26: CCSP 2012F 早點下班的工具

One More Thing

How to build a beautiful site

Page 27: CCSP 2012F 早點下班的工具

Texture

http://subtlepatterns.com/ Keywords (Google it!)

Vintage, Retro, Fiber, Old paper, Grunge, Leather, Metal, Silk, Wood, Bokeh, Noise … Kit, Bundle, Scraps

Page 28: CCSP 2012F 早點下班的工具

Icon

http://www.iconarchive.com/ Icon is a design itself.

Page 29: CCSP 2012F 早點下班的工具

Detail

The Devil is in the details Border-radius Shadow Border line Gradient Font-size, Line-height, Font-face Padding, Margin

Page 30: CCSP 2012F 早點下班的工具

Gallery

http://www.awwwards.com/ 詩經﹒小雅﹒鹿鳴:

「他山之石,可以攻錯。」

Page 31: CCSP 2012F 早點下班的工具

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

Page 32: CCSP 2012F 早點下班的工具

Photoshop

Photoshop、Illustrator You can learn it at http://thenewboston.org/ http://psd.tutsplus.com/ http://www.lynda.com/ (You know…)

Page 33: CCSP 2012F 早點下班的工具

下課 : ) Kytu @ CCSP 2012F