MicronautにThymeleafを適用して、クラスなしCSSフレームワークで遊んでみた
前回までの記事はこちら。
run-around.hatenablog.com
そして前回作ったソースはなんとなくこちら。
github.com
次回以降で考えているのは
- プロジェクトにGraalVMを適用する
- ちょこっとWebアプリケーションを作ってみる
- WebアプリケーションでDBを操作してみる
- テンプレートにThymeleafを適用してみる
- Docker上で動くようにしてみる
の、Thymeleafをやろうかなーと。
あと、前回Java女子部できの子さんに教えてもらったクラスなしCSSフレームワークで遊んでみたくて。
変更したところはこのあとGithubにpushするから差分見れるんですけど。
- bulid.gradleにThymeleafを使えるように追加した
- Controllerでdemo.htmlを呼べるようにした
- application.ymlで"/public/***" の形で静的ファイルを取ってくるようにした
- 表示するhtmlをごりっと書いた
なんです、はい。
んで、次にやりたかった（というか本当にやりたかったやつ）こととして、クラスなしCSSフレームワークを試してみました。
参考にさせていただいたサイトはこちら。
www.webcreatorbox.com
Water.cssのデモサイトはこちら
watercss.kognise.dev
ベタなhtmlは書けますが、CSSとかやる気がなくていっつもググってる感じ。
シャレオツなサイトにあんまり興味がないもので。
動的なロジック埋め込んで、CSSのクラスも埋め込んで、・・・あー！画面のソース読みにくい！ってｗ
でもこのクラスなしCSSフレームワークだと、ほんとにクラス設定しなくていいんですね。
クラスなしCSSフレームワーク導入後(ノーマルモード)の画面
ええー！(ﾟ∀ﾟ)
めっちゃ整いましたー！！！
私にはこれで十分ｗ
head内に以下のいずれかを追加すればOKなんですね。お手軽でキレイだし
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
あー、面白かった😄
