CSSフレームワークとして人気のSemantic UIですが、
ガンガンバージョンアップ中なのかテーマを変える機構はあるのですが、自分でbuildしないといけません。(2015/02/05 現在)
多分、しばらくするともっと簡単にテーマを変えられるようになると思いますが。。
まず最初にインストールの仕方。
$ npm install semantic-ui $ cd node_modules/semantic-ui $ npm install $ gulp install #なんか色々聞かれるけどデフォルトで大丈夫
で、テーマですが、src/themesディレクトリ内にテーマのディレクトリがあってそのディレクトリ名から選択します。
$ ls src/themes amazon bookish chubby default fixed-width github material raised round striped twitter basic bootstrap3 classic duo flat gmail pulsar resetcss rtl timeline
今回materialのテーマを選ぶとします。
次にsrc/theme.configを編集します。
theme.configをみると以下のようになっていて、
####上省略#### /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below Be sure to update the user folder name (see README) */ /* Global */ @site : 'default'; @reset : 'default'; /* Elements */ @button : 'default'; @divider : 'default'; @flag : 'default'; @header : 'default'; ####下省略####
最初は'default'テーマが指定されている状態です。
このdefaultの文字をテーマ名に変えます。
しかし全部のdefaultを変えてしまうと次のgulp buildでエラーになるので、
以下のようにsrc/themes/テーマ名の下のディレクトリ/ファイルを調べます。
$ tree src/themes/material src/themes/material ├── elements │ ├── button.overrides │ ├── button.variables │ ├── header.overrides │ └── header.variables ├── globals │ ├── site.overrides │ └── site.variables └── modules ├── modal.overrides └── modal.variables
materialテーマだと、"button"と"header"と"site"と”modal”はmaterial用のデザインが用意されていることがわかったので、
src/theme.configの"@button"と"@header"と"@site"と”@modal”の'default'を'material'に変更します。
結果、下のようになります。
$ grep material src/theme.config @site : 'material'; @button : 'material'; @header : 'material'; @modal : 'material';
theme.configを変更し終わったら、
$ gulp build
を実行して下さい。
distディレクトリ以下にcssが再生成されます。