カラーミーキットを使ってみた！

仕事でカラーミーさんを利用させてもらってまして、

以前は「プレーン」というテンプレートを少しカスタマイズして使用していたのですが、

時代も変わってきたというこで、ここはモデルチェンジでもしてみっか！ってことで重い腰を上げてみました。

カラーミーキット(2カラム)

まずはテンプレート選び。

久々にひらくとなんとも素敵なテンプレートが増えてるではないですか、、、

Panoramaとかワンプレートホワイトとか、

と、思ったらどーやらこれらは有料版。素敵だけど少し金額に怖気づく、残念。

改めて無料版を拝見。

すると目立つ部分にどんっ



なんでしょう、これ。

いったんスルーして下のテンプレに目を向けるとBitこれとかも

ぜんぜん素敵じゃないですか！さっきの有料版とどんだけ違うの？？

とか思いながら、先ほどのカラーミーキットをクリック。

すると素敵なテンプレたちはどーやらこのテンプレを元に作られているらしい。

詳細→テンプレートフレームワーク カラーミーキット

そして無料。

これは気になるってことでとりあえず軽く調べてみました。

Bootstrap？見たいな感じ？？

ドキュメントを見てみるとどーやら

流行？？のBootstrap風のClassでぐりぐりカラムを分けるような仕組みのようです。

って、Bootsrapいじったことはありませんが、、、。

これもいい機会だし流行（ってますよね？）のレスポンシブとやらを経験してみようと、

カスタムテンプレのカラーミーキット（2カラム）をポチる。

いざカスタム。

col-lg-(n) col-sm-(n)

ほんと、これの意味すら良くわからなくて、、、

良くカスタムできたと自分でも思います。はい。

（12 / n） カラムって感じでしょうか。

ちょっとドキュメントが素人にはもの足りない感じですが

ただ、なんでもそうですがいじってるうちに以外と慣れるもんで、、、。

しかしマージンとかパディングとかこーゆー指定の仕方が今主流なんでしょうか？

わかり易いような、面倒くさいような。

つまづいたところ

あくまでBootstrap、レスポンシブ未経験の体験談なので、

そのコードが指し示す真意を理解できていない気がしますが、

結構悩んでしまったところをいくつか。

■icon-b, icon-w, icon-lg-b, icon-lg-w

<i class="icon-b icon-twitter"></i>

的な感じでiconが用意されていて、サイズも大、小あるのですが、

なぜか768px以下のデバイスは小アイコンを選んでも大アイコンにCSSが設定されています。

768以下でアイコンがズレます。

共通CSSに入っているんですが、この真意をいろいろ考えたのですが解明できず。

■viewportを書き出すところ

最初ある程度カスタムしてから、スマホで確認してみたんですが、

ページを遷移する度にチラつくんです。

困った困った。原因を考えたところ、

スマホ用のmeta viewportをスクリプトで書き出しているんですが、

これが共通HTMLのfooter下のDOM readyイベント内に書かれています。

なのでスマホでアクセスするとbodyが一瞬PC用にレンダリングされた後スマホ用のCSS

が読み込まれるようで画面がちらつきます。

サイドにカラムなどなければ気にならない程度かもしれませんが、、。

とりあえず共通HTMLのスクリプトをbody直下へ移動。

そんでviewport書き出しはDOM readyから出しました。

とりあえず問題なさそうだし、自分的にはちらつきがなくなったのでなにより。

■btnクラスのinline-block

がinlineにアスタリスクがついてるんでIE用のハックだと思うんですが

zoom:1;がはいった方がしっくりくるような。

ま、正直この辺良くわかりませんが！

結論

これは慣れれば量産できそうな予感。

今度Bootstrapもいじってみたいな。