ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2