私は普段、CSSフレームワークは「bootstrap」か「foundation」を利用しています。ワードプレスのテーマを自作する場合も、これらのフレームワークを使うことが多いのですが、正直なところ全部の機能を必要としているわけではないので、重いよなあ、と考えることも多く、組み込みの際悩みます。といってあまりにレイアウト実現の種類が少ないと顧客のニーズに応えることができません。
昨今、各種ブラウザがflexbox対応になっていますので、この際、Wordpress組み込み時にはGridレイアウト用に、Flexboxベースでjｓに依存しない軽量のCSSフレームワークの利用を検討することにしました。
選ぶ基準は
・人気がある（今後の展開が期待できる）
・jsやjQueryに依存しない
・余計な機能のない軽量なもの（レスポンシブのグリッドを使えればまずはOK）
Bulma
特徴
・モジュラー形式になっており、必要な機能をimportして利用することができます。
基本のHTML記述
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>デフォルトのブレイクポイント
mobile: up to 768px
tablet: from 769px
desktop: from 1024px
widescreen: from 1216px
fullhd: from 1408px
Pure
特徴
・デフォルトは24カラムグリッド
基本のHTML記述
<div class="pure-g"> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> </div>
デフォルトのブレイクポイント
sm @media screen and (min-width: 35.5em) ≥ 568px
md @media screen and (min-width: 48em) ≥ 768px
lg @media screen and (min-width: 64em) ≥ 1024px
xl @media screen and (min-width: 80em) ≥ 1280px