実直なHTML5/CSS3でつくられたモバイルファーストのフレームワーク -Markup Framework

商用利用も無料、変更もコピーも再配布もOK、汎用性に優れたレイアウトやUIエレメントをスタンダードなHTML5/CSS3で実装したフレームワークを紹介します。

ウェブサイトを構築する際に、ベースとして利用するのによさそうです。

サイトのキャプチャ

Markup Framework

Markup Frameworkの特徴

  • レスポンシブ対応、モバイルファーストのレイアウト。
  • 再利用可能なUIエレメントのライブラリ。
  • 最新のスタンダードなHTML5/CSS3を使用。
  • ピュアなHTMLとCSSで、Hackなし、JavaScriptなしです。
  • ミニマルなマークアップ。
  • ページの容量は小さめ。
  • サーチエンジンにフレンドリー。
  • アクセシブル。
  • セマンティックスとスタイルの明確な分離。
  • モジュール式で、必要なコンポーネントのみの利用可。
  • 効率的なスタイルが最適なパフォーマンスを提供。
  • オープンソースのフォントを利用。
  • 印刷時も考慮。

ライセンス

ライセンスはOmnilicenseで、ダウンロードもコピーも変更も再配布も自由です。
詳しくは下記ページをご覧ください。

Markup Frameworkのサポートブラウザ

A-Gradeの全てのモダンブラウザをサポートします。
IE7/8は、条件付きスタイルシートで対応。

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Ineternet Explorer

Markup Frameworkのデモ

デモはタイポグラフィ、フォーム、UIエレメント、レイアウト、グリッドの5種類です。

デモのキャプチャ

Typography

見出し、パラグラフをはじめ、キャプション、テーブル、引用、リスト、リンクなど、テキスト関連のデモです。

デモのキャプチャ

Controls

フォーム関連、テキストボックス、パスワード、テキストエリア、ラジオボタン、チェックボックス、セレクトボックス、各種ボタンなど。

デモのキャプチャ

Widgets

ヘッダ、ロゴ、パンくず、ナビゲーション、ボックス、メッセージなどのエレメント群。

デモのキャプチャ

Layouts

1カラム1種、2カラム8種、3カラム5種のモバイルファーストのレイアウト。

デモのキャプチャ

Grids

12カラムは2,3,4,6、16カラムは2,4,8、24カラムは2,3,4,6,8,12で、各エレメントを配置します。

top of page

©2017 coliss