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

スタイルシートのデザインフレームワークを使っていると、自分が行いたいデザインをどうすれば実現できるかを都度調べる必要があります。md-6とかそういった類のクラスを確認して記述したりします。

つまり頭の中で自分のやりたいことと、実際の記述とを変換する必要があるのです。これは意外とストレスではないでしょうか。それを解決する、セマンティック(意味がある)なデザインフレームワークがSemantic UIです。

Semantic UIの使い方

基本形を見てみます。

<div class="ui stackable center aligned page grid">
  <div class="fourteen wide column">
    <h1 class="ui inverted icon header">
      <img src="/images/icons/pen.png" class="icon image"/>
      Simplify Your Codebase
    </h1>
    <p>Semantic's conventions are based around <a target="_blank"><b>common usage</b></a> and not prescription. Syntax borrows useful principles from natural language like plurality, tense, and word order so your code explains itself.</p>
    <!-- Recursion Omitted (Turtles all the way down) !-->
  </div>
</div>

例えばこのようになります。スタックできるのであればstackable、中央寄せならcenterなど実現したい表現と記述内容を合わせているのが特徴です。ではここからは主なデザインについて。

こんな多種多様なデザインが用意されています。
こんな多種多様なデザインが用意されています。

メッセージやチェックボックス。
メッセージやチェックボックス。

テーマも用意されています。GitHub風。
テーマも用意されています。GitHub風。

ボタン。
ボタン。

分割。グリッドと似たようなものでしょうか。
分割。グリッドと似たようなものでしょうか。

このように縦に分けることも。
このように縦に分けることも。

旗のアイコン。
旗のアイコン。

ヘッダー。
ヘッダー。

ブロック。円形もあります。
ブロック。円形もあります。

カラー。フラット系ですね。
カラー。フラット系ですね。

アイコン。
アイコン。

画像。下に説明をつけることもできます。
画像。下に説明をつけることもできます。

円形、角丸。
円形、角丸。

フォーム。
フォーム。

ラベル付き。
ラベル付き。

リンクなど。
リンクなど。

タグ。
タグ。

バッジ。
バッジ。

ローダー。
ローダー。

マウスオーバーでフェードしたりすることもできます。
マウスオーバーでフェードしたりすることもできます。

スタックを使うと重ね合わせができます。
スタックを使うと重ね合わせができます。

ステップ。
ステップ。

アイコンのサイズも自由に変更できます。
アイコンのサイズも自由に変更できます。

様々なフォームオブジェクト。
様々なフォームオブジェクト。

グリッド。
グリッド。

間隔の細かな指定もできます。
間隔の細かな指定もできます。

パネル風の表示。
パネル風の表示。

メニュー。
メニュー。

サブメニューも。
サブメニューも。

アイコンメッセージ。
アイコンメッセージ。

カラーアラート。
カラーアラート。

テーブル。
テーブル。

行ごとの色指定もできます。
行ごとの色指定もできます。

インパクトあるカラーリング。
インパクトあるカラーリング。

フィード風表示。
フィード風表示。

アイコンリスト。
アイコンリスト。

カスタマズした検索ボックス。
カスタマズした検索ボックス。

Semantic UIはデザインとしてはもちろん、そのクラス指定やデザイン思考がより可読性、理解がしやすいように作られています。そのため学習コストが低く使いこなせそうです。

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

Semantic UI

Semantic-Org/Semantic-UI

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2