Semantic UI というフレームワーク

Semantic UI というスタイルが LESS で書かれたフレームワークがある。特長として書かれていることをいくつか抜粋する。

• BEM や SMACSS のような効果を別のアプローチで実現。その結果、簡潔で直感的な HTML が書けるようになる
• JavaScript を含んでいる
• 継承と変数で組み上げられた CSS は、テーマのカスタマイズが簡単
• 50 以上の UI コンポーネント
• レスポンシブなデザイン
• React、Angular、Meteor、Ember といった他のライブラリーと組み合わせて使うこともできる

ということらしい。クラスの設計や、コンポーネントの分類を見るとクセがありそうだなと思った。JavaScript を含む分、Bulma よりは複雑だろう。

Integrations というページがあり、ここでは React など他のライブラリーとの組み合わせ方やその仕組みについて書かれている。

ビルドツールに関する説明が書かれたページもある。Semntic UI は gulp でインストールできるから楽チンそうだ。必要なパッケージやビルド設定は semantic.json に書かれている。テーマの設定は theme.config に書かれており、これは説明したページが別にある。

Recipes のページでは、Sketch ファイルが用意されてるからコード書く前にデザインがつくりやすいっていうのと、LESS ファイルを部分的に読み込んで使うこともできるということを覚えた。

Glossary は用語集で、Semantic UI の CSS が Globals、Element、Collection、Views、Modules、Behaviors に分類されることがわかった。