CSSフレームワークを導入しようと調べてみた。
有名所だとBootstrap, Tailwindがありまずそれらを検討してみたけれど、導入方法や仕組みが複雑でやめた。 手軽にデザインを整えたいという目的に対して釣り合っておらず、多分一ヶ月後にはどういう仕組みだったかわからなくなる。
Foundation, MaterializeはjQuery依存なので避けた。Vue.jsを使用しているので、混ぜるのは良くない気がして。
ただ、マテリアルデザインは好きなので、その方向性は良いかと思ったが、MUIもReact依存ということで避けた。
Vue.jsだとVuetifyというのがあったが、これはCSSフレームワークよりさらに大きな枠のフレームワークで、手軽にデザインを整えたいという目的に対して合わない。
逆にシンプルなBulma, Pure.cssもみてみた。導入は簡単だけれど、デザインを整えるための仕組みだけ用意します、というもので、いい感じにするには適切なカスタマイズが必要そうで、それはそれで目的に合わない。
そうこうして、Beercssというのを見つけた。
名前は冗談っぽいが、内容は素晴らしい。
・導入はCDNでCSSとScriptを読み込むだけでOK
・主要な要素がマテリアルデザインで準備されている
・要素の依存関係がなく、付与したい属性をclassにスペース区切りで追加していくだけなのでわかりやすい。
・わかりやすいドキュメント
順次、このBeercssをつかってページを書き換えていくことにする。
