HTMLは非常にシンプル！ 圧倒的な速さでMaterial Design 3のUIを実装できるCSSの超軽量フレームワーク -Beer CSS

ここ数年で数多くのCSSのフレームワークが登場しました。BootstrapやBulmaをはじめ、Tailwind CSSなど、それらを使用したことがある人も多いと思います。

しかし、これらの人気が高いフレームワークはバージョンアップを重ねにつれ、肥大化と複雑さが問題点として挙げられます。

最近注目されているCSSの超軽量フレームワーク「Beer CSS」🍺を紹介します。シンプルで効率がよく、柔軟性もあり、アクセシブルで、セマンティックHTMLで記述します。

Beer CSS
Beer CSS -GitHub

• Beer CSSの特徴
• Beer CSSの使い方
• Beer CSSのデモ
• Beer CSSのUI要素とコンポーネント

Beer CSSの特徴

Beer CSSは、デベロッパーにストレスを与えることなく、圧倒的な速さでMaterial Designのインターフェイスを構築できるCSSのフレームワークです。MITライセンスで、商用プロジェクトでも無料で利用できます。

• Material Design 3をベースにした最初のCSSフレームワークです。
• 他のMaterial DesignをベースにしたCSSフレームワークと比べて10倍軽量です。
• Material DesignをセマンティックなHTMLに変換します。
• あらゆるJavaScriptのフレームワークで使用できます。
• 開発者体験（DX）を重視しています。
• ビルド手順、設定、依存関係は不要です。
• カスタムCSSなしでモダンなインターフェイスを構築できます。

Beer CSSの名前の由来は、ドイツのビール純粋令に基づいています。ビール純粋令の法律では、ビールは水・大麦麦芽・ホップの3つの成分のみを使用して醸造しなければならないと定められており、このフレームワークでは、設定・要素・ヘルパーの3つの成分で構成されています。

設定・要素・ヘルパーって何？ と思うかもしれませんが、実際のコードを見ればその概要がつかめると思います。

逆にNGのコードは、下記の通りです。

class付けは従来のフレームワークと比較して、かなりシンプルです。

Beer CSSの使い方

外部ファイルとしてHTMLに下記を記述するだけです。

NPMを使用して最新リソースを入手することもできます。このリリースには、ソースファイルとコンパイルされたCSSおよびJavaScriptが含まれています。

Beer CSSのデモ

まずは、Beer CSSのシンプルなデモをご覧ください。

See the Pen
Setup html project by Beer CSS by coliss (@coliss)
on CodePen.

レイアウトの主な部分のHTMLだけ抜粋してみました。class付けがシンプルなのが分かると思います。

レイアウトは他にも揃っています。

レイアウトのデモ

「Main Layout」の横のボタンをクリックすると、コードが表示されます。

レイアウトのコード

Beer CSSのUI要素とコンポーネント

Beer CSSにはWebサイトやスマホアプリに使用されるUI要素やコンポーネントがたくさん揃っています。

アプリバー（上部・下部）

バッジ、ボタン

レスポンシブ対応のボタン

アイコンボタン、区切りボタン

カードコンポーネント

テーマカラー

コンテナ、ダイアログ

区切り線、フォーム

アイコン、SVGアイコン

ヘッダ、フッタ

ナビゲーション

ナビゲーション ドロワー、タブ

プログレスバー

フォーム要素、チェックボックス

フォームの入力欄

テーブル

ぼかし要素、シャドウ要素