Semaitic UI でサイトヘッダーをつくる

Semantic UI の Container、Menu 、Image 、Search 、Icon 、Button などを使ってサイトヘッダーをつくった。

本当はフィードみたいなものまでつくり切りたかったけど全然進まなかった。思いの外大変だ。

HTML はつぎのようになっている。Container と Menu でほとんどのレイアウトを決めて、あとはデザインに合わせて Button などのコンポーネントを使った。

<div class="ui fixed secondary menu pointing siteHeader">
  <div class="ui container">
    <div class="left menu">
      <a href="#" class="active item">
        <i class="icon home"></i>
        Home
      </a>
      ...
    </div>
    <a href="#" class="item">
      <img class="ui avatar image centered circular" src="logo.png" alt="">
    </a>
    <div class="right menu">
      <div class="item">
        <div class="ui search">
          <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      <a href="#" class="item">
        <img class="ui avatar image centered circular" src="avatar.png" alt=""><!-- no image -->
      </a>
      <a class="ui item">
        <button class="ui primary button circular">Follow</button>
      </a>
    </div>
  </div>
</div>

サイトヘッダー内の配置を整えるために上書き用のスタイルは少しだけ書いた。

.siteHeader {
  $itemSize: 54px;

  .item {
    height: $itemSize; // ロゴやアバター画像とサイズを合わせる
  }
}

感想。

• Semantic UI のスタイルは継承やセレクタが頻繁に使われていて詳細度が高く、スタイルを上書きするのがつらい
• .ui.xxx という Semantic UI の書式とは別にして、上書き用の命名ルールがあるとスタイルが管理しやすくなりそう（ .siteXxxx みたいな）
• Semantic UI のドキュメント見ながらスタイル書くのがしんどいけど、こういうもんか