uikit یه فریم ورک فرانت اند سبک و ماژولار برای ساخت سریع رابط کاربریه. شبکه بندی، منو، مودال، اسلایدر، آکاردئون و کلی کامپوننت آماده با CSS و جاوااسکریپت داره و با مجوز MIT منتشر شده. اگه می خوای ظاهر سایتت رو بدون کدنویسی زیاد بالا بیاری، گزینه خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
uikit یه فریم ورک فرانت اند از تیم YOOtheme هست و هدفش ساده است: کامپوننت و استایل آماده بهت بده تا رابط کاربری رو سریع بسازی. برای هر مودال، منوی موبایل یا اسلایدر لازم نیست از صفر کد بنویسی. یه ساختار HTML مشخص می ذاری و uikit بقیه کار رو انجام می ده. تو رجیستری npm هم با همون اسم uikit پیداش می کنی.
کتابخونه چیزهایی رو داره که تقریبا هر سایتی بهشون نیاز پیدا می کنه: سیستم گرید، نوار ناوبری، آف کنواس، دراپ داون، آکاردئون، تب، اسلایدر و اسلایدشو، لایت باکس، نوتیفیکیشن، تولتیپ و استایل آماده برای فرم ها. یه مجموعه آیکون هم همراهشه. بیشتر رفتارها با ویژگی های HTML که با uk- شروع می شن فعال می شه، پس خیلی وقت ها لازم نیست حتی یه خط جاوااسکریپت بنویسی. اگه کنترل بیشتری بخوای، API جاوااسکریپتش هم هست.
به درد صفحه های فرود، سایت های شرکتی، پنل های مدیریتی ساده و قالب های وردپرس سفارشی می خوره. ماژولار بودنش یه مزیت واقعیه: سورس Less و Sass داره، پس می تونی فقط بخش هایی که لازم داری رو بسازی و حجم نهایی رو پایین نگه داری. اگه کاربرات با اینترنت کند یا نوسان دار وارد سایتت می شن، این خیلی کمک می کنه.
همه جا هم انتخاب اول نیست. اکوسیستمش از بوت استرپ کوچیک تره و قالب و آموزش فارسی آماده کمتری پیدا می کنی. اگه پروژه ات روی کامپوننت های ری اکت یا ویو بنا شده، سراغ کتابخونه ای برو که مستقیم برای همون ساخته شده. برای سایت فارسی هم از همون اول دو چیز رو چک کن: نسخه راست به چپ استایل ها رو بارگذاری کن، و فونت فارسی (مثلا فونتی که خودت روی هاست میزبانی می کنی) رو جایگزین فونت پیش فرض کن تا ظاهر کار به هم نریزه.
نسخه های رسمی و بدون تغییر uikit تو مخزن داخلی ما هم در دسترسه. وقتی npm یا CDN های خارجی در دسترس نیست، فایل ها رو از اینجا می گیری و روی هاست خودت می ذاری.
راهنمای استفاده
برای استفاده از uikit تو یه صفحه معمولی چند قدم بیشتر لازم نیست و حتما نباید پروژه npm راه بندازی.
فایل های کتابخونه رو از همین صفحه دانلود کن و کنار فایل های سایتت، مثلا تو پوشه assets، بذار.
فایل CSS رو تو بخش head صدا بزن. اگه سایتت راست به چپ هست، نسخه RTL استایل رو بذار، نه نسخه معمولی رو.
فایل جاوااسکریپت اصلی رو آخر صفحه، قبل از بسته شدن body بذار. اگه از آیکون ها استفاده می کنی، فایل آیکون ها رو بعد از فایل اصلی بیار، چون ترتیبش مهمه.
تو HTML از ویژگی های uk- استفاده کن؛ مثلا uk-grid برای شبکه بندی، uk-toggle برای باز و بسته کردن یه المان یا uk-modal برای پنجره بازشو.
کد آماده برای افزودن به صفحه پایین همین صفحه هست. فقط مسیر فایل ها رو با پوشه واقعی خودت یکی کن.
اگه با وردپرس کار می کنی، فایل ها رو با wp_enqueue_style و wp_enqueue_script تو functions.php قالب اضافه کن تا لازم نباشه دستی تو header و footer کد بذاری. اگه با npm کار می کنی، بسته uikit رو نصب کن و برای شخصی سازی تم از سورس Less یا Sass استفاده کن.
نشانی مستقیم فایل اصلی 3.2.7https://mirror.wbweb.ir/npm/uikit@3.2.7/dist/js/uikit.min.js
پرسش‌های رایج
uikit یه فریم ورک فرانت اند سبک و ماژولاره که کامپوننت های آماده رابط کاربری رو با CSS و جاوااسکریپت بهت می ده. کارشون شبیه همه، ولی uikit با پیشوند uk- کار می کنه و بیشتر رفتارها رو با ویژگی های HTML فعال می کنه. اکوسیستم بوت استرپ بزرگ تره، در عوض uikit ساده تر و جمع و جورتره.
نسخه راست به چپ استایل ها همراه کتابخونه هست و باید به جای نسخه معمولی بارگذاریش کنی. فونت پیش فرض برای فارسی مناسب نیست، پس یه فونت فارسی انتخاب کن و جایگزینش کن. بعد از راه اندازی، منوها و فرم ها رو تو مرورگر و موبایل تست کن تا جهت ها درست باشن.
نه، نسخه های فعلی uikit مستقل کار می کنن و به jQuery وابسته نیستن. اگه سایتت از قبل jQuery داره، مشکلی پیش نمیاد و هر دو کنار هم کار می کنن. ولی فقط برای uikit لازم نیست jQuery رو اضافه کنی، چون حجم اضافه ای به صفحه تحمیل می کنه.
آره. مجوز MIT استفاده تجاری و تغییر رو اجازه می ده. فایل های CSS و جاوااسکریپت رو با wp_enqueue_style و wp_enqueue_script تو قالب اضافه کن. فقط حواست باشه قالب یا افزونه های دیگه ای که فریم ورک سنگین دیگه ای لود می کنن، با uikit تداخل نداشته باشن و حجم اضافه نسازن.
می تونی نسخه رسمی و بدون تغییرش رو از همین مخزن دانلود کنی و روی هاست خودت بذاری. اینطوری سایتت به CDN خارجی وابسته نیست و با قطعی یا کندی اینترنت بین الملل هم بالا میاد. بعد از آپلود، مسیر فایل ها رو تو مرورگر چک کن.
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 و به عنوان وابستگی استفاده می شه، نه به تنهایی.
آخرین نسخه
۱۱.۳۶.۵
نسخه‌ها
۳۸
به‌روزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.
