Bootstrapの登場によってフロントエンドの開発がとても簡単にできるようになっています。Bootstrap以外でもたくさんのフレームワークがあります。それらを使いこなすことでUIの組み立てが高速化しています。 Schema UI Frontend Frameworkもその一つです。Webアプリケーションのプロトタイプはもちろん、そのままプロダクションにするまで一気通貫に高速化してくれるUIフレームワークです。

Schema UI Frontend Frameworkの使い方

スクリーンショット多めで紹介します。

グリッド。オフセット対応です。

グリッドのネストも可能。

リンク、水平線、リスト。

ヘッダー。

カラーリング。

ページネーション。

枠のないページネーション。

ナビゲーション。

リストグループ。

ヘッダーつけたり枠線を消したり。

テーブル。

ストライプ。

フォーム。

アラート系。

フォーカス。その他の入力系。

ボタン。

幅の広いボタン。

丸いボタンなど。いろいろありますね。

バッジ。

パネル。

カラーリングしたパネル。

フォームにラベル追加。

さらにサイズ変更。

アイコンの追加もできます。

ボタングループ。

ボタングループでカラーリング。

アラート。

アラートにボタンとリンク。

ラベル。

Schema UI Frontend Frameworkは多種多様なデザインのコンポーネントが提供されています。もちろんレスポンシブ対応です。LESSを使って開発されています。Bootstrapとはまた違う魅力的なフレームワークですね。

Schema UI Frontend FrameworkはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。

SCHEMA UI Frontend Framework| A powerfully light, responsive, and lean front-end UI framework built with Less. | CSS Framework | Less Framework danmalarkey/schema