WordPress Bonesテーマのgrid使い方メモ

Tweet

Pocket

現在最新のBonesテーマVersionは 1.7。
bonesのデフォルトのcssでは、小（mobileのm?)、中(tabletのt?)、大(desktopのd?)の3つのサイズをmedia queryで指定している。

@media (max-width: 767px) {
  .m-all {
    float: left;
    padding-right: 0.75em;
    width: 100%;
    padding-right: 0; }
    中略
}
/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {
  .t-all {
    float: left;
    padding-right: 0.75em;
    width: 100%;
    padding-right: 0; }
    中略
}
/* Landscape to small desktop */
@media (min-width: 1030px) {
  .d-all {
    float: left;
    padding-right: 0.75em;
    width: 100%;
    padding-right: 0; }
    中略
}

gridを使ってレイアウトを定義するときは、

<div class="wrap cf">
    <div class="m-all t-1of3 d-2of7 cf" >
        1
    </div>
    <div class="m-all t-1of3 d-2of7 cf">
        2
    </div>
    <div class="m-all t-1of3 d-3of7 last-col cf">
        3
    </div>
</div>

のように、使いたい各サイズの指定すればいい。grid数はテーマ内のcss library/css/style.cssを参照