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

Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。

ということでテーマも新しいものに乗り換える必要があります。今回はShardsを紹介します。

Shardsの使い方

カラーリングです。

カラーリング
カラーリング

タイポグラフィ。

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

アイコンはマテリアルアイコンとFont Awesomeに対応しています。

アイコンセット
アイコンセット

フォーム。

フォーム
フォーム

バリデーションにも対応しています。

バリデーション
バリデーション

スライダー。

スライダー
スライダー

日付ピッカー。

日付ピッカー
日付ピッカー

カード。

カード
カード

ボタン。

ボタン
ボタン

プログレスバー。

プログレスバー
プログレスバー

ツールチップとアラート。

ツールチップ&アラート
ツールチップ&アラート

ナビゲーションバー。

ナビゲーションバー
ナビゲーションバー

作れるサイトのデザインデモです。

デモ1
デモ1

こんなスクロール型のサイトにも。

デモ2
デモ2

今風なデザインにも使えます。

デモ3
デモ3

Shardsを使えばBootstrap4を適用したサイトを格好良く仕上げることができます。Bootstrapっぽさが消えてスタイリッシュに仕上がることでしょう。今後出てくるテーマのことを考えても標準の書き方に沿ったテーマを使っておけば無難です。

ShardsはCSS製のオープンソース・ソフトウェア(MIT License)です。

DesignRevision/shards-ui: Shards is a free and modern Bootstrap 4 (final) UI toolkit.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2