CSSフレームワーク kouto-swissの概要と3つの利点

本ブログで以前stylusについての記事を掲載いたしましたが、今回はそのstylusのフレームワークであるkouto-swissについて触れていきたいと思います。

よくCSSのフレームワークというと「Twitter Bootstrap」や「Semantic UI」などが有名かと思います。
これらはあらかじめ設定されたHTMLクラスに対してスタイルを定義しているものが多くHTMLファイルのクラス指定が多くなりがちです。
例えば「Semantic UI」を例に挙げると

<div class="ui buttons">
<button class="ui active button">One</button>
<button class="ui button">Two</button>
<button class="ui button">Three</button>
</div>

上のコードでこんな感じのボタンが定義できる

このようにuiとbuttonsというクラスを定義したdiv要素の中でuiとbuttonを定義したbutton要素を配置することで下記のようなボタンリストを作ることができます。

一般的にCSSフレームワークはこのようにプレフィックス(接頭辞)とクラスを定義することで必要な見た目を実現していきます。

クラスに対してスタイルを定義するので当然CSSファイルを読み込んでおく必要があります。
もちろん必要なデザインだけを取り出したりMinifyによりファイルサイズを縮小させたりなどもできるのですが、CSSファイル自体は「Semantic UI」の場合デフォルトで500kB以上あります。

公式サイトのトップにも書かれているようにstylusは素晴らしいのに「Bourbon」や「Compass」はどこ？といったニーズを満たしてくれるものが「kouto-swiss」です。
そのため使い勝手は「Bourbon」などに非常に似ていて利点もほぼおなじです。

1.htmlに依存しない
kouto-swissはどちらかというとstylusの関数やmixinをまとめたものとなるのでhtmlに依存しません。

2.軽量
呼び出した関数やmixinのみしか実際には読み込まれないので読み込まれるCSSファイル自体は軽量なものとなります。
Mixinなどを指定しなければ「kouto-swiss」自体の容量は0です。

3.ベンダープレフィックスの補完
ベンダープレフィックスも補完してくれます。

こちらの設定も簡単で

ks-vendor-prefixes = recommended

を文頭に持ってくるだけで推奨の設定で補完を行ってくれます。
個別に補完の設定を変えることもできます。

ks-support-ie = 8
ks-support-firefox = 25
ks-support-chrome = 20
ks-support-safari = 5
ks-support-opera = 15
ks-support-ios-safari = 5
ks-support-opera-mini = false
ks-support-android-browser = false
ks-support-blackberry-browser = false
ks-support-opera-mobile = false
ks-support-android-chrome = false
ks-support-android-firefox = false
ks-support-ie-mobile = false

他にもグリッドシステムや面倒なCSSアニメーションのeasingを定義してくれたりとCSSフレームワークとして最低限の機能はある印象です。

kouto-swissの長所でもあり、短所でもあるのがデフォルトのスタイルがほとんどないことです。
そのため便利関数が使える程度でフレームワーク固有のテーマといったものが存在しません。
そのためお手軽にテーマに沿ったCSSを設定する場合は他のフレームワークと組み合わせる必要があります。

そのときstylus自体が比較的マイナーなプリプロセッサのためstylus製のフレームワークはほぼ選択できないと思っていいでしょう。

もう一点stylusのフレームワークなので当然タスクランナーなどのコンパイル環境が必要な点です。
どちらかというとフレームワークの使い方を覚えるよりタスクランナーをインストールしてstylusを使える状態まで持っていくことに苦労します。

「kouto-swiss」はすでにstylusを導入済みならインストールしてimportの記述を書くだけでお手軽に導入できます。
普段面倒に感じるコーディングを簡単に済ませられる多機能なフレームワークとして使えます。

またデフォルトのデザインがないため「フレームワーク臭さ」を出さずにオリジナルのデザインに沿ったコーディングが可能です。

こういったCSSコーディングの手間を軽減するにはもってこいなフレームワークだと思っています。