こんにちは日野澤です。
バウヒニア (bahunya) というクラスレスの CSS フレームワークを紹介します。
クラスレス
バウヒニアはクラスレスの CSS フレームワークです。クラスレスとはどういう意味でしょうか? クラスレスとは、つまり html の class 属性を一切使わないということです。バウヒニアのスタイルは全て html の生タグに対して設定されています。
例えば次のような生タグの table を書いたとします。
<table>
<tr>
<th>Game</th>
<th>Year Developed</th>
<th>Awesomeness</th>
</tr>
<tr>
<td>Insurgency</td>
<td>2014</td>
<td>87/100</td>
</tr>
<tr>
<td>Absolute Drift</td>
<td>2015</td>
<td>91/100</td>
</tr>
<tr>
<td>Street Fighter III</td>
<td>1997</td>
<td>89/100</td>
</tr>
</table>
これはバウヒニアでは次のようにレンダリングされます
なんとなくいい感じですね (少なくとも、ブラウザのデフォルトスタイルよりはかなりかっこいいですよね!)
なんのためのもの?
バウヒニアはプロダクション環境で使うものではありません。生タグにアクセントの強いスタイルが当たっているので、これは明らかにアンチパターンです。ここからスタイルを拡張していくというものではありません。
では、どこでバウヒニアを使えるのでしょうか? 個人的には結構使い所はあると思っています。それは開発環境とか、プロトタイプとか、製品として出ないところです。例えば、開発環境でちょっとしたポータルサイト (機能はただのリンク集程度) が一瞬で欲しいというような場合です。開発用サイトとはいえ、HTML のデフォルトスタイルはちょっと厳しい。とはいえ、真面目に css を書くのは時間の無駄。きちんとした CSS フレームワーク (bootstrap, bulma など) を持ってくるのも結構面倒くさいです。そんな時にバウヒニアをスッと持ってきて、生タグの html だけで画面を書いていくと、なんとなくいい感じのページが安いコストで出来上がります ✨
ぜひ、バウヒニアを使って、普段スタイルに時間をかけられないページをかっこ良くしちゃいましょう!
名前について
バウヒニアという名前は、公式サイト の画像にある花の名前です。香港の区旗 に載っている花でもあります。
関連
バウヒニアに似たクラスレスフレームワークで tacit というものもあります。こちらは白背景でもう少し癖が少ないです。