‏ds.css؛ ظاهر نینتندو DS توی مرورگر

ds.css پروژه‌ای از spiritov ـه که توی توضیحش می‌گه بخش‌هایی از رابط کاربری کنسول‌های DS و DS Lite رو با CSS بازسازی کرده، و یه صفحهٔ پیش‌نمایش هم گذاشته تا ببینی چی توشه. سریع‌ترین راه استفاده، یه لینک استایل از unpkgه؛ می‌شه محتوای پوشهٔ dist رو هم دانلود و لوکال استفاده کرد یا با npm i @spiritov/ds.css نصبش کرد.

یه نکتهٔ کاربردی برای وقتی که نمی‌خوای کل سایتت شکل کنسول بشه: فایل ds-scoped.css نسخهٔ محدودشده‌ست و استایل‌هاش فقط داخل عنصری با کلاس ds-css اعمال می‌شن. یعنی دکمهٔ بیرون از اون div همون دکمهٔ معمولی مرورگر می‌مونه و فقط دکمهٔ داخلش شکل DS می‌گیره.

<link rel="stylesheet" href="https://unpkg.com/@spiritov/ds.css/dist/ds-scoped.css" />

<button>a standard button</button>

<div class="ds-css">
  <button>a DS button!</button>
</div>

غیر از استایل، چند ویجت هم داره که به شکل وب‌کامپوننت (یعنی تگ HTML سفارشی که خودش رفتارشو داره) عرضه شدن؛ نمونه‌اش ds-calendar ـه که با یه تگ script از unpkg لود می‌شه و بعدش مثل یه تگ معمولی می‌نویسیش. برای فریم‌ورک‌ها هم راه نصب با npm هست و نویسنده نمونهٔ Svelte رو آورده که ویجت رو داخل onMount به‌صورت دینامیک import می‌کنه. توی فهرست کارهای آیندهٔ پروژه هم کامپوننت‌های بیشتر PictoChat و چند کامپوننت الهام‌گرفته از DS با علامت سؤال اومده.

نکات کلیدی:

• نصب سریع با یک لینک از unpkg، یا npm i @spiritov/ds.css، یا کپی محتوای پوشهٔ dist
• ds-scoped.css استایل‌ها رو فقط داخل عنصری با کلاس ds-css اعمال می‌کنه
• ویجت‌ها وب‌کامپوننت‌ان و جدا لود می‌شن، مثل ds-calendar
• در فریم‌ورک‌هایی مثل Svelte، ویجت داخل onMount به‌صورت دینامیک import می‌شه
• کامپوننت‌های بیشتر PictoChat هنوز در حد «todo» پروژه‌ست