Edited at

かっこいいクラスレス CSS フレームワーク Bahunya (バウヒニア)

こんにちは日野澤です。

バウヒニア (bahunya) というクラスレスの CSS フレームワークを紹介します。

スクリーンショット 2019-01-11 13.15.38.png


クラスレス

バウヒニアはクラスレスの 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>

これはバウヒニアでは次のようにレンダリングされます

スクリーンショット 2019-01-11 13.21.32.png

なんとなくいい感じですね (少なくとも、ブラウザのデフォルトスタイルよりはかなりかっこいいですよね!)


なんのためのもの?

バウヒニアはプロダクション環境で使うものではありません。生タグにアクセントの強いスタイルが当たっているので、これは明らかにアンチパターンです。ここからスタイルを拡張していくというものではありません。

では、どこでバウヒニアを使えるのでしょうか? 個人的には結構使い所はあると思っています。それは開発環境とか、プロトタイプとか、製品として出ないところです。例えば、開発環境でちょっとしたポータルサイト (機能はただのリンク集程度) が一瞬で欲しいというような場合です。開発用サイトとはいえ、HTML のデフォルトスタイルはちょっと厳しい。とはいえ、真面目に css を書くのは時間の無駄。きちんとした CSS フレームワーク (bootstrap, bulma など) を持ってくるのも結構面倒くさいです。そんな時にバウヒニアをスッと持ってきて、生タグの html だけで画面を書いていくと、なんとなくいい感じのページが安いコストで出来上がります ✨

ぜひ、バウヒニアを使って、普段スタイルに時間をかけられないページをかっこ良くしちゃいましょう!


名前について

バウヒニアという名前は、公式サイト の画像にある花の名前です。香港の区旗 に載っている花でもあります。


関連

バウヒニアに似たクラスレスフレームワークで tacit というものもあります。こちらは白背景でもう少し癖が少ないです。

参考: https://qiita.com/kt3k/items/8a5797d953bb3f8737f5