Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@kt3k

かっこいいクラスレス 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?