🧊
CSSだけで実装されたUIコンポーネントライブラリ CSSUI
こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。
今回は、Javascriptを全く含まない純粋なCSSUIコンポーネントライブラリ、「CSSUI」をご紹介していきます。
このCSSUIのポイントはこちらです。
- Javascriptがいらない
- カスタムdata属性を指定することでコンポーネントを扱うことができる
- Tailwindなどの他のフレームワークと簡単に統合することができるように設計されている(詳細は近日公開予定)
- CSS変数を利用してのUIカスタマイズが可能
- 一部コンポーネントはa11yの対応が入っている
使用方法
npm
または、ダウンロードして利用することができます。
<!-- 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">
あとは利用したいコンポーネントのデータ属性をマークアップしていくことで、利用できるようになります。
現在利用できるコンポーネントは下記です。
アコーディオン
ドロップダウン
モーダル
スライドアウト
タブ
ツールチップ
の合計6つです。
終わりに
CSSスキーとしては、見逃せないUIライブラリでした!
またどこかのタイミングで、GatsbyやNextと合わせて利用する記事などを書ければと思います。
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion