»

Using CodeKit with Foundation and Bootstrap

Coding — Tags: , , , , — Posted by Starck on March 28, 2013

需要軟體與 Framework

CodeKit

CodeKit Interface

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

FoundationBootstrap 用加入 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.jsimports
  4. Check Syntax With 設為 JSLint
  5. index.jsimports 中所有檔案的 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.jsimports
  4. Check Syntax With 設為 JSLint
  5. bootstrap.jsimports 中所有檔案的 Show Errors 都關掉

Process!

(c) 2018 Starck Lin | powered by WordPress