このブログの見栄えを綺麗にするために、Semantic UIを使ってみる。
https://semantic-ui.com/
CSSフレームワークは使ったことなくて、Bootstrapが有名だということくらいしか知らなかったけど、いろいろ調べていく中でSemantic UIが良さそうだと思うに至った。
曰く、”Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but without the tedium.“。
命名が苦手でだいたい常に混乱してるから、命名に重きをおいてくれているのはすごく魅力的。

インストール

下記のドキュメントの通り。
https://semantic-ui.com/introduction/getting-started.html

まずgulpを入れる。

$ mkdir semantic-ui-workspace # ここを「semantic-ui」というディレクトリ名にしたら、npm-installでエラーが出た。。。
$ cd semantic-ui-workspace
$ npm init
$ npm install --save-dev gulp

そしてビルド。

$ npm install semantic-ui --save
$ cd semantic/
$ .../semantic-ui-workspace/node_modules/gulp/bin/gulp.js build

--save--save-devの違いよくわかってなかったけど、下記ページがわかりやすかった。今回は特に使い分けなくても良さそう。
https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95

カスタマイズ

CSSのカスタマイズはほぼ、変数をいじれば良さそう。
.../semantic-ui-workspace/semantic/src/siteの、各UI部品のxxxx.variablesをいじれば良い。
いじれる変数は、.../semantic-ui-workspace/semantic/src/themes/defaultの、xxxx.variablesで見られる。
しかし、すべての変数のリストは見当たらなかった。
下記のサンプルとかも参考になる。
https://github.com/Semantic-Org/example-github/blob/master/semantic/src/themes/github/globals/site.variables

下記のドキュメントで、ディレクトリの構造がなんとなくわかる。
https://semantic-ui.com/introduction/build-tools.html#why-build-tools
https://semantic-ui.com/usage/theming.html#default-theme
https://semantic-ui.com/introduction/build-tools.html#semanticjson

下記のサンプルを見つつ試行錯誤するとけっこううまくいった。
http://semantic-org.github.io/example-github/
https://github.com/Semantic-Org/example-github/tree/master/semantic/src/themes/github

変数をいじってもなんともできないものは、xxxx.overridesにCSSを直接書く。
具体的には、menuのborderの幅を下だけ1pxにしたかったんだけれども、xxxx.variablesでは、ボーダーの幅は下記のようになってて、下だけの指定ができない。

@borderWidth: 1px;
@border: @borderWidth solid @borderColor;

なので、xxxx.overridesborder-widthをCSSで指定した。

html側

jQueryを別途読み込む必要がある。
https://semantic-ui.com/introduction/getting-started.html#include-in-your-html

あと、インタラクティブなUI部品については、対象になるDOM要素を$('.ui.accordion').accordion();みたいなコードで初期化する必要がある。
ドキュメントの、各部品のページにサンプルコードがある。

デプロイ

今回、hugoのテーマとしてSemantic UIを使う。
なので、xxxx.variables等々をカスタマイズしたら、下記コマンドでhugoのディレクトリにファイルを移してデプロイ。

$ cd .../semantic-ui-workspace/semantic
$ .../semantic-ui-workspace/node_modules/gulp/bin/gulp.js build
$ cp .../semantic-ui-workspace/semantic/dist/semantic.min.css .../themes/テーマ名/static/css/
$ cp .../semantic-ui-workspace/semantic/dist/semantic.min.js .../themes/テーマ名/static/js/