オープンソース · MITライセンス · ピュアCSS
demodeck
あなたのデモのための、洗練されたコントロールパネル。
オープンソースのデモ向けの、ダークで上質なコントロールパネルの外殻——セグメントボタン、スライダー、カラーフィールド、トグル、スタイル付きセレクト、ポップオーバー、ライブコンソール、コピー用コードボックス。ピュア CSS にごく薄い動作レイヤーを足しただけ、依存ゼロ。
動作の仕組み
- 1.
外殻を入れる
スタイルシートとスクリプトを読み込み、body に `dd` クラスを付けるだけで、ダークなページ・上質なヘッダー・2 カラムのコントロールパネルレイアウトが手に入ります。
- 2.
コントロールをつなぐ
必要なコンポーネントを index.html からコピー——セグメントボタン、スライダー、カラーフィールド、トグル。スクリプトが自動で配線し、`dd:change` や `dd:color` といったきれいなイベントを発行します。
- 3.
結果を見せる
右カラムにあなたのライブラリのライブプレビューを置き、内蔵のコンソールターミナルに出力して、来訪者に触ってもらいましょう。全体のテーマは数個の `--dd-*` CSS 変数を上書きするだけ。
機能一覧
充実したコントロール一式
セグメントボタン、スライダー、hex と同期するカラーフィールド、トグル、スタイル付きセレクト、ポップオーバー、ライブコンソールターミナル、コピー可能なコードボックス——すべて最初からダークテーマ。
ピュア CSS、依存ゼロ
スタイルはすべてピュア CSS。スクリプトはインタラクティブな動作を足して自動実行するだけ。フレームワークもビルド手順も不要、インストールするものもありません。
自動配線されるイベント
コントロールはきれいなカスタムイベント（`dd:change`・`dd:color`）を発行し、コンソールには一行で使える `log()` ヘルパーがあるので、デモへの接続は数行で済みます。
一箇所でテーマ変更
`:root` で `--dd-accent`・`--dd-bg`・`--dd-radius` などを上書きすればパネル全体をリスキン。モバイル／ウェブ UI のプレビューには liquidframe と自然に組み合わせられます。
使う
ライブデモを開いてソースを見て、欲しい部分をコピー——各コンポーネントがライブプレビューカードに対して配線済みです。MIT ライセンスなので、自由にフォークしてリスキンできます。