🧊

CSSだけで実装されたUIコンポーネントライブラリ CSSUI

2022/10/21に公開


こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。

今回は、Javascriptを全く含まない純粋なCSSUIコンポーネントライブラリ、「CSSUI」をご紹介していきます。
https://github.com/zetareticoli/cssui

このCSSUIのポイントはこちらです。

  • Javascriptがいらない
  • カスタムdata属性を指定することでコンポーネントを扱うことができる
  • Tailwindなどの他のフレームワークと簡単に統合することができるように設計されている(詳細は近日公開予定)
  • CSS変数を利用してのUIカスタマイズが可能
  • 一部コンポーネントはa11yの対応が入っている

使用方法

npmまたは、ダウンロードして利用することができます。
https://www.cssui.dev/docs/getting-started/introduction/

<!-- CSSUI で利用する共通のCSS: 必須 -->
<link rel="stylesheet" href="/vendor/cssui.css">

<!-- 利用したい CSSUI のコンポーネントのスタイルを追加 -->
<link rel="stylesheet" href="/vendor/cssui/accordion.css">
<link rel="stylesheet" href="/vendor/cssui/tabs.css">

<!-- プロジェクトで利用するcssファイル等 -->
<link rel="stylesheet" href="your-variables.css">
<link rel="stylesheet" href="your-style.css">

あとは利用したいコンポーネントのデータ属性をマークアップしていくことで、利用できるようになります。

現在利用できるコンポーネントは下記です。

アコーディオン

https://www.cssui.dev/docs/components/accordion/

ドロップダウン

https://www.cssui.dev/docs/components/dropdown/

モーダル

https://www.cssui.dev/docs/components/modal/

スライドアウト

https://www.cssui.dev/docs/components/slideout/

タブ

https://www.cssui.dev/docs/components/tabs/

ツールチップ

https://www.cssui.dev/docs/components/tooltip/

の合計6つです。

終わりに

CSSスキーとしては、見逃せないUIライブラリでした!
またどこかのタイミングで、GatsbyやNextと合わせて利用する記事などを書ければと思います。

chot Inc. tech blog

Discussion