Twitter Bootstrap

Twitter Bootstrapのグリッドシステムをもう一段抽象化させてみる

Twitter Bootstrapをはじめ、960grid系のグリッドシステムは、HTMLの中に何グリッド分またぐかということをクラス名として書いておくというスタイルが流行っている。

例えば、960gridでは、16分割されたグリッドを4つに分けて使う場合、

    <div class="container_16">
        <div class="grid_4">
            <h3>Site Produce</h3>
        </div>
        <div class="grid_4">
            <h3>Design Trends</h3>
        </div>
        <div class="grid_4">
            <h3>Web Application</h3>
        </div>
        <div class="grid_4">
            <h3>Full Order</h3>
        </div>
    </div>

のように書くし、Twitter Bootstrapでは、

    <div class="row">
        <div class="span4">
            <h3>Site Produce</h3>
        </div>
        <div class="span4">
            <h3>Design Trends</h3>
        </div>
        <div class="span4">
            <h3>Web Application</h3>
        </div>
        <div class="span4">
            <h3>Full Order</h3>
        </div>
    </div>

のように書く。

つまりHTML上に、一段階抽象化されているものの、スタイルをインラインで書いているのとあまり変わらないわけだ。

例えばグリッドの横幅を変えるときはHTMLを変える必要がでてくる(もちろんCSSを変えてしまうという手もあるが、そうすると整合性がとれなくなるだろう)

本当ならば、

    <div class="row">
        <div class="menu-siteproduce">
            <h3>Site Produce</h3>
        </div>
        <div class="menu-designtrends">
            <h3>Design Trends</h3>
        </div>
        <div class="menu-webapplication">
            <h3>Web Application</h3>
        </div>
        <div class="menu-fullorder">
            <h3>Full Order</h3>
        </div>
    </div>

のようにしておき、グリッドで各要素がどれだけ幅をとるかはHTMLに書いておきたくないところだろう。

CSSをいきなり導入するしかないフレームワークだと、フレームワーク通りのクラスを書いていく事になるが、Twitter Bootstrapのようにlessでラッピングされたフレームワークの場合は、さらなる抽象化をすることが可能だ。

lessファイル上で、このように指定を行うと、mixinの作用で、span4を指定したのと同じ結果になる。

.menu-siteproduce        { .columns(4); }
.menu-designtrends       { .columns(4); }
.menu-webapplication     { .columns(4); }
.menu-fullorder          { .columns(4); }

こう書いておけば、各要素のグリッドのバランスを変える際にCSSサイドのみいじればすむだけでなく、フレームワークを有効活用しながら、その命名規則に縛られなくて済むというメリットがある。

ということで、そもそもlessって何? mixinって?って話はあると思うけど、こういう考え方もあるよという話でした。

Read More

TwitterのようにチップスをシェアするサイトTipshare

ちょっと前にやって大好評だったデザイナー向けCakePHP勉強会を一緒に開催したCakePHP仲間である、

@mon_satさん
と、
@konsanさん

TipshareはTwitter Bootstrapをベースにしている

Tipshare
http://tipshare.info/

というサービスを立ち上げたみたい。

「チップスをツイッターみたいな気軽な感覚で共有できるサイト」とのことで、注目のプロジェクトだ。
ちょっとしたチップスはブログで気合い入れてかくほどでもなく、かといって忙しいさなかにどこかにメモるでもなく日々埋もれていきがちだ。

そんなときにTipshareを使うといいだろうね。

エンジニア視点での見所は、Twitter Bootstrapを使って一気にUIを作っていること(UIを作り込んでから公開ではなく、とにかく作って公開し、ブラッシュアップしていくというスタイル)の他にも、今年末にリリースされる予定のCakePHP 2.0を使っていたり、NoSQL系のデータベースMongoDBを使っているあたりも要注目ポイントといえる。

また、GitHubのマイクロコード共有サイトGistに投稿されたコードを取り込むという機能もついているのが面白い。

Gistにはちょっとしたコードがいっぱい

URLを入力するだけで、Gistのフォーマットに変換されて表示される。

Gist経由でコードがカラフルに!

CakePHPコミュニティで使う人が増えているためチップスの中心がCakePHPに偏っているが、IT系ならどんなチップスでもいいとのこと。

ところで、このサイトの名称は、Tip Share(チップスをシェアしよう)なのかTips Hare(チップスを貼れ)なのかというのがコピーライティング的な部分の筆者的ツボだ。

あと、このペンギンのようなキャラクターはなんだろう?

名前募集中なのであろうか?

詳細は追って待て!

※一部、TipshareをTipstarとTypoしてしまった..

Read More

Twitter Bootstrapの導入への3ステップ

Twitter Bootstrapには、導入をして使う方法が下記の3パターン存在する、、

  • そのままCSSをがりがり変えて使う方法。
  • lessを使って書いていき、JavaScriptを使って呼び出す方法
  • 黒い画面で専用のシェルスクリプトを使ってコンパイルする方法

と前回書いた。

ので、それらがどういうものかを書いていこうと思う。

まず、「そのままCSSをがりがり変えて使う方法」から見ていこう。

そのままCSSをがりがり変えて使う方法

Twitter Bootstrapは、CSSフレームワーク(というくくりにはいれないほうがいい気がする。UIフレームワークという位置づけがいいかもしれない)の中では、新しい世代のものだ。というのも、純粋なCSSの元ファイルがあり、それを継承したりいろいろして使うというタイプではなく、lessというスタイルシートコンパイラ的なアプリケーションを使って、より効率的にCSSをデベロップすることができるからだ。

と書くと、なんだか敷居があがってしまうかもしれない。
Twitter Bootstrapがlessを活かしたフレームワークだからといって、lessを使わないといけないわけではない。

そこで、手っ取り早いのは、ダウンロードしてついてくる「bootstrap.css」をそのまま使う点だ。

方法としては、「bootstrap.css」をそのままHTML上で読み込んで、別のオリジナルCSSを利用して上書きをするという手法が考えられる。標準のCSSをどうしても変更したい場合は「bootstrap.css」自体を編集してしまってもよい。

lessを使って書いていき、JavaScriptを使って呼び出す方法

泣く子もだまるlessの本家サイト

http://lesscss.org/

CSSをそのまま使う手法に慣れてきたら、JavaScriptで呼び出す手法を試してみよう。JavaScriptで呼び出す手法は、lessのトップページにも書かれていて、「less.js」を使って、「lib」ディレクトリに入っている

  • bootstrap.less
  • forms.less
  • mixins.less
  • patterns.less
  • reset.less
  • scaffolding.less
  • tables.less
  • type.less
  • variables.less

を動的にコンパイルをしてCSSとして呼び出す方法となる。
面白いのは「link rel=”stylesheet/css”」ではなく「link rel=”stylesheet/less”」となる点。

ちょい変則的な書き方

でも、この方法は実は中間点地点にしか過ぎないと思ってる。
というのも、ユーザーがアクセスするたびにコンパイルされるのは、表示の際のオーバーヘッドが大きすぎると思うからだ。何かアクセスごとに変化するようにしてあるのならともかく、何度アクセスしても変わらないものを出力するのにJavaScriptを使うのは非効率な気がする。

ただし、lessの練習をするには、うってつけだと思う。そもそもlessってなんぞや?って人もいるのではないだろうか。でもその話は長くなるからまた今度。

3つ目の「黒い画面で専用のシェルスクリプトを使ってコンパイルする方法」への移行もおすすめしておく。

黒い画面で専用のシェルスクリプトを使ってコンパイルする方法

Twitter Bootstrapはここにきてぐっとハードルがあがる。
ローカル環境でのコンパイルに必要なハードルは以下の5つ

  • 黒い画面での作業
  • node.jsのインストール
  • npmのインストール
  • lessのインストール
  • コンパイルコマンドの入力

具体的なインストールについては後日Mac版の話をしようと思う。

Twitter Bootstrapをこの方法で導入することによるメリットのほうを書いておきたいと思う。
まず、Twitter Bootstrapをこの方法で導入すると、出力ファイルが「bootstrap-min.css」のように
小さいサイズに出来る点がある。

加えて、これら出力ファイルの名前もシェルスクリプトの変更によりカスタマイズすることが出来る。

おまけに、lessのサーバー側での変換、node.js(あこがれているけど導入してないひと多いげ?)の導入、npmの勉強なども出来てしまうのだ。

ということで、3つ目の方法でいくのがいいっすね!

続きはまた書くよー。

Read More