Downloaded 37 times
Uploaded by裕欽 林
CCSP 2012F 早點下班的工具
This document discusses tools and techniques for making CSS and website development faster. It introduces CSS preprocessors like LESS and SCSS that compile into regular CSS. It also covers responsive front-end frameworks like Bootstrap and Foundation that provide pre-built components for faster site building. Additional tips covered include icon sets, grid systems, responsive design, and techniques for building beautiful sites.
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
CCSP 2012F 早點下班的工具
- 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 Nodejsmodule ( 最常用 ) 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 itonline! (LESS) 官方 document http://lesscss.org/ Online LESS Compiler ( 練習教學用) http://winless.org/online-less-compiler
- 9. How it worksit 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 Whichbetter? 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 conceptin 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 conceptin 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 ResponsiveFramework 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 UsefulTwitter Bootstrap Goodies You Should Know http://www.queness.com/post/11632/18-useful- twitter-boostrap-goodies-you-should-know
- 24.
- 25.
- 26. One More Thing Howto 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 adesign itself.
- 29. Detail The Devil isin the details Border-radius Shadow Border line Gradient Font-size, Line-height, Font-face Padding, Margin
- 30. Gallery http://www.awwwards.com/ 詩經﹒小雅﹒鹿鳴： 「他山之石，可以攻錯。」
- 31.
- 32. Photoshop Photoshop、Illustrator You can learnit at http://thenewboston.org/ http://psd.tutsplus.com/ http://www.lynda.com/ (You know…)
- 33. 下課 : ) Kytu@ CCSP 2012F