Giter Club home page Giter Club logo

compass-h5bp-codekit-barebone's Introduction

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" 設定済み。

使用方法

  1. CodeKit および Bower をインストールし、システム要件を満たしてください。
  2. ZIP をダウンロード して解凍してください。
  3. CodeKit へドロップしてください。
  4. 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

Copyright (c) 2015 Takehiko Ono. See LICENSE for full license.

compass-h5bp-codekit-barebone's People

Contributors

onopko avatar aguije avatar

Watchers

James Cloos avatar KB avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.