レスポンシブはもとより、sass、flexboxも対応ということで、Kube6.0をみてみることにしました。scssからcssをコンパイルするなどやったこともなかったので勉強も兼ねて。ちなみに、ねこやま猫道サイトはKube4.0.3を利用して作成しましたが、FAQをみると、古いバージョンはImperaviのサイトからも削除され、新バージョンにした方がいいと言うので、ねこやま猫道サイトを書き換えてみようと思います。なお、古いバージョンからのマイグレーションツールはない模様で、一から作ってくださいとのこと。
フォルダ構成
ダウンロードファイルを解凍すると以下のようなフォルダ構成。
スタイルを全く変更しないのであれば、テンプレートhtmlファイル（index.html）の記述どおり、dist/css/kube.cssを読み込めばOK。
独自のスタイルを追加する場合は、Development with Kubeにあるように、master.scssファイルをつくり、その中でkube.scssをimportし、独自スタイルを定義すればよいらしい。Kubeで使っている変数の再定義はtheming.scssに記載するとよいみたい。
今回は、kube-masterのindex.htmlを修正して、独自スタイルも追加したテストページを作成することにします。
===============
kube-master
├dist
├css
│└kube.css
│└kube.min.css
├js
│ └kube.js
│ └kube.min.js
├scss
│ └kube.scss
├gulpfile.js
├index.html
├LICENSE.md
├README.md
└src
├_js
│ └*.js（各種jsファイル）
├_scss
│ └*.scss（各種scssファイル）
└kube.scss
===============
scssからcssのコンパイル（Macの場合）
scssからcssにコンパイルするには、Ruby、sassが必要。MacにはRubyが設定されているので、アップデートを確認してsassをインストールします。sassインストール〜scssのコンパイルについては以下の記事を参考にしました。
http://vdeep.net/sass-scss#SassMac
/Users/hoge配下にkube-masterフォルダがある前提で書きます。
Kube Quick Startには、master.scssファイルにdist/scss/kube.scss（src/_scssフォルダのscssファイルの内容全て）をimportするとよいとかいてあったものの、コンパイルしてもKubeのスタイルが展開されず…
src/kube.scss（src/_scssフォルダのscssファイルのimport文）をimportするようにしたらうまくいきました。
kube-master/srcフォルダに、master.scssファイルをつくり、中味は、以下の一行のみ（今の所は）。
＠import “kube.scss”;
↑注）上の行の＠は全角になってます。コーディング上は半角で。
ターミナルで、Kubeのフォルダにチェンジディレクトリして、sassコマンドを投入します。
cd /Users/hoge/kube-master
sass –style expanded src/master.scss:dist/css/master.css
とりあえずKubeのスタイルを書いてみる
index.htmlを修正します。
index.htmlの内容
===============
<!DOCTYPE html>
<html lang=“ja”>
<head>
<title>Basic Template</title>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<!– Kube CSS –>
<link rel=“stylesheet” href=“dist/css/master.css”>
</head>
<body>
<h1>Hello, world!</h1>
<div class=“row centered”>
<div class=“col col-8”>
<nav class=“tabs” data-component=“tabs”>
<ul>
<li class=“active”><a href=“#tab1”>TAB1</a></li>
<li><a href=“#tab2”>TAB2</a></li>
</ul>
</nav>
<div id=“tab1”>
<p>TAB1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id=“tab2”>
<p>TAB2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!– Kube JS + jQuery are used for some functionality, but are not required for the basic setup –>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<script src=“dist/js/kube.js”></script>
</body>
</html>
===============
こんな風に表示されました。
