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って?って話はあると思うけど、こういう考え方もあるよという話でした。

Comments are closed.