Bootstrapに様々なPlugin、テーマを追加したKickstrap

Twitter Bootstrapに機能を追加したKickstrapというツール?フレームワーク？の中身を色々みてみました。

https://github.com/ajkochanowicz/Kickstrap

$ git clone https://github.com/ajkochanowicz/Kickstrap.git
$ cd Kickstrap
$ open index.html

これで一応どんなサイトを作れるかをみることができます

構成

KickstrapはTwitter Bootstrapのフォークです。
追加されている機能はextrasフォルダにぶちこんであります。

extras
├── animate
├── chosen
├── css
├── fontawesome
├── h5bp
├── icomoon
├── jgrowl
├── prettify
├── settings
└── themes

settings/以下にoverrides.lessというファイルがあり、これがless/bootstrap.lessの最後に@importされるようになってます。
後述するテーマ変更にはsettings/theme.lessを編集します。

make bootstrap が動かない

トップにMakefileがありますが、make bootstrapはエラーになります。

$ make bootstrap
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp img/* bootstrap/img/
lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css
lessc --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css
lessc ./less/responsive.less > bootstrap/css/bootstrap-responsive.css
NameError: .input-block-level is undefined in /Users/yuhei/Downloads/Kickstrap/less/responsive.less:185:4
184   .uneditable-input {
185     .input-block-level();
186   }

responsive.lessのコンパイルでエラーになります。
中身を見てみるとless/responsive.lessはv2.0.2で、@importされているless/mixins.lessは古いバージョン(v2.0.1?)みたいです。

responsive.lessについてはmixins.lessに合致するバージョンがextras/settings/overrides.lessに直接記述されているので、
less/responsive.lessのコンパイルは必要ないんですね。

前述したようにoverrides.lessはbootstrap.lessの最後で@importされてます。

このあたりはごちゃごちゃしてますが、そのうち整理されるんじゃないでしょうか？

いまのところMakefileはTwitter bootstrapのファイルがそのまま置いてあるだけで、更新されておらず、.gitignoreの対象になってます。
https://github.com/ajkochanowicz/Kickstrap/issues/11

responsive.lessのコンパイルをコメントアウトすれば一応動かせます

#
# BUILD SIMPLE BOOTSTRAP DIRECTORY
# lessc & uglifyjs are required
#

bootstrap:
	mkdir -p bootstrap/img
	mkdir -p bootstrap/css
	mkdir -p bootstrap/js
	cp img/* bootstrap/img/
	lessc ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
	lessc --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
	#lessc ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
	#lessc --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
	cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js
	uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.js

テーマを切り替える

extras/settings/theme.lessの適用したいテーマの行をコメントアウトしてから、less/bootstrap.lessをコンパイルします。

lessc less/bootstrap.less > css/bootstrap.css

コメントにもありますが、@importしていいのはひとつだけです。

extras/settings/theme.less

  //THEME
  //-----
    
    // Switch to a theme by uncommenting [remove the '/'s from] the @import lines. 
    // (one and only one line!)
    // A more user-friendly way to do this is coming :)
    // Thanks to bootswatch for the themes: http://bootswatch.com/
    
    //  CERULEAN
    //  @import "../themes/cerulean/less/cerulean.less";
    
    //  SLATE
    //  @import "../themes/slate/less/slate.less";
    
    //  SPRUCE
    //  @import "../themes/spruce/less/spruce.less";
    
    //  CYBORG
    //  @import "../themes/cyborg/less/cyborg.less";
    
    //  AMELIA
    //  @import "../themes/amelia/less/amelia.less";
    
    //  SIMPLEX
    //  @import "../themes/simplex/less/simplex.less";
    
    //  JOURNAL
    //  @import "../themes/journal/less/journal.less";
    
    //  READABLE
    //  @import "../themes/readable/less/readable.less";
     
    //  SANDRA
    @import "../themes/sandra/less/sandra.less";
    
    //  SPACELAB
    //  @import "../themes/spacelab/less/spacelab.less";
    
    //  SUPERHERO
    //  @import "../themes/superhero/less/superhero.less";
    
    //  UNITED
    //  @import "../themes/united/less/united.less";
  
  //--------
  //END THEME