px指定の次はコレ!フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework

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サイトやブログで見かけるエレメントやコンポーネントが揃っており、それぞれ単体でも利用できます。

サイトのキャプチャ

Get Started

Schemaのファイル一式のダウンロード、基本的な使い方。

サイトのキャプチャ

Media Queries

各デバイス用のブレイクポイントの設定、特定のデバイスだけ表示・非表示させる設定など。

サイトのキャプチャ

Grid System

使いやすい12カラムのグリッドをベースに、%とremを利用できます。

サイトのキャプチャ

Typography

フォントサイズはremで設計されており、日本語を利用する時も簡単にカスタマイズできます。

サイトのキャプチャ

Navigation

ナビゲーションやページネーションは非常にシンプルなデザインです。

サイトのキャプチャ

Buttons

ボタンはさまざまなスタイルが用意されており、フラットやソリッドやグラデなどが簡単に利用できます。

サイトのキャプチャ

Badges

バッジやボタンもセマンティックなマークアップで実装されています。

サイトのキャプチャ

Panels

パネル類はバリエーションが豊富です。

sponsors

top of page

©2018 coliss