دکمه‌ها.nes-btn + .is-primary/.is-success/.is-warning/.is-error/.is-disabled
نسخه
فونت
جهت
نسخهٔ ۳·NES.css 2.3.0
·فارسی و راست‌چین·بدون CDN
NES.css، همان‌طور که هست v3.0
این صفحه فریم‌ورک را بازطراحی نمی‌کند: nes.min.css بایت‌به‌بایت همان فایل منتشرشدهٔ ۲.۳.۰ است و هیچ قاعده‌ای از آن بازنویسی نشده. کاری که شده، سه چیز است: فونت پیکسلی میزبانی‌شده روی همین سرور (چون فریم‌ورک فونت را همراه ندارد و از CDN هم چیزی نمی‌گیریم)، یک لایهٔ راست‌چین ۳۴ خطی، و پوستهٔ همین صفحه. هر جزء که می‌بینی، خودِ NES.css است.
۳۸بلوک زنده
۹بخش
۳۳کلاس کامپوننت
۲۸۸KBحجم CSS
۰خط جاوااسکریپت
۰درخواست بیرونی
۰۱
پایه‌ها
۵ بلوکپالت NES.css هشت رنگ است و در خود فریم‌ورک به‌صورت ثابت نوشته شده، نه متغیر. رنگ‌ها را از فایل خواندم، از حافظه ننوشتم.
#212529
ink#ffffff
paper#209cee
primary#92cc41
success#f7d51d
warning#e76e55
error#6c757d
muted#adafbc
rule
ink#ffffff
paper#209cee
primary#92cc41
success#f7d51d
warning#e76e55
error#6c757d
muted#adafbc
rule
این هشت مقدار در CSS فریم‌ورک hardcode شده‌اند: #209cee برای اصلی، #92cc41 موفق، #f7d51d هشدار، #e76e55 خطا.
عنوان یک
عنوان دو
عنوان سه
عنوان چهار
NES.css مقیاس تایپوگرافی خودش را ندارد؛ از reboot بوت‌استرپ می‌آید. h1 تا h6 اندازه دارند، بقیه نه.
قاب ۴ پیکسلی
گوشهٔ پله‌ای از border-image می‌آید، نه border-radius. هیچ گوشهٔ گردی در فریم‌ورک نیست جز .is-rounded که خودش هم پله‌ای است.
همان شبکهٔ نقطه‌ای که در کیت v1 و v2 داشتی — این‌جا با مربع ۲ پیکسلی و گام ۸ پیکسلی، بدون آنتی‌الیاس.
نشانگر را روی این کادر ببر
فریم‌ورک خودش یک نشانگر پیکسلی ۳۲×۳۲ به‌صورت base64 داخل CSS دارد. روی همهٔ صفحه اعمال می‌شود.
۰۲
کنش‌ها
۳ بلوکشش کلاس دکمه، بدون اندازه‌بندی: NES.css تنها یک اندازه دارد. برای کوچک و بزرگ باید خودت font-size را عوض کنی، و همین‌جا اولین جای اصطکاک است.
آیکون‌ها span خالی‌اند که با box-shadow نقاشی می‌شوند؛ پس داخل دکمه بدون تصویر کار می‌کنند.
• hover: پس‌زمینه یک پله تیره می‌شود و سایهٔ داخلی ۴ پیکسلی می‌افتد
• active: دکمه ۴ پیکسل پایین می‌رود (ترنزیشن ندارد)
• focus: خط‌چین دور عنصر
• is-disabled: خاکستری، pointer-events:none نیست، خودت باید جلوی کلیک را بگیری
۰۳
فرم‌ها
۶ بلوکورودیها، انتخاب‌گر و چک‌باکس همه هستند. آنچه نیست: اندازهٔ کوچک/بزرگ، آیکون داخل فیلد، و پیام خطای زیر فیلد (فقط رنگ حاشیه عوض می‌شود).
در حالت inline، NES.css برچسب را با margin-right کنار می‌گذارد — یکی از جاهایی که لایهٔ راست‌چین باید دخالت کند.
۰۴
داده
۵ بلوکجدول، نشان و نوار پیشرفت هست. آنچه نیست: مرتب‌سازی، فیلتر، صفحه‌بندی، انتخاب ردیف، حالت خالی، اسکلتون. جدول فقط ظاهر است.
| کاربر | دسترسی | وضعیت |
|---|---|---|
| pari | آزمون اسکرام | فعال |
| admin | همهٔ سامانه‌ها | فعال |
| reza | صورتحساب | در انتظار |
| sara | بدون دسترسی | مسدود |
| کاربر | دسترسی | وضعیت |
|---|---|---|
| pari | آزمون اسکرام | فعال |
| admin | همهٔ سامانه‌ها | فعال |
| reza | صورتحساب | در انتظار |
| sara | بدون دسترسی | مسدود |
| کاربر | دسترسی | وضعیت |
|---|---|---|
| pari | آزمون اسکرام | فعال |
| admin | همهٔ سامانه‌ها | فعال |
| reza | صورتحساب | در انتظار |
| sara | بدون دسترسی | مسدود |
اصلیفعالدر انتظارخطاتیره
۰۵
ظرف و متن
۹ بلوکقویترین بخش فریم‌ورک: ظرف با تیتر، دیالوگ، بالن گفتگو و فهرست. همه با گوشهٔ پله‌ای و سایهٔ سخت.
یک ظرف ساده با حاشیهٔ ۴ پیکسلی و گوشهٔ پله‌ای.
حالت گرد — همچنان پله‌ای، بدون منحنی.
پس‌زمینهٔ #212529 و متن سفید.
دسترسی‌ها
تیتر روی خط حاشیه می‌نشیند.وسط‌چین
راست‌چین
متن اصلیمتن موفقمتن هشدارمتن خطامتن غیرفعال
فریم‌ورک ::backdrop را استایل می‌دهد، پس حالت مودال درست کار می‌کند؛ آنچه ندارد باز و بسته کردن است: showModal() و close() را باید خودت صدا بزنی. این نمونه داخل کارت سنجاق شده، چون خودِ Chrome دیالوگ باز را مطلق روی صفحه می‌گذارد.
بالن از چپ
بالن از راست
بالن تیره
- آزمون اسکرام
- صورتحساب
- گزارش‌ها
- آزمون اسکرام
- صورتحساب
- گزارش‌ها
۰۶
آیکون‌ها و نماها
۶ بلوک۲۰ آیکون، ۹ کاراکتر، ۹ آواتار. همه با box-shadow نقاشی می‌شوند، پس هیچ فایل تصویری در فریم‌ورک نیست.
آواتارها را خودم با SVG ۱۶×۱۶ ساختم و base64 داخل صفحه گذاشتم تا هیچ درخواست بیرونی نباشد.
۰۷
راست‌چین و فارسی
۲ بلوکاین بخش دلیل وجود این نسخه است. NES.css هیچ پشتیبانی‌ای از راست‌چین ندارد؛ شش قاعده کل فاصله را می‌بندد. تصاویر پیکسلی را عمداً آینه نکردم — آرت، آرت است.
dir="rtl" — با لایه
- مورد
dir="ltr" — NES.css خام
- item
راست: اجزا با dir=rtl و لایه. چپ: همان اجزا NES.css خام در LTR. چک‌باکس، فلش انتخاب‌گر و گلولهٔ فهرست هر سه سمت خودشان را عوض می‌کنند.
- text-align روی html — reboot صریحاً text-align:left می‌گذارد و dir=rtl آن را باطل نمی‌کند. بدون این یک خط، کل سند چپ‌چین می‌ماند.
- چک‌باکس — آرت ۱۶ پیکسلی در left:-28px و فاصله را margin-left:28px خودِ input باز می‌کند. فاصله و آرت باید هر دو آینه شوند.
- رادیو — همان ساختار با فاصلهٔ ۲۰ پیکسل.
- انتخاب‌گر — فلش در right:36px و padding-right:2.5rem. هر دو باید جابه‌جا شوند.
- فهرست — گلولهٔ فهرست در left:-22px نقاشی می‌شود.
- فیلد inline — برچسب با margin-right:1.5rem کنار گذاشته می‌شود.
جمعاً ۳۴ خط CSS. چیزی که اصلاح نمی‌شود: فونت. Press Start 2P هیچ گلیف فارسی ندارد و فریم‌ورک هیچ fallback ننوشته، پس متن فارسی به فونت پیش‌فرض مرورگر می‌افتد. راه‌حل همان چیزی است که در نوار بالا به اسم «ترکیبی» گذاشتم: پیکسلی برای لاتین و رقم، وزیرمتن برای فارسی.
۰۸
آنچه NES.css ندارد
۱ بلوکاین جدول تصمیم را می‌سازد. هر ردیف یک قابلیت است که برای ساختن یک پنل ادمین لازم می‌شود و NES.css آن را ندارد — با برآورد واقعی کار.
| قابلیت | NES.css | هزینهٔ ساخت | یادداشت |
|---|---|---|---|
| سایدبار و ناوبری اصلی | ندارد | ~۶۰ خط + گرید | خودت با grid می‌نویسی |
| تب | ندارد | ~۴۰ خط | — |
| بردکرامب | ندارد | ~۲۰ خط | — |
| صفحه‌بندی | ندارد | ~۴۰ خط + منطق JS | — |
| توست | ندارد | ~۵۰ خط + JS | — |
| مودال با لایه | جعبه دارد | ~۴۰ خط + JS | nes-dialog و ::backdrop هست؛ باز/بسته کردن با JS خودت |
| آکاردئون | ندارد | ~۳۰ خط + JS | — |
| تولتیپ | ندارد | ~۳۰ خط | — |
| منوی بازشو | ندارد | ~۵۰ خط + JS | — |
| انتخاب تاریخ شمسی | ندارد | ~۲۰۰ خط | بدون کتابخانه عملاً ممکن نیست |
| اسکلتون لودینگ | ندارد | ~۱۵ خط | فقط nes-progress هست |
| حالت خالی / خطا | ندارد | ~۲۵ خط | — |
| درخت | ندارد | ~۴۰ خط | — |
| نمودار | ندارد | — | باید کتابخانهٔ جدا |
| پالت فرمان | ندارد | ~۶۰ خط + JS | — |
| آپلود فایل | ندارد | ~۴۰ خط | — |
| جدول با مرتب‌سازی و فیلتر | ظاهر دارد | ~۸۰ خط + JS | nes-table فقط استایل است |
| راست‌چین | ندارد | ~۳۴ خط | این صفحه انجامش داده |
| فونت فارسی | ندارد | ~۱۰ خط | بدون fallback، فارسی به فونت سیستم می‌افتد |
| حالت تیرهٔ سراسری | جزئی | ~۵۰ خط | is-dark روی چند جزء هست، نه روی کل صفحه |
| جاوااسکریپت | صفر | — | فریم‌ورک فقط CSS است |
۰۹
یک پنل با NES.css
۱ بلوکهمین حالا می‌شود با NES.css یک پنل ساخت — تا جایی که به چیدمان برسی. این نمونه فقط از اجزای فریم‌ورک ساخته شده و سه چیز را باید با CSS خام درست می‌کردم: سایدبار، ستون‌بندی، و دکمهٔ کوچک‌تر از اندازهٔ ثابت فریم‌ورک.
منو
نمای کلی
کاربران فعال
۷۸٪
مصرف سهمیه
۴۵٪
خطا در ۲۴ ساعت
۱۲٪
کاربران
| کاربر | دسترسی | وضعیت | کنش |
|---|---|---|---|
| pari | آزمون اسکرام | فعال | |
| admin | همهٔ سامانه‌ها | فعال | |
| reza | صورتحساب | در انتظار | |
| sara | بدون دسترسی | مسدود |
چیزی که این نمونه ندارد و یک پنل واقعی لازم دارد: تب، صفحه‌بندی، فیلتر، حالت خالی، اسکلتون، توست، و منوی بازشو. همه در جدول بخش قبل با برآورد کار آمده‌اند.