px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework
Post on:2014年11月27日
sponsors
Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。
最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。
Schema UI Framework
Schema UI Framework -GitHub
「rem」の詳しい説明は、以前の記事をご覧ください。
Schemaの特徴
Schema UI Frameworkの特徴
SchemaはMITライセンスのオープンソースのプロジェクトで、軽量でクリーンなフロントエンド用のフレームワークです。
- セマンティックなマークアップ
- Web標準で、きれいなマークアップが使用されています。
- LESSベース
- SchemaはLESSで構築されており、変数やmixinや関数のような機能も利用できます。
- 優れたカスタマイズ性
- デザインのカスタマイズに柔軟に対応できるよう設計されています。
- コンポーネント
- それぞれのコンポーネントはそれだけで機能するようモジュール式で設計されています。
- レスポンシブ対応
- レスポンシブ対応のグリッドをベースにスマホからデスクトップまで、さまざまなデバイスに対応しています。
- プロトタイプの作成
- すぐに利用できるコンポーネントが数多く用意されており、プロトタイプも簡単に作成できます。
対応ブラウザ
Schemaはモダンブラウザのために作成されたフレームワークです。
デスクトップ・タブレット・スマホの各OSで動作する最新のブラウザをサポートしています。
- Windows (Chrome, Firefox, IE, Opera)
- OS X (Chrome, Firefox, Opera, Safari)
- Android (Chrome, Firefox, Opera, Safari)
- iOS (Chrome, Firefox, Opera, Safari)
Schemaのデモ
デモでは最近のWebサイトやブログで見かけるエレメントやコンポーネントが揃っており、それぞれ単体でも利用できます。
Schemaのファイル一式のダウンロード、基本的な使い方。
各デバイス用のブレイクポイントの設定、特定のデバイスだけ表示・非表示させる設定など。
使いやすい12カラムのグリッドをベースに、%とremを利用できます。
フォントサイズはremで設計されており、日本語を利用する時も簡単にカスタマイズできます。
ナビゲーションやページネーションは非常にシンプルなデザインです。
ボタンはさまざまなスタイルが用意されており、フラットやソリッドやグラデなどが簡単に利用できます。
バッジやボタンもセマンティックなマークアップで実装されています。
パネル類はバリエーションが豊富です。
sponsors
