Compass H5BP CodeKit Barebone

Compass H5BP CodeKit Barebone は CodeKit のために用意したHTML5フロントエンドテンプレートです。

HTML5 Boilerplate をベースとし、 Compass H5BP による Compass 対応 CSS への最適化の他、有用なライブラリや様々な Tips を含んでいます。ダウンロードしてすぐに CodeKit による Compass + Sass コーディングを開始できることを目的としています。

システム要件

特徴

CodeKit の環境設定済み。
Compass の環境設定済み。
bower.json によるリソース管理。
.css{user:agent;} と Underscore.js を組み込み済み。
Facebook, Twitter, Google+ のソーシャルプラグインコードを設定済み。
Google Analytics による Facebook および Twitter のソーシャルトラッキングを設定済み。
Facebook og タグを設置済み。
Twitter Card タグを設置済み。
“Adobe Blank” Webフォントの追加、 (S)CSS (base.scss) へ @font-family プロパティを設定済み。
Webクリップ (apple-touch-icon.png, browserconfig.xml) の設定および関連ファイルを追加済み。
rel="logo" 設定済み。

使用方法

CodeKit および Bower をインストールし、システム要件を満たしてください。
ZIP をダウンロードして解凍してください。
CodeKit へドロップしてください。
That’s it!

設定済みのCompass環境設定

http_path        = "/"
css_dir          = "htdocs/assets/css"
sass_dir         = "htdocs/assets/scss"
images_dir       = "htdocs/assets/images"
javascripts_dir  = "htdocs/assets/js"
fonts_dir        = "htdocs/assets/fonts"
httpimagespath   = "assets/images"

output_style     = :compressed

relative_assets  = false

color_output     = false

preferred_syntax = :scss

sass_options     = { :debug_info => true }

SCSSファイルの構成

/assets/scss/core.scss

_common, _plugins, _component, _utility, _project を統合します。

/assets/scss/_common.scss

Compass, An HTML5 Boilerplate Extension for Compass, Normalize.scss のインポート、およびレイアウト・タイポグラフィに関わる最低限の設定を追加しています。

JavaScriptファイルの構成

/assets/js/vendor/*.js

各種ライブラリを含んでいます。編集の必要はありません。 Bower 管理下にある jQuery および Modernizr の出力を行います。

/assets/js/plugins.js

jQuery プラグインのインクルード・記述を想定したファイルです。 CodeKit による .css{user:agent;} および Underscore.js のインクルード設定を記入済みです。

/assets/js/core.js

各種処理を記述するメインファイルを記述します。

License

HTML5 Boilerplate, created by HTML5 Boilerplate.
An HTML5 Boilerplate Extension for Compass, created by Peter Gumeson.
.css{user:agent;}, created by Stephen M. McKamey.
normalize-scss, created by Nicolas Gallagher and Jonathan Neal and John Albin Wilkins.
underscore.js, created by Jeremy Ashkenas.
Adobe Blank, created by Adobe Systems Incorporated.

onopko/compass-h5bp-codekit-barebone