Griddle
Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CSSグリッドを簡単なclassで使いこなせるように組み込まれています。上デモでは割と複雑なレイアウトになっていますがRWD対応の為、media queriesが効いてしまっていますのでCodepenでご確認下さい。
既存のWebサイトへの導入も想定しており、classにはコンフリクトを起こさないように全て.is-或いは.has-といったプレフィクスが加えられています。グリッドを作る場合、ラッパーにis-gridクラスを加え、is-col-を接頭語に持つクラスで構成していきます。
<div class="is-grid"> <div class="is-col-1 is-col-6-md">Column</div> </div>
Griddleには様々なクラスが用意されており、複雑なレイアウトにも対応できるようになっています。
更に、タイポグラフィやカラー等、少しのユーティリティクラスも用意されているので通常のCSSフレームワークのように使えるようにもなっています。が、基本的には自身でカスタマイズして使う事を想定してあるみたいです。
この手のフレームワークは既に沢山ありますし、本フレームワークも新しく開発された後発品ではないので他のフレームワークが合わない、コンフリクトを起こす等で使えないケースの代替という印象でした。ライセンスはMITとの事です。
