僕はCSSを書く上で、見通しのよい構造 (HTML) のアウトラインが不可欠だと考えていて、加えてSassみたいなアプローチが利用できるとなおよいと考えています。
HTMLをアウトラインを見るのにいろいろべんりなツールはあるでしょうが、しかし僕はなんかかんだでエディタ (Vim) の中が過ごしやすい環境となっているので、エディタのウィンドウを分割してCSSとHTMLを同時に開きながら編集する、というのがここ最近のワークスタイルでした。
しかし、HTMLそれ自体はアウトラインの確認に適しているhuman-readableなフォーマットとは言いがたいです。また、HTMLの各要素ごとのスタイルを確認するのにダミーテキストも入れておきたいところですが、よりアウトラインの確認をしづらいのが難儀なところです。
モデルとビューに分離できたらよさそう、HamlとかSlimとかあるし、Sassとかをかってに変換してくれたらなおよさそうだな、とおもったのでそういうのをまとめて面倒みてくれるモック・アプリケーションです (Padrinoで書きました)。
READMEにあるようにbundle install
してbundle exec padrino start
したら動きます、たぶん。あとはSassで書かれたファイルをapp/stylesheets
へ、CSSで書かれたファイルをpublic/stylesheets
に配置して、app/views/**/*.slim
を見ながらガンガンカスろう!!
ちなみにシードデータは用意してないので現状では、bundle exec padrino console
からぽちぽち叩くかんじになっていて何がモデルとビューの分離だ、ってかんじになってますがそのうち気の利いたシードデータとインポート/エクスポートについてダイアリーを書きます。(dm-yaml-adapterを使いましたが、こういう用途にいいかんじにハマります)