Semantic UI使用メモ

ちょっと詰まったところがあれば、それを追記していく。

Framework

playframework
ディレクトリ構成は標準のまま

インストール

npm install semantic-ui --save

とりあえずAutomatic

その流れで

gulp build

routes

GET     /assets/*file            controllers.Assets.versioned(path="/semantic", file: Asset)

main.scala.html

Assetを追加したので修正する必要あり

<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("/public", "stylesheets/main.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("/semantic", "dist/semantic.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("/public", "images/favicon.png")">
        <script src="@routes.Assets.versioned("/public", "javascripts/hello.js")" type="text/javascript"></script>

補足

以下の記載でAssetの追加が出来るようだが、上手く行かなかった。

build.sbt

unmanagedResourceDirectories in Assets += baseDirectory.value / "semantic"

問題

icon が表示されない

semantic.css と同じディレクトリ配下(※)に themes 配下のフォルダを置く。

※ /public/stylesheets のこと

余計な装飾なしにセンタリングしたい

<div class="ui basic center aligned segment">
  Center
</div>

basic をつけることで無駄な装飾がつかない

gulpfile.js

gulpfile.js

var gulp = require('gulp');

gulp.task('copy', function() {

  console.log('Hello gulp')

  // copy javascript
  gulp.src('semantic/dist/*.js').pipe(gulp.dest('public/javascripts'))

  // copy css
  gulp.src('semantic/dist/*.css').pipe(gulp.dest('public/stylesheets'))

  gulp.src('semantic/dist/themes/**').pipe(gulp.dest('public/stylesheets/themes'))

});