NOT SO BADなブログ

Towards a not so bad world.

BootStrapに標準装備されてるのについつい再実装しがちな機能とかまとめ。


(photo credit: Nathan O'Nions via photopin cc)

最近あらためてBootstrapにはまってます。

Bootstrapでサイト作ってる時に標準の機能を知らんくて
わざわざ同じ機能を自分でcss書いたりしてることが多かったので、
よく再実装しがちな機能をまとめメモ。

3.0でフラットデザインになって、いわゆるbootstrap臭もだいぶ薄れた気がするけどどうなんやろ。。
3.0つかったサイトが増えたらまた臭ってきそうな気もするけど。

ドキュメント

知らずに再実装しちゃう系の便利機能はCSSのHelper Classesとかに多い。
ので最初にひととおりドキュメント見とくのはいいですね。
当たり前やろって話やけど。。

Bootstrap「Helper Classes

text-align

単純に中央揃えとか左揃えとかだけを指定するために
都度cssにスタイルを記述するのはイケてない。

汎用classつくっといてそれを適用してもいいんやけど、
Bootstrapならそれが既に用意されてます。

%p.text-center

これで指定した要素にtext-align: center; が付与される。
これ知らずに自分でまったく同じ.text-centerクラス作ってたな。。

HTML上に余計な情報が増えるっちゃ増えるんやけど、
そんなに数が増えるもんでもないしまぁいいんじゃないかと。

float

Quick Floatsってやつ。
手軽にfloatさせたいときに便利。

%div.pull-left
%div.pull-right

clearfix

Quick Floatしたあとにclearfixしようとしたら、これも用意されてました。

%div.clearfix
  %div.pull-left
  %div.pull-right

そして最初はよくわからずカラム並べたのも手動でclearfixしてたけど、
これはふつうにrowクラスの中に入れればいいだけでした。

%div.row
  %div.col-lg-4
  %div.col-lg-4
  %div.col-lg-4

ちゃんと調べてから使えよって話やけど。。

inlineのリスト

リストの要素を横並びにしたいときに。

%ul.list-inline
  %li
  %li

文字の色替え

文字の色指定もいくつか用意されてます。

%p.text-primary hogehoge
%p.text-danger hogehoge

色の指定が楽にできるっていうよりは
どういうシチュエーションでどの色を使うか、みたいな規約として使うといい感じですね。

Bootstrap「Contextual Colors(http://getbootstrap.com/css/#helper-classes-colors)」

blockコンテンツの真ん中寄せ

widthを指定して左右のmarginをautoにするやつ。
それだけなんやけどこれもいちいち書かなくていいのがいいですな。

%div.center-block

見出しとかの画像置き換え

これは今回調べてて初めて知りました。
見出しとかでh1のテキストを非表示にして背景に指定した画像を見せるやつ。

%h1.text-hide Title

あたりまえやけど背景画像は別途指定する。

Bootstrap「Image Replacement

list-group

これは単純に知らなかったUIパーツで便利そうやったので。

%ul.list-group
  %li.list-group-item
  %li.list-group-item

きれいなリスト表示ができます。
panelと組み合わせてヘッダーつきのリストにしてもいい感じ。

画像をまるく切り抜き

これも知らずによく自分でclass用意してた。。

%img.img-circle

これだけでborder-radius: 50%;の丸い画像にしてくれます。

とりあえずこんな感じかな。

最近サーバー側もフロント側も標準化を意識するようにしてて、
なるべくカスタマイズせずに規約に沿うようにしてます。

作業が楽になるのもあるけど、それ以上にフロント側やと全体の統一感も出せるし
何よりメンテナンスコストが全然変わってくるのが大きいです。

ぜんぶ標準のだけやとおもしろくないけど、デザインも機能もこだわるところを絞って
他はできるだけ標準化して勝負していきたいなーとそんな風に思ってますよ。

おしまい。