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

デザインフレームワークを使えば見栄えのいいWebサイトがさくさくと作れます。そのまま完成には至らなくとも、プロトタイプであれば十分な品質になるのではないでしょうか。

現在、様々なデザインフレームワークがありますが、今回は名前があれな気がするResponsiveというソフトウェアを紹介します。SEO的にきつそうな気はしつつも気にせずいきましょう。

Responsiveの使い方

今回はスクリーンショット多めでいきます。

タイポグラフィ。
タイポグラフィ。

幅によって表示する、しないクラスを指定できます。
幅によって表示する、しないクラスを指定できます。

グリッド。定番の12分割です。
グリッド。定番の12分割です。

オフセットもできます。
オフセットもできます。

フォーム。
フォーム。

ラベルの横表示。
ラベルの横表示。

ボタン。
ボタン。

グループボタン。
グループボタン。

テーブル。
テーブル。

テーブルはもちろんレスポンシブです。
テーブルはもちろんレスポンシブです。

画像表示。高さ固定もいけます。
画像表示。高さ固定もいけます。

iframe。動画表示、Googleマップなどもいけます。
iframe。動画表示、Googleマップなどもいけます。

VineやInstagramも埋め込みもいけます。
VineやInstagramも埋め込みもいけます。

videoタグにも対応しています。
videoタグにも対応しています。

リスト。定義リストも対応しています。
リスト。定義リストも対応しています。

アラート。
アラート。

コードのブロック。
コードのブロック。

高さを固定にもできます。
高さを固定にもできます。

ResponsiveはシンプルなUIのデザインテンプレートだと思います。デザインがこっていない分、プロトタイプの開発などにマッチしそうです。

ResponsiveはHTML5/JavaScriptのオープンソース・ソフトウェア(MIT License)です。

A real-world website developer framework :: Responsive

ResponsiveBP/Responsive

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2