メニューボタン閉じるボタン

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

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

一般的なCSSフレームワーク

よく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>

スクリーンショット 2016-06-03 14.00.09上のコードでこんな感じのボタンが定義できる

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

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

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

「kouto-swiss」の利点

公式サイトのトップにも書かれているように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コーディングの手間を軽減するにはもってこいなフレームワークだと思っています。

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する