Flexboxはすごい便利！最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートのまとめ
Post on:2016年8月8日
sponsors
2016年1月12日にIEの古いバージョンのサポートが終了して半年が過ぎ、IEの対象バージョンをIE11とEdgeに、そしてFlexboxの導入をしている制作者も多いと思います。
Flexboxを使って、最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートやフレームワークを紹介します。
イラスト: Girls Design Materials
Flexboxの各プロパティの詳しい解説は、下記ページをご覧ください。
外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できます。カスタマイズも簡単で、ブルマをベースに自分用のデザインを適用することもできます。
参考: ブルマの紹介記事
ネーミング規則にBEMとITCSSを使い、モバイルファーストでさまざまなコンポーネントが簡単に実装できる超軽量のフレームワーク。
レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。各パネルのレイアウトもさまざまなものが用意されており、インタラクション用のコンポーネントも利用できます。
参考: drivewayの紹介記事
Materialize
Materialize -GitHub
Material Designをベースに、ユーザエクスペリエンスにフォーカスして実装されたフレームワーク。アニメーションを使った楽しいエフェクトもたくさん用意されています。
Flexbox Grid
Flexbox Grid -GitHub
Flexboxを使った汎用性のあるさまざまなグリッドを簡単に利用できます。
Flexbox Patterns
Flexbox Patterns -GitHub
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するコードが利用できます。
参考: Flexbox Patternsの紹介記事
10kb以下のテンプレートでレスポンシブ用のレイアウトを実装し、20kb以下でのページ実装を実現させる超軽量のフレームワーク。
アイコンを含めてもトータル31kb、肥大化される他のフレームワークとは異なり、超軽量でWebアプリケーションが実装できます。
グリッドとセル、2つのclassで構成された、Flexboxでグリッドだけを実装するためのフレームワーク。
Simple Grid
Simple Grid -GitHub
今回紹介している中では最軽量の1.6kb。Flexbox無しで12カラムのグリッドを実装するシンプルなフレームワーク。
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウト。しかもレスポンシブ対応です。
sponsors
