需要軟體與 Framework

• CodeKit
• Foundation
• Bootstrap

CodeKit

Foundation

$ git clone git://github.com/zurb/foundation.git

Bootstrap

$ git clone git://github.com/twitter/bootstrap.git

專案資料結構

• root/
  • css/
    • app.css
    • foundation.css
    • normalize.css
    • bootstrap.css
    • bootstrap-responsive.css
  • js/
    • foundation/ (將 foundation 的 js 都放在這裡)
      • foundation-all.js
      • 以 index.js 作為整合 Foundation javascripts 的入口檔案
    • bootstrap/ (將 bootstrap 的 js 都放在這裡)
      • bootstrap-all.js
      • 新增一個空檔案命名為 bootstrap.js 作為 Bootstrap javascripts 的入口檔案
    • vendor/
      1. 將 Foundation 第三方的 js 放在這裡
  • less/
    • 新增 twitter-bootstrap.less
    • 新增 bootstrap-responsive.less
  • scss/
    • 將 foundation templates/project/scss/ 中的檔案放在這裡:
      • _settings.scss
      • app.scss
      • normalize.scss

CodeKit 設定

Import framewoks

將 Foundation 和 Bootstrap 用加入 Framework 的方式匯入到 CodeKit

Import project

將專案目錄拖進 CodeKit, 編輯專案設定檔, 將 SCSS 和 LESS 的輸出都指到 css 的目錄

設定 Foundation

1. 指定 scss/app.scss 的輸出路徑為 css/foundation.css
2. 指定 js/foundation/index.js 的輸出路徑為 js/foundation/foundation-all.js
3. 拖拉其它的 Foundation Javascript 檔案到 index.js 的 imports
4. Check Syntax With 設為 JSLint
5. 把 index.js 的 imports　中所有檔案的 Show Errors 都關掉

設定 Bootstrap

less/twitter-bootstrap.less

less/twitter-responsive.less

1. 指定 less/twitter-bootstrap.less 的輸出路徑為 css/bootstrap.css
2. 指定 js/bootstrap/bootstrap.js 的輸出路徑為 js/bootstrap/bootstrap-all.js
3. 拖拉 Bootstrap Javascript 檔案到 bootstrap.js 的 imports
4. Check Syntax With 設為 JSLint
5. 把 bootstrap.js 的 imports 中所有檔案的 Show Errors 都關掉

Process!