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に飽きたら乗り換えてみては。
