CCSP 2012F 早點下班的工具
5 likes1,662 views
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.
Ad
More Related Content
What's hot (19)
Similar to CCSP 2012F 早點下班的工具 (20)
Ad
Recently uploaded (20)
Ad
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 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
- 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
- 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