Bootstrapに様々なPlugin、テーマを追加したKickstrapがだいぶ変わったのでもう一度みてみる

css web開発

以前ちょっとさわってみたKickstrapですが、久しぶりにチェックしたらかなり進化していたのでもう一回見てみました。


フォルダ構成

ダウンロードして展開するとこのような構成になってます。
トップディレクトリにあるファイルが少なくなってシンプルになりました。

├── blank.html
├── index.html
├── kickstrap.less
├── theme.less
└── Kickstrap
    ├── apps
    │   ├── animatecss
    │   ├── bootstrap
    │   ├── chosen
    │   ├── colorschemer
    │   ├── firebuglite
    │   ├── jQueryLint
    │   ├── knockout
    │   ├── pinesnotify
    │   ├── universal
    │   └── updater
    ├── bootstrap
    │   ├── img
    │   ├── js
    │   └── less
    ├── css
    ├── extras
    │   ├── fontawesome
    │   └── root goodies
    ├── js
    └── themes
        ├── amelia
        ├── cerulean
        ├── cyborg
        ├── journal
        ├── readable
        ├── simplex
        ├── slate
        ├── spacelab
        ├── spruce
        ├── superhero
        └── united


解凍してできたフォルダの直下でpython -m SimpleHTTPServerしてhttp://localhost:8000を開くとindex.htmlの見た目を確認できます。

$ python -m SimpleHTTPServer

ファイルを見てみる

  • stylesheetの指定

index.htmlからcssは読み込んでなくて、直にちょっとだけ書いてあります。
あとはkickstrap.lessのみ読み込んでます。


index.html

  <style type="text/css">body{padding-top:60px}.hidden{margin:20px;border:5px solid #a24c4c;background-color:red;padding:10px;width:400px;color:white;font-family:helvetica,sans-serif}</style>
  <link rel="stylesheet/less" type="text/css" href="kickstrap.less">


kickstrap.lessではカスタマイズ用の変数や、bootstrapを含む様々なlessファイルをimportしてます。
theme.lessもkickstrap.lessでimportされます。

  • kickstrap.lessのカスタマイズ変数


@appsでプラグイン？として何を使うかを指定します。
プラグインはKickstrap/appsディレクトリの下に置いてあるものを指定できます。

こちらに紹介されているもののうちいくつかは最初から含まれています。
http://getkickstrap.com/apps/

含まれていないものはこのページからDLして配置すればよいのでしょう。


書式はカンマ区切りの文字列で//が頭についているとコメントアウトになるようです。

以下がデフォルトの状態ですが、pinesnotifyとbootstrapが有効になってます。
ここでbootstrapを書いておくとbootstrapで用意されているjsが使えるようになるみたいですね。
ここに書いてあるやつです。
http://twitter.github.com/bootstrap/javascript.html

/区切りでサブディレクトリのtransitionだけ使うということもできます。

@apps: "pinesnotify, bootstrap, //bootstrap/transition, //knockout, //updater";

@rootDirはKickstrapを使うルートディレクトリを指定するようです。
デフォルトでは'/'ですが、"http://domain.com/blog/"などで使う場合は'/blog/'を指定します。

@rootDir: "/";


あと@universalResourcesというのもあるんですが、EXPERIMENTALとなってるのでとりあえず置いときます。

  • theme.lessでカスタマイズ

theme.lessではその名の通りテーマをカスタマイズします。
Kickstrap/themes以下においてあるものを指定できます。

@import "Kickstrap/themes/spacelab/variables.less";
@import "Kickstrap/themes/spacelab/bootswatch.less";

qunitを動かしてみる

Kickstrapディレクトリにqunit.zipが置いてありますので、apps以下にコピーして解凍します。
そしてkickstrap.lessの@appsにqunitを追加します

@apps: "pinesnotify, qunit, //bootstrap, //bootstrap/transition, //knockout, //updater";

これでindex.htmlをリロードするとqunitが走るのが確認できます。


感想

依存しているライブラリがちょっと入れ替わってます。
knockout.jsとかは以前は入ってませんでしたが、今回はデフォルトでappsの下においてあります。
あとjgrowl.jsが外れて、Pines Notifyというものになったみたいですね。

全体のコンセプトは変わってませんが前よりも確実にわかりやすくなりました。