Play FrameworkでBootstrapにかわるテンプレートセットAtlassian User Interfaceを使ってみる

Bootstrapは有名ですが、Atlassian User Interfaceなんてのもあります。

https://docs.atlassian.com/aui/latest/

これをPlay Frameworkで使ってみましょう。

build.sbt

"org.webjars" % "aui" % "5.6.7"

app/views/main2.scala.html

@(title: String)(content: Html)(css: Html)(js: Html)

<!DOCTYPE html>
<html>
    <head>
        <title>@title</title>
        <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("aui/css/aui-all.css"))'>
        <!--[if IE 9]><link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("aui/css/aui-ie9.css"))'><![endif]-->
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <link rel="stylesheet" href="@routes.Assets.versioned("stylesheets/main.min.css")">
        @css
    </head>
    <body>
        @content
        <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))'></script>
        <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("aui/js/aui-all.js"))'></script>
        @js
    </body>
</html>

jqueryが必要なようですので、これも読み込みます。あとはauiのJSを読み込みます。

app/views/samples/aui.scala.html

@()
@import play.i18n._

@main2(Messages.get("home.title")) {
<!-- Must be the immediate child element within <header role="banner" id="header"> from the Page pattern -->
<nav role="navigation" class="aui-header aui-dropdown2-trigger-group">
  <div class="aui-header-primary">
    <h1 class="aui-header-logo aui-header-logo-jira" id="logo"><a href="#"><span class="aui-header-logo-device">JIRA</span></a></h1>
    <ul class="aui-nav">
      <li><a href="http://example.com/">Navigation item or dropdown trigger</a></li>
      <li><a href="http://example.com/" class="aui-button aui-button-primary">Primary button</a></li>
    </ul>
  </div>
  <div class="aui-header-secondary">
    <ul class="aui-nav">
      <li>
        <form class="aui-quicksearch" method="post" action="/foo">
          <label class="assistive" for="quicksearchid">Search</label>
          <input type="text" name="quicksearchname" placeholder="Quick Search" class="search" id="quicksearchid">
        </form>
      </li>
      <li><a href="http://example.com/">Often an icon-only dropdown</a></li>
    </ul>
  </div>
</nav>

<button class="aui-button aui-button-primary">Button</button>
}{

}{

}

Bootstrapと同じような感じでいろんなセットがあるようです。 Bootstrapに飽きたら乗り換えてみては。