EasyGrid

EasyGridはカスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワークです。

依存性の無い軽量なJavaScrioptとCSSで様々なRWDのグリッドレイアウトを構築出来るようになっています。例えば上SSのレンガ風だったり各アイテムの高さを揃えた綺麗なグリッドだったり。非依存なのでBootstrapなど他のフレームワークとの併用も問題ありません。

<script src="easygrid.js"></script>
<link rel="stylesheet" href="easygrid.css">

スクリプトを読み込んで

document.addEventListener("DOMContentLoaded", function() {
     var demo1 = new EasyGrid({
       selector: "#foo",
       dimensions: {
         width: "150",
         height: "270",
         margin: "5",
         minHeight: "20", 
         maxHeight: "40"  
       },
       animations: {
         fadeInSpeed: "100",
         addItemSpeed: "100"
       },
       style: {
         background: "transparent",
         borderRadius: "5"
       }
     });
     
     demo1.AddItem({
        items: "hogehoge"
     });
});

グリッドレイアウトの定義を決めるだけなのでスタイルを整えればあとはEasyGridが配置をセッティング通りに整えてくれます。

JavaScriptファイルは非圧縮でも14KB程度、CSSは300バイト（非圧縮で22行）とフレームワーク全体でも非常に軽量です。

コンテンツを選びますが、需要はそれなりに高そうな気がします。ライセンスはMITとの事です。

EasyGrid