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

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

Bootstrapはとても人気がありますが、より実践的に使われるであろうUIコンポーネントを多数提供してくれるデザインフレームワークがSemanticです。


ID、パスワード入力フォーム。


チェックボックス。


ローティング。これは良くある処理だけに便利ですね。


入力エラーも項目毎の表示がサポートされています。


ボタン。


押せる/押している/押せないといった各ステータスごとの表示ができます。


Bootstrap並に様々なカラー設定が用意されています。


こんなフィード表示も。


日付を表示したり、下に追加の画像を表示したり。


コメント。カード型で格好いいです。


多段のコメント。


アイテム。こういう表示も良くありますよね。


さらに複数並べた形。左右はつながっています。


最近多い背景を隠して表示するデザインです。


さらにそれを特定のDOMに対してのみ適用するデザイン。


パン屑だけでも数種類用意されています。


テーブル。チェックやバツボタンもサポートされています。


右側から出てくるメニュー。


回転するボックス。


フローティングのツールチップ。

SemanticではBootstrap以上にアニメーションやウィジェットの表示パターンが多く登録されています。どれを見てもああ、これは使いたくなるといったデザインのものばかりです。デザイナー不在のプロジェクトでもSemanticを使うと格好いいデザインに仕上がりそうです。


MOONGIFTはこう見る

Bootstrapを使ってサイトを作っていると、もっとカスタマイズしたウィジェットが欲しいと感じることが多々あります。そういったウィジェットはない訳ではないのですが、Bootstrap自体の進化が早いために古いライブラリは既に使えなくなっていたりします。

Semanticではそういった良くある表現を予め内包してくれていますので、デザインで困ることが少なくなるのではないでしょうか。もちろんそれでも足りないと感じることはあるでしょうが、Boostrapよりは少ないのではないかと思います。

Getting Started | Semantic UI

jlukic/Semantic-UI

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2