۲۹ مهر ۱۴۰۵ github.com ۲ دقیقه مطالعه

معرفی Sumi.css؛ فریم‌ورک CSS مینیمال و کلاس‌محور برای توسعه سریع وب

معرفی Sumi.css؛ فریم‌ورک CSS مینیمال و کلاس‌محور برای توسعه سریع وب — Show HN: Sumi.css – CSS Framework

خلاصه

فریم‌ورک Sumi.css یک ابزار سبک و مینیمال برای استایل‌دهی به کدهای HTML است که به صورت پیش‌فرض بر پایه تگ‌ها عمل می‌کند. این پروژه بدون نیاز به ابزارهای پیچیده بیلد و جاوا اسکریپت، امکان توسعه سریع صفحات وب با قابلیت پشتیبانی از حالت تاریک را فراهم می‌کند.

توسعه‌دهندگان وب همیشه به دنبال ابزارهایی هستند که کار با CSS را ساده‌تر کنند بدون اینکه پیچیدگی‌های ابزارهایی مثل Tailwind یا Bootstrap را به پروژه اضافه کنند. پروژه Sumi.css که توسط vladocar توسعه داده شده، پاسخی به همین نیاز است. این ابزار یک فریم‌ورک CSS مینیمال است که رویکرد «اول-کلاس‌لس» (Classless-first) دارد؛ یعنی شما کدهای HTML معنایی و تمیز می‌نویسید و عناصر صفحه به خودی خود استایل نهایی و مناسبی دریافت می‌کنند.

معماری و ویژگی‌های فنی

این فریم‌ورک به شکل یک فایل واحد ارائه می‌شود و هیچ وابستگی به جاوا اسکریپت ندارد. حجم نسخه فشرده و مینیفای شده آن تنها حدود ۶.۷ کیلوبایت (Gzipped) است که آن را به گزینه‌ای بسیار سریع تبدیل می‌کند.

  • استایل‌دهی بر اساس تگ: عناصری مثل تیترها، فرم‌ها، جدول‌ها، کارت‌ها و منوهای ناوبری صرفاً با استفاده از تگ‌های استاندارد HTML به طور خودکار استایل می‌گیرند.
  • حالت تاریک خودکار: به طور پیش‌فرض با تنظیمات سیستم‌عامل کاربر هماهنگ می‌شود و با ویژگی data-theme می‌توانید حالت دلخواه را به زور اعمال کنید.
  • متغیرهای CSS: تمام رنگ‌ها، فونت‌ها و اندازه‌ها با استفاده از Custom Properties تعریف شده‌اند که شخصی‌سازی را بسیار آسان می‌کند.
  • اولویت صفر (Zero Specificity): استایل عناصر پایه صفر در نظر گرفته شده است، بنابراین کدهای CSS شخصی شما بدون نیاز به استفاده از !important همیشه اعمال خواهند شد.
  • دسترس‌پذیری (Accessibility): پشتیبانی از حلقه‌های فوکوس قابل مشاهده، وضعیت‌های مبتنی بر ARIA مثل aria-invalid و کاهش حرکت (Reduced motion) در آن لحاظ شده است.

نحوه استفاده و شروع سریع

برای استفاده از این فریم‌ورک کافی است فایل sumi.min.css را در پروژه خود کپی کرده و آن را در تگ head لینک کنید:

<link rel=

این مطلب به‌صورت کاملاً خودکار و با هوش مصنوعی از مقالهٔ اصلی و بحث هکرنیوز تهیه شده و ممکن است خطا داشته باشد. حقوق مطلب اصلی متعلق به نویسندهٔ آن است. قوانین و گزارش مشکل

این خبر را با دیگران به اشتراک بگذارید

خبرهای فناوری در قالب پست و ویدیوی کوتاه، در اینستاگرام هکرنیوز بلاگ. به‌زودی
هر خبر به محض انتشار، به‌همراه پادکست روزانه در کانال تلگرام هکرنیوز بلاگ.