早點下班的工具   Kytu @ CCSP 2012F
大綱讓 CSS 寫得更快 – LESS、SCSS讓 SITE 建立得更快 – Bootstrap、Foundation補充 – How to build a beautiful site
如何讓 CSS 寫得更快?每天練寫一萬行 – 生命該浪費在美好的事物上寫少行代表多行 – Compile into CSS
Solution!LESS                              別擔心他們都差不多XD  http://lesscss.org/SCSS/SASS  http://sass-lang.com/Stylus  http://...
LESSCompiler  Nodejs module ( 最常用 )    https://npmjs.org/package/less-middleware  Other server-side compiler ( Such as Win...
Nodejs Module Usage新建專案時 express -css less {專案名稱}已有專案 npm install less-middleware 在 app.configure 裡 app.use(require(less-m...
Let’s Learn it online! (LESS)官方 document  http://lesscss.org/Online LESS Compiler ( 練習教學用)  http://winless.org/online-less...
How it works it Nodejs? 檢查是否更新,立即compile       Live Demo
SCSS / SASSCompiler  Compass.app    http://compass.handlino.com/  Fire.app    http://fireapp.handlino.com/  Ruby Gem
SCSS / SASS官方 document  http://sass-lang.com/Try Sass Online ( 練習用)  http://sass-lang.com/try.html
Compasshttp://compass-style.orgSCSS 的 library提供 CSS3 Helper 及許多好工具  這過渡的年代(嘆Sprite ─ 小圖示合成圖,減少request數  網路上 sprite online ...
Sass vs. LESSWhich better?  http://css-tricks.com/sass-vs-less/
練習 Compile LESSexpress -e -css less LESSTESTnpm installCopy https://gist.github.com/4221193 into index.ejsDownload Bootstr...
The similar concept in HTMLZen coding  http://code.google.com/p/zen-coding/  Sublime text 2 安裝教學  http://fredchiu.wordpres...
The similar concept in Javascript用更高階的語言編譯成 JavascriptCoffeeScript     CoffeeScript is a little language thatcompiles into...
如何讓 SITE 寫得更快?現成漂亮的 UI  Button、Navbar、Icon set大量定義好的 JS component  Tooltip、Dropdown、ModalGrid System  In old days, 960.gs、...
Responsive DesignMedia QueryResponsive Framework  Bootstrap  Foundation  JQuery Mobile
Bootstrap官方 document  http://twitter.github.com/Online Builder ( not so handy actually… )  http://jetstrap.com
Bootstrap 其他工具Font-Awesomehttp://fortawesome.github.com/Font-Awesome/Bootswatchhttp://bootswatch.com/18 Useful Twitter Boo...
快速起手HTML5 ★ BOILERPLATEhttp://html5boilerplate.com/Initializrhttp://www.initializr.com/
Modernizr判斷瀏覽器支援性好工具!http://modernizr.com/
One More ThingHow to build a beautiful site
Texturehttp://subtlepatterns.com/Keywords (Google it!)  Vintage, Retro, Fiber, Old paper, Grunge,  Leather, Metal, Silk, W...
Iconhttp://www.iconarchive.com/Icon is a design itself.
DetailThe Devil is in the detailsBorder-radiusShadowBorder lineGradientFont-size, Line-height, Font-facePadding, Margin
Galleryhttp://www.awwwards.com/詩經﹒小雅﹒鹿鳴:    「他山之石,可以攻錯。」
Design Trendhttp://webmarketingtoday.com/articles/10-web-design-trends-for-2012/滾動視差(Parallax Scrolling)、單頁設計(SAP)、大圖設計、In...
PhotoshopPhotoshop、IllustratorYou can learn it athttp://thenewboston.org/http://psd.tutsplus.com/http://www.lynda.com/ (Yo...
下課 : )Kytu @ CCSP 2012F
CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具
Upcoming SlideShare
Loading in …5
×

CCSP 2012F 早點下班的工具

1,947 views

Published on

早點寫完早點回家XD

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,947
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

CCSP 2012F 早點下班的工具

  1. 1. 早點下班的工具 Kytu @ CCSP 2012F
  2. 2. 大綱讓 CSS 寫得更快 – LESS、SCSS讓 SITE 建立得更快 – Bootstrap、Foundation補充 – How to build a beautiful site
  3. 3. 如何讓 CSS 寫得更快?每天練寫一萬行 – 生命該浪費在美好的事物上寫少行代表多行 – Compile into CSS
  4. 4. Solution!LESS 別擔心他們都差不多XD http://lesscss.org/SCSS/SASS http://sass-lang.com/Stylus http://learnboost.github.com/stylus/
  5. 5. LESSCompiler 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
  6. 6. Nodejs Module Usage新建專案時 express -css less {專案名稱}已有專案 npm install less-middleware 在 app.configure 裡 app.use(require(less-middleware)({ src: __dirname + /public }));
  7. 7. Let’s Learn it online! (LESS)官方 document http://lesscss.org/Online LESS Compiler ( 練習教學用) http://winless.org/online-less-compiler
  8. 8. How it works it Nodejs? 檢查是否更新,立即compile Live Demo
  9. 9. SCSS / SASSCompiler Compass.app http://compass.handlino.com/ Fire.app http://fireapp.handlino.com/ Ruby Gem
  10. 10. SCSS / SASS官方 document http://sass-lang.com/Try Sass Online ( 練習用) http://sass-lang.com/try.html
  11. 11. Compasshttp://compass-style.orgSCSS 的 library提供 CSS3 Helper 及許多好工具 這過渡的年代(嘆Sprite ─ 小圖示合成圖,減少request數 網路上 sprite online generator 也不少
  12. 12. Sass vs. LESSWhich better? http://css-tricks.com/sass-vs-less/
  13. 13. 練習 Compile LESSexpress -e -css less LESSTESTnpm installCopy https://gist.github.com/4221193 into index.ejsDownload Bootstrap LESS sourcehttps://github.com/twitter/bootstrapCopy all file in less folder into /public/stylesheets
  14. 14. The similar concept in HTMLZen 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/
  15. 15. The similar concept in Javascript用更高階的語言編譯成 JavascriptCoffeeScript CoffeeScript is a little language thatcompiles into JavaScript. http://coffeescript.org/TypeScript 具有型別的 Javascript 超集合 http://www.typescriptlang.org/
  16. 16. 如何讓 SITE 寫得更快?現成漂亮的 UI Button、Navbar、Icon set大量定義好的 JS component Tooltip、Dropdown、ModalGrid System In old days, 960.gs、blueprintResponsive Design
  17. 17. Responsive DesignMedia QueryResponsive Framework Bootstrap Foundation JQuery Mobile
  18. 18. Bootstrap官方 document http://twitter.github.com/Online Builder ( not so handy actually… ) http://jetstrap.com
  19. 19. Bootstrap 其他工具Font-Awesomehttp://fortawesome.github.com/Font-Awesome/Bootswatchhttp://bootswatch.com/18 Useful Twitter Bootstrap Goodies YouShould Knowhttp://www.queness.com/post/11632/18-useful-twitter-boostrap-goodies-you-should-know
  20. 20. 快速起手HTML5 ★ BOILERPLATEhttp://html5boilerplate.com/Initializrhttp://www.initializr.com/
  21. 21. Modernizr判斷瀏覽器支援性好工具!http://modernizr.com/
  22. 22. One More ThingHow to build a beautiful site
  23. 23. Texturehttp://subtlepatterns.com/Keywords (Google it!) Vintage, Retro, Fiber, Old paper, Grunge, Leather, Metal, Silk, Wood, Bokeh, Noise … Kit, Bundle, Scraps
  24. 24. Iconhttp://www.iconarchive.com/Icon is a design itself.
  25. 25. DetailThe Devil is in the detailsBorder-radiusShadowBorder lineGradientFont-size, Line-height, Font-facePadding, Margin
  26. 26. Galleryhttp://www.awwwards.com/詩經﹒小雅﹒鹿鳴: 「他山之石,可以攻錯。」
  27. 27. Design Trendhttp://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
  28. 28. PhotoshopPhotoshop、IllustratorYou can learn it athttp://thenewboston.org/http://psd.tutsplus.com/http://www.lynda.com/ (You know…)
  29. 29. 下課 : )Kytu @ CCSP 2012F

×