フレキシブルなclass名を意識して設計されたCSSフレームワーク・「Biomatic UI」

Ads

Biomatic UI


Biomatic UIはフレキシブルなclass名を意識して設計されたCSSフレームワークです。どういう形が「フレキシブルだ」と感じるかは個人差があると思うので、ここでは柔軟であるかどうかは触れないでおきますが、表題は本フレームワークのドキュメントで開発者がそのように書いていたのでお借りしたような形で付けています。class名は元素を示す時のように、例えば_background-colorならプレフィクスをbgcl-*とする、paddingは_pd-*、padding-leftは_pdl-*といったように、CSSが分かる人がなんとなく分かるような命名規則を取り入れています(EX. padding-left:2px; なら_pdl-2pxというclass名)。

この規則を元に、Atomic Class(基礎、Component Class(コンポーネント用)、Layout Class(レイアウト用)、Utility Class(ユーティリティ用)に分けられており、様々なシーンでも対応できるように設計しているようです。BEMとかAtomic Designに興味のある方向けのなるのかな。ドキュメントも用意されているのですが、タイ語と英語が入り混じっててよく理解できませんでしたので予想で書いてます。興味のある方はドキュメントをご覧ください。ライセンスはMITとの事です。

Biomatic UI

タイトルとURLをコピーしました