Bootstrapの代わりを探してました。
便利だけど大きすぎるし機能過剰だからです。
- もっと軽量なものが欲しい
- 機能的にもシンプルな方がいい
そう思ってた時に良さげな奴を発見
その名も Beauter というフレームワーク
軽量だけど多機能で便利だったので、
Bootstrapの代わりにBeauterを使ってみました。
個人的にBeauterを進める理由は以下の通りです。
このページの目次
１．圧倒的にBootstrapより軽量
Beauterを選んだ最大の理由はこれです。
Bootstrapより軽量で軽いから
どれくらい軽いかは以下比較を参照
- Bootstrap
最新バージョンは5.0.2の模様。CSSだけなら152KB、CSS／JS両方を合わせると200KBを超えるほどのサイズになる。（参考 : https://getbootstrap.jp/docs/5.0/getting-started/download/）
- Beauter
最新バージョンは0.3.0の模様。CSS／JS両方を合わせても38KBほどしかない。とっても軽量（参考 : https://beauter.io/docs/start/）
サイズ的にはBeauterの圧勝です。
一方のBootstrapはミニマム構成でも200KBを越え、モーダルとか使うならpopper.jsなど追加スクリプトも必要になります。そういう面倒くささがないのも大きいです。
大規模なサイトならBootstrapが便利だと思います。
でも以下のサイト・サービスならBeauterが便利
- 表示速度をより高速にしたいサイト
- デザインを重視していないサービス
- 機能面にリソースを割きたいサービス
少なくとも小中規模サイトならBeauterで十分です。
２．余計な機能がなくて開発効率が上がる
正直いうとBootstrapは機能過剰です。
一方のBeauterは余計な機能を省いてるから、
余計なことに悩まなくて済むのが気に入ってます。
例えば分かりやすい例を挙げるとしましょう。
代表的なのはマージンとパディングのクラス
Bootstrapではゴチャゴチャと沢山クラスがあります。
▼ Bootstrapで使える余白クラスの例
|
1 2 3 4 5 6 7 |
/** 余白は0～5まで対応 **/ .p-0 .p-1 .p-2 .p-3 .p-4 .p-5 /** 余白の向きも４方向ある **/ .p-t .p-b .p-s .p-e /** マージンでも同様 **/ |
選択肢が多いことはいいんですが、
多すぎるとデザインで悩むことになります。
その点Beauterは余計なものを切り落としてます。
▼ Beauterで使える余白クラスはこれだけ
|
1 2 3 4 5 |
/** パディングを0にする **/ ._noPadding /** マージンを0にする **/ ._noMargin |
たったこれだけだから「ここは p-2 にしよう、ここは m-3 かな？」みたいに悩まないし、シンプルだから統一感が出やすくなります。
だから開発効率が上がるってこと
３．グリッドシステムに対応している
Bootstrapの利点はグリッドシステムが使えること。
Beauterでもグリッドシステムは用意されてます。
▼ こんな感じでグリッド分割を定義できる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="row"> <div class="col m4">col-4</div> <div class="col m8">col-8</div> </div> <div class="row"> <div class="col m4">col-4</div> <div class="col m4">col-4</div> <div class="col m4">col-4</div> </div> <div class="row"> <div class="col m1-5 ">col-1-5</div> <div class="col m1-5 ">col-1-5</div> <div class="col m1-5 ">col-1-5</div> <div class="col m1-5 ">col-1-5</div> <div class="col m1-5 ">col-1-5</div> </div> |
▼ キレイな感じでグリッド表示できた
驚いたのは５分割にも対応してる所ですね。
ちょうど痒い所に手が届くのも便利です。
４．モーダルがとても簡単に表示できる
Beauterはモーダル表示にも対応してます。
しかもBootstrapと同じくらい簡単です。
▼ こんな感じでモーダルHTMLを定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!-- モーダル表示用のボタン --> <button class="_box _pink" onclick="openmodal('myModal')"> Open Modal </button> <!-- 表示したいモーダル --> <div id="myModal" class="modalbox-modal "> <div class="modalbox-modal-content"> <span class="-close" id="modalbox-close">×</span> <p>Progressbar</p> <div class="progressbar _dark"> <div class="-bar _danger" style="width:25%"> <div class="-label">25%</div> </div> </div> <div class="progressbar _dark"> <div class="-bar _danger" style="width:50%"> <div class="-label">50%</div> </div> </div> <div class="progressbar _dark"> <div class="-bar _danger" style="width:99%"> <div class="-label">99%</div> </div> </div> </div> </div> |
▼ 表示されたモーダルの見た目
初めから×ボタンも表示できます。
ただしbeauter.min.jsの読込が必要なので注意。
それ以外は簡単にモーダル表示できて便利です。
５．パララックス機能が初めから付いてる
Bootstrapにない機能がこれです。
初めからパララックス機能が付いてること
パララックスとは画面をスクロールしたとき、
背景の画像が固定されてるような視覚効果のことです。
それがBeauterでは初めから使えるようにできてます。
▼ 詳しくは次の公式リファレンス参照
スクロールしても桜の画像が固定されて表示される。
こんなパララックス効果が簡単に作れるのも利点です。
６．デザインに必要な機能が全て備わっている
ここまでの内容と被ってるけど…
デザイン・レイアウトに必要な機能が全部あります。
▼ 例を列挙するなら以下の通り
- マージン・余白調整
- グリッドシステム
- 開閉可能なモーダル
- ボタンとかフォーム関係
- 通知とかツールチップ表示
- ナビメニューなどの作成
- 画像へのパララックス効果付与
- タブによるコンテンツ切替
本格的なデザインをするには十分な機能です。
またグリッドシステムではPCではそのまま、スマホではグリッド解除など…レスポンシブにもしっかり対応してくれてます。
軽量だけど多機能、それがBeauterの強みかも、
機能の取捨選択がとても上手いなと感じます。
Beauterの導入はCDNを使えば数分で完了
それで具体的な導入方法ですが…
以下のようにHTML構成を追加・変更するだけです。
▼ Beauterを使う時のミニマムな構成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <!-- ビューポート設定 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- googleフォント読み込み --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <!-- Beauter本体を読み込み --> <link rel="stylesheet" type="text/css" href="https://rawgit.com/outboxcraft/beauter/master/beauter.min.css"/> </head> <body> <!-- メインコンテンツ --> <!-- Beauterスクリプト読み込み --> <script src="https://rawgit.com/outboxcraft/beauter/master/beauter.min.js"></script> </body> </html> |
▼ 同じ内容はBeauter公式から確認可能
URL : https://beauter.io/docs/start/
Beauter本体とスクリプトを読み込んどけばOK。
それだけで全機能が使えるようになります。
以上、BSの代替にBeauterが便利という話でした。ではまた
