このブログの見栄えを綺麗にするために、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.overridesでborder-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/