stackgrid.adem.js

JavaScript

コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

stackgrid.adem.jsはコンテンツをグリッド状にスタッキングしていくことができます。コンテンツ間の余白やカラムのワイド幅などを指定することが可能になっているので、細かいカスタマイズをしたい場合にはとても便利ですね。

stackgrid.adem.js

デモ

デモではSmall、Medium、Largeから各サイズのコンテンツをスタックしていくことができる他、Gutter Onで余白を入れて、Gutter Offで余白を無くすことができます。

また、フレキシブルなレイアウトになっているので、ブラウザ幅を可変させることでコンテンツがアニメーションしながら再配置されます。

他にもデモメニューにあるFluidをクリックすれば横幅いっぱいに広がったレイアウトを見ることができます。

ダイナミックに切り替わっていくスタッキング可能なグリッドレイアウトを実装したい方は是非チェックしてみてください。

stackgrid.adem.js

関連記事

  1. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  2. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  3. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  4. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  5. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP