Bootstrap Utilities Cheat Sheet を作った
これは何
Bootstrap の "Utilities" にカテゴライズされている CSS クラスを一覧 + 検索できるオンラインツールです。
Bootstrap Utilities Cheat Sheet
作った経緯
業務で BootstrapVue（Bootstrap ベースの Vue.js コンポーネントライブラリ）を使用しており、スタイルの調整などに Bootstrap のユーティリティークラスをよく使います。目的のユーティリティークラスを探す際に、公式ドキュメントだと一覧性が悪いし CSS の内容も分かりません。
一方で Tailwind CSS を使用しているプロジェクトもあり、開発時には "Tailwind CSS Cheat Sheet[1]" が欠かせません。「こういうツールの Bootstrap 版があったらいいな」と思って探しましたが、なかった[2]ため自分で作りました。
技術的なこと
アプリケーションの構成
Vue.js 公式の create-vue を使ってスキャフォールディングしました。これは Vue CLI の後継ツールで、Vite ベースのプロジェクトが生成されます。
コンポーネントライブラリは使わずに、Bootstrap5 でスタイリングしています。前述の BootstrapVue は Vue 3 未対応ですし、「Bootstrap に関するサイトを作るのに Vuetify などを使うのも何か違うな」というのが理由です。
簡易 CSS パーサー作成
Bootstrap の CSS ファイル[3]をパースして、画面表示のための JSON データに変換する処理を書きました。少し前に The Super Tiny Compiler という JS 製の簡易コンパイラーを Rust に写経していて、その経験が参考になりました。
ただ今回の場合、パースといっても AST レベルの複雑な処理はしておらず、行単位でセレクターやコメントなどの判別をして配列やオブジェクトに格納している程度です。
また、これはビルド前にコマンドラインから実行するスクリプトなので、TypeScript にはせずに // @ts-check + JSDoc で型をつけて実装しています。
気になっていること
CSS の column-count を使用して簡易的に masonry 風のレイアウトを表現しているのですが、検索ワードによっては一番右の列が空になってしまうことが分かっています。window.matchMedia を使って、画面サイズごとにデータを分割してきちんとレイアウトするのがよさそうです。
また、Bootstrap の最新ではなく 4 系のデータを表示しているのも少し気になりますが、BootstrapVue で使われているバージョンに合わせているので仕方ありません。データのバリエーションを増やすのにそれほど手間はかからないはずなので、そのうち最新のバージョンも選択できるようにしたいと思っています。
おわりに
Bootstrap で作業することがあったら、ぜひ Bootstrap Utilities Cheat Sheet を使ってみてください！
不具合などがあったらコメントか issue にお願いします🙏
Discussion