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

多くのWebサービスがデザインテンプレートを公開するようになっています。その恩恵はとても大きく、デザインテンプレートをベースにすれば格好良いデザインのサイトが簡単に立ち上げられるようになっています。

今回はその一つ、BuzzFeedが公開したテンプレートSolidを紹介します。

Solidの使い方

スクリーンショット多めで紹介します。まずはタイポグラフィ。

リスト。

カラーリング。ビビット系の強いカラーリングです。

ボタン。

フォーム。結構シンプルです。

大きさも変更できます。

グリッド。

テーブル。これもまたシンプルです。

ボーダー付きテーブル。

グリッドはレスポンシブ対応です。

レイアウト設定。

マージンもクラスで設定します。

ボーダーのクラス。

画像を丸く表示するためのクラスもあります。

Solidはシンプルなデザインテンプレートですが、色合いは強いものが多くの使われています。BuzzFeedはいわゆるバイラルメディアと呼ばれるものなので、はっきりと分かるデザインが好まれるのでしょう。

SolidはHTML5/CSS3用のオープンソース・ソフトウェア(ISC License)です。

WTF is Solid?- Solid

bf-solid

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2