LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-01-11

こんにちは日野澤です。

バウヒニア (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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5