croe / empty-middleman

Middlemanの諸々設定済み空プロジェクト。

empty-middleman

Middlemanの諸々設定済み空プロジェクト。

導入

以下の手順を上から順に実行すればOK。

依存ライブラリをインストール

• Ruby
  • ダウンロードページからインストーラをダウンロードして起動
• Ruby DevKit
  1. ダウンロードページからインストーラをダウンロードして起動
  2. インストーラを起動して適当なフォルダを指定してファイル展開
  3. ファイル展開したフォルダにターミナルで移動(cd dirpath)
  4. ターミナルでruby dk.rb init
  5. テキストエディタでconfig.ymlを開き、Rubyディレクトリのパス指定が正しいか確認(違っていれば修正)
  6. ターミナルでruby dk.rb install
• Bundler(gem)
  • ターミナルでgem install bundler
• Node.js
  • ダウンロードページからインストーラをダウンロードして起動
• Bower(npm)
  • ターミナルでnpm install -g bower
• Grunt(npm)
  • ターミナルでnpm install -g grunt-cli
• CasperJS(npm)
  • ターミナルでnpm install -g casperjs
• PhantomJS(npm)
  • ターミナルでnpm install -g phantomjs

Windows

1. init.batをダブルクリックなどして実行する。
   • BowerやBundler、NPMのコンポーネントがプロジェクトフォルダ以下にまとめてインストールされる。

Mac

1. 手動で依存アセットをインストールする
   • init.batの中に書いているコマンドを上から順に手動で実行

できること

ワークフロー

CI

wercker.ymlにWercker 用のビルドタスクを予め記述しているので、すぐに登録できる。

Capistrano のビルドタスクも用意しているので、環境に合わせて修正すれば、フックでテストとデプロイを自動実行させられるようになる。

middleman-kss

KSSを使ってスタイルガイドを作れる。

CasperJS

CasperJSを使ってビューのE2Eテストが出来る。

mocha

Mocha + Chai + Sinon + Istanbul で、JSの単体テストが出来る。

カバレッジはsource/tests/coverage/mochaに出力される。

---

システム

Scouter

ソーシャルのシェア数をRubyスクリプト内で取得するやつ。

ページタイトルとデフォルトのレイアウト

layout.slimにて、未設定の時と、末尾に共通して加える文言を設定できるようにしている。

layout.slimには他にも、スタイルシートやスクリプト、パーシャルなどほぼ毎回使うアセットの呼び出しを宣言してある。

---

フロントアセット

Foundation

Foundationが使える。fastclickやコンポーネントなどの読み込みを既にまとめて記述しているので、すぐに使い始めることができる。

スタイルシートのファイル構成はSMACSSを意識した形を取っている。見れば大体わかる。

###Backbone.js

JSでモデルが使えるようになる。クラスの代わりに使える。

###lodash

Underscoreをクールにしたやつ。

jquery-smooth-scroll

ページ内リンクをスムーススクロールさせるやつ。

fontawesome

アイコンフォント。

• アイコン一覧
• Photoshop拡張

jquery.kerning

デフォルトでも日本語の約者をカーニングしてくれるやつ。

がっつり各文字の組み合わせごとに字間を調整することも出来る。

デフォルトでは、layout.slimにて、p要素のみカーニングするように設定している。

ScrollToFixed

スクロールしてもサイドバーを画面に固定して表示し続けるやつ。

Colorbox

いわゆるLightbox的なダイアログ。

動画もスライダーもiframeもなんでも表示できる。レスポンシブ対応可。

NiceScroll

慣性スクロール + スクロールバーのデザイン変更。

SweetAlert

おしゃれなアラート。

Hover

JSレスで使えるCSSアニメーション。