ユーティリティクラスを備えたCLIファーストなCSSフレームワーク・「Yumma CSS」

Yumma CSSはユーティリティクラスを備えたCLIファーストなCSSフレームワークです。より少ない労力で効率的にスタイリングする為に考案されています。

まずは以下の手順でインストールします。

npm install yummacss -D

構成を初期化。

npx yummacss init

以下のように構成ファイルのyumma.config.mjsを用意します。

export default {
  source: ["./src/**/*.{ts,tsx}"],
  output: "./src/styles.css",
  buildOptions: {
    reset: true,
    minify: false,
  },
};

これで準備完了。buildコマンドでCSSの生成が可能になります。

npx yummacss build

一応CDNも用意されていますのでお好みで。

<script src="https://unpkg.com/@yummacss/runtime"></script>

また、タイトルにあるようにユーティリティクラスが用意されています。イメージしやすいプレフィックスを付ける事である程度感覚で使う事が出来ます。

bg-* background-color
rad-* border-radius
b-* border-width
tc-* color
c-* cursor
fw-* font-weight
h:* hover:

例えば小文字にしたいなら.fs-smといったclassを付与します。

フレームワークに用意されているUIコンポーネントもこのようなプレフィックスを用いたユーティリティクラスも含めて構成されています。

どのフレームワークでも同じ事ですが使い慣れれば便利ですね。こういったプレフィックスの用意は、「慣れ」を促す為のものですが人の相性もあるので分かりやすいと感じるなら使いやすいと思います。

詳細などは以下よりご参照下さい。ライセンスはMITです。