FlexboxベースのCSSフレームワークを比較する

私は普段、CSSフレームワークは「bootstrap」か「foundation」を利用しています。ワードプレスのテーマを自作する場合も、これらのフレームワークを使うことが多いのですが、正直なところ全部の機能を必要としているわけではないので、重いよなあ、と考えることも多く、組み込みの際悩みます。といってあまりにレイアウト実現の種類が少ないと顧客のニーズに応えることができません。
昨今、各種ブラウザがflexbox対応になっていますので、この際、Wordpress組み込み時にはGridレイアウト用に、Flexboxベースでjｓに依存しない軽量のCSSフレームワークの利用を検討することにしました。
選ぶ基準は
・人気がある（今後の展開が期待できる）
・jsやjQueryに依存しない
・余計な機能のない軽量なもの（レスポンシブのグリッドを使えればまずはOK）

Bulma

https://bulma.io/

特徴

・モジュラー形式になっており、必要な機能を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

https://purecss.io/

特徴

・デフォルトは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