Semantic UI から Fomantic UI へ

Semantic UI

CSSフレームワークは、特に何も考えずに慣れてた bootstrapを使ってたんですけど、1年前くらいに、もっとシンプルで良さそうなのないかなと探していたところ Semantic UI を見付けました。

いくつか気に入るポイントがあったので、小さいプロジェクトでは採用するようになってました。

文書構文を素直に書ける
比較的div構造が深くなりにくい
なんと言っても、クラス名の指定の方法が自然に感じた!

クラスの指定の方法が自然というのは、bootstrapでは、ボタンには btn を指定し、プライマリなボタンをには、 btn btn-primary を指定してました。 Semantic UIでは、ボタンには、ui buttonを指定し、プライマリなボタンには ui primary button、赤いボタンには ui red button、右良せの赤いボタンには ui right floated red button を指定します。ui を前置する必要はあるけど、単語で修飾していくスタイルで定義できるのです。 bootstrapなどで一般的な「btn btn-primary」という定義方法の方が、実装側の負担は減りそうです。さらにブラウザの処理を推測しても負荷が減りそうです。しかし、Semantic UI の単語で修飾していくスタイルは、それらの利点より、利用者側の作業的な負担と頭脳的な負担を減らすことにフォーカスしているように見えます。

  <button class="ui button" type="submit">Submit</button>

  <button class="ui primary button" type="submit">Submit</button>

  <button class="ui red button" type="submit">Submit</button>

  <button class="ui red right floated button" type="submit">Submit</button>

Semantic UI から Fomantic UI へ

Semantic UI でラジオボタンのrevalidate(再検証)が動作しないことがあって、修正してみたので、Semantic UI のIssuesを見ていたところ、まさに同じ現象がバグ報告として上がっていて、長い間放置された挙句、botによりクローズされていた。これはひどい。で、コメントを読み進めると、Fomantic UIで修正されていた。

https://github.com/Semantic-Org/Semantic-UI/issues/5380

Fomantic UI のページを見てみる。 Semantic UI は開発が停滞しつつあるという問題があり、 Semantic UIからフォークしたコミュニティ版が、Fomantic UIとのことです。 Semantic UIにマージすることを目指していることからも、特殊な背景があるようです。

The future of Fomantic as v3.0 #319https://github.com/fomantic/Fomantic-UI/issues/319

現在は、V3へ向けてのコミッタの意気込みと周囲の盛り上りもドラマがあるようなので注目していきたいです。

今作ってるプロジェクトでは、Fomantic UIに移ろうかな。。