@pine-ds/core بسته npm و بخش پایه سیستم طراحی Pine هست که تیم Kajabi Design System Services ساخته. اگه می خوای دکمه، فرم و بقیه اجزای رابط کاربری یکدست و آماده داشته باشی و همه رو از صفر طراحی نکنی، این بسته نقطه شروع خوبیه. مجوزش MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
@pine-ds/core بخش پایه سیستم طراحی Pine هست. Pine رو تیم Kajabi Design System Services ساخته و توضیح رسمی بسته هم همینه: کامپوننت های پایه برای Pine Design System. یعنی لازم نیست برای هر پروژه دکمه، فیلد فرم، چک باکس و بقیه اجزای رابط رو از اول بنویسی و استایل بدی. یه مجموعه آماده و هماهنگ دستت می رسه. از ساختار پروژه که نگاه کنی، کامپوننت ها به شکل وب کامپوننت ارائه می شن، پس لزوماً به یه فریم ورک خاص بند نیستی. این مورد رو هم قبل از تصمیم نهایی تو مستندات رسمی چک کن.
مشکلی که حل می کنه برای هر کسی که چند پروژه رو نگه داشته آشناست. وقتی چند نفر روی یه پنل یا چند صفحه کار می کنن، کم کم هر دکمه یه شکل پیدا می کنه، فاصله ها فرق می کنن و فرم ها با هم نمی خونن. یه سیستم طراحی همین پراکندگی رو جمع می کنه. مثلاً اگه برای مشتری یه پنل مدیریتی سفارشی می سازی یا صفحه تنظیمات یه افزونه وردپرسی رو طراحی می کنی، ظاهر یکدست رو از این کامپوننت ها می گیری و وقتت رو می ذاری روی منطق کار.
برای همه جا مناسب نیست. اگه سایتت یه صفحه معرفی ساده یا یه قالب وردپرسی معمولیه، آوردن یه سیستم طراحی کامل بیشتر از نیازته و فقط حجم صفحه رو بالا می بره. برای پروژه های فارسی هم یه نکته مهم هست: این مجموعه برای محصولات Kajabi ساخته شده، پس نباید فرض کنی پشتیبانی راست به چپ و فونت فارسی توش کامل و بی دردسره. قبل از اینکه کل رابط رو روش بنا کنی، چند کامپوننت اصلی رو تو یه صفحه راست به چپ و با فونت خودت امتحان کن. راستای متن، آیکون ها و فاصله ها رو چک کن.
چند نکته برای انتخاب و استفاده. مجوز MIT هست، یعنی تو پروژه های شخصی و تجاری می تونی ازش استفاده کنی، فقط اعلان مجوز رو نگه دار. نسخه رو تو پروژه ثابت نگه دار تا با یه به روزرسانی ناگهانی ظاهر سایت به هم نریزه، و قبل از ارتقا یه بار تو محیط تست ببین چی عوض شده. یه مشکل دیگه هم هست: دسترسی به npm از ایران گاهی ناپایداره و تو روزهای محدودیت اینترنت بین الملل ممکنه نصب وسط کار گیر کنه. برای همین نسخه های رسمی و بدون تغییر این بسته تو مخزن داخلی ما هم در دسترسه.
راهنمای استفاده
اگه فقط می خوای کامپوننت ها رو تو یه صفحه معمولی امتحان کنی، لازم نیست پروژه بیلد راه بندازی. مسیر کلی اینه:
اول فایل ها رو از همین صفحه بگیر و کد آماده پایین صفحه رو به قسمت head یا آخر body صفحه اضافه کن.
بعدش کامپوننت ها رو مثل تگ های معمولی HTML تو صفحه بذار. اسم و ویژگی های هر کامپوننت رو از مستندات رسمی پروژه بردار و چیزی رو حدسی ننویس.
اگه روی وردپرس کار می کنی، همین کد رو با روش استاندارد بارگذاری اسکریپت و استایل وردپرس تو قالب یا افزونه خودت به صفحه اضافه کن.
اگه پروژه بیلددار داری، بسته با نام @pine-ds/core از طریق npm نصب می شه و بعدش تو کد پروژه ایمپورتش می کنی. اگه npm از سرور یا شبکه ات باز نمی شه، فایل داخلی همین مخزن رو جایگزین کن.
آخرش صفحه رو تو حالت راست به چپ با فونت فارسی خودت باز کن و دکمه ها، فرم ها و آیکون ها رو چک کن.
همیشه اول رو یه سایت تست امتحان کن، بعد سراغ سایت اصلی برو. نسخه رو هم یادداشت کن تا بعداً بدونی دقیقاً چی نصب بوده.
نشانی مستقیم فایل اصلی 0.0.4https://mirror.wbweb.ir/npm/@pine-ds/core@0.0.4/dist/index.js
پرسش‌های رایج
یه بسته npm و بخش پایه سیستم طراحی Pine هست که کامپوننت های اصلی رابط کاربری توشه. تیم Kajabi Design System Services ساخته و تو منبع رسمی با عبارت Base components for Pine Design System معرفی شده. برای ساختن رابط های یکدست ازش استفاده می شه.
بله، به شرطی که حوصله تنظیمش رو داشته باشی. بیشتر به درد پنل های سفارشی، صفحه تنظیمات افزونه و رابط های پیچیده می خوره. برای یه سایت ساده با قالب آماده معمولاً زیادی سنگینه و بهتره سراغش نری. فقط یادت باشه قبل از استفاده، راست به چپ بودن و فونت فارسی رو تو یه صفحه تستی چک کنی.
از پشتیبانی کامل مطمئن نیستیم و نباید فرض کنی هست. این مجموعه برای محصولات Kajabi ساخته شده. قبل از استفاده جدی، کامپوننت هایی که لازم داری رو تو یه صفحه راست به چپ با فونت فارسی تست کن و راستای متن و فاصله ها رو بررسی کن.
مجوز MIT یکی از آزادترین مجوزهای متن باز هست و استفاده، تغییر و توزیع رو حتی تو پروژه های تجاری اجازه می ده. شرطش اینه که اعلان مجوز و حق نشر رو نگه داری. برای اطمینان، متن مجوز همراه بسته رو هم یه بار بخون.
تو روزهای محدودیت اینترنت بین الملل می تونی نسخه رسمی و بدون تغییر این بسته رو از مخزن دانلود همین سایت بگیری. فایل ها روی هاست های داخلی ما نگهداری می شن و برای گرفتنشون لازم نیست به منبع خارجی وصل باشی.
bootstrap یه کتابخونه متن باز CSS و جاوااسکریپته که باهاش صفحه های واکنش گرا رو سریع می سازی. سیستم گرید، دکمه، فرم، منو، مودال و کلی کامپوننت آماده داره و لازم نیست همه چیز رو از صفر بنویسی. مجوزش MIT هست، پس توی سایت شخصی و تجاری می تونی ازش استفاده کنی.
@shoelace-style/shoelace یه کتابخونه از وب کامپوننت هاست که دکمه، دیالوگ، فرم، تب، منوی کشویی و کلی المان آماده رابط کاربری بهت می ده. چون روی استاندارد خود مرورگر ساخته شده، با وردپرس، ری اکت، ویو یا HTML ساده کار می کنه و به فریم ورک خاصی بند نیست.
@trendyol/baklava یه کتابخانه رابط کاربری متن باز از تیم Trendyol Tech با مجوز MIT است که سیستم طراحی Baklava رو به شکل مجموعه ای از کامپوننت های آماده و بسته npm ارائه می ده. به درد پروژه هایی می خوره که می خوان دکمه، فرم و عناصر رابط یکدست باشن و نمی خوان از صفر بسازن.
@wix/design-system یه کتابخانه React از خود Wix هست که کامپوننت های آماده رابط کاربری مثل دکمه، فرم، جدول، مودال و صفحه داشبورد رو بهت می ده. به درد ساخت پنل ها و اپ هایی می خوره که ظاهرشون باید با محیط Wix هماهنگ باشه. از npm نصب می شه و طبق اطلاعات بسته، مجوزش MIT هست.
@ionic/core بسته پایه آیونیک (Ionic) و مجموعه ای از کامپوننت های رابط کاربری آماده برای ساخت اپ موبایل و وب اپ هست. دکمه، لیست، مودال، تب و قطعه های دیگه رو به شکل وب کامپوننت برمی داری و بدون وابستگی به Angular یا React یا Vue توی هر صفحه ای استفاده می کنی.
@sap-theming/theming-base-content یه بسته npm از SAP SE با مجوز Apache هست که محتوای پایه تم های SAP رو نگه می داره؛ یعنی مقدارهای ظاهری و منابعی که کتابخونه های رابط کاربری SAP برای ظاهر یکدست بهشون تکیه می کنن. بیشتر کنار کامپوننت های SAP و به عنوان وابستگی استفاده می شه، نه به تنهایی.
آخرین نسخه
۱۱.۳۶.۵
نسخه‌ها
۳۸
به‌روزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.
