دیما فریمورک
فریمورک مدرن و قدرتمند CSS با پشتیبانی کامل از RTL و زبان فارسی
چرا دیما فریمورک؟
مجموعه کاملی از کامپوننت‌ها برای ساخت اپلیکیشن‌های مدرن
طراحی مدرن
کامپوننت‌های زیبا با پشتیبانی از تم روشن و تاریک
پشتیبانی کامل RTL
طراحی شده برای زبان‌های راست به چپ
سبک و سریع
فقط ۱۳ کیلوبایت، بدون وابستگی
CDN آماده
بدون نیاز به نصب، فقط یک لینک
قابل سفارشی‌سازی
با CSS Variables به راحتی تغییر دهید
Dark Mode
پشتیبانی داخلی از حالت تاریک
شروع کار با دیما
در کمتر از یک دقیقه دیما فریمورک را به پروژه خود اضافه کنید
افزودن فونت وزیرمتن
ابتدا فونت فارسی وزیرمتن را اضافه کنید:
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet">
افزودن فایل CSS دیما
فایل CSS دیما را از CDN اضافه کنید:
<link rel="stylesheet" href="https://cdn.dimaframework.ir/dima.min.css">
تنظیم HTML
خصوصیت‌های RTL و زبان فارسی را تنظیم کنید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- فونت وزیرمتن -->
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet">
<!-- دیما فریمورک -->
<link rel="stylesheet" href="https://cdn.dimaframework.ir/dima.min.css">
</head>
<body>
<!-- محتوای شما -->
</body>
</html>
شروع استفاده
اکنون می‌توانید از کلاس‌های دیما استفاده کنید:
<button class="btn btn-primary">دکمه اصلی</button>
<div class="card">
<div class="card-header">
<h4 class="card-title">عنوان کارت</h4>
</div>
<div class="card-content">
<input type="text" class="input" placeholder="ورودی">
</div>
</div>
<html lang="fa" dir="rtl" class="dark">
پالت رنگ‌های دیما
سیستم رنگ‌بندی منعطف با CSS Variables
متغیرهای CSS
تمام رنگ‌ها قابل سفارشی‌سازی هستند
کامپوننت کارت
کارت‌های زیبا برای نمایش محتوا
کارت ساده
توضیحات کارت در اینجا
محتوای کارت در اینجا قرار می‌گیرد.
کارت بدون هدر
این کارت هدر جداگانه ندارد.
کارت با فوتر
محتوای کارت
کامپوننت نشان
نشان‌های کوچک برای برچسب‌گذاری
انواع نشان
کامپوننت هشدار
پیام‌های اطلاع‌رسانی و هشدار
کامپوننت‌های فرم
ورودی‌ها و کنترل‌های فرم
ورودی متن
سایر کنترل‌ها
کامپوننت مودال
پنجره‌های محاوره‌ای
نمونه مودال
کامپوننت تب
تب‌های قابل انتخاب
محتوای تب اول در اینجا قرار می‌گیرد.
محتوای تب دوم در اینجا قرار می‌گیرد.
محتوای تب سوم در اینجا قرار می‌گیرد.
کامپوننت پیشرفت
نوار پیشرفت و اسپینر
نوار پیشرفت
۲۵٪ تکمیل شده
۵۰٪ تکمیل شده
۷۵٪ تکمیل شده
کامپوننت آواتار
تصاویر پروفایل و گروه‌ها
سایزهای مختلف
گروه آواتار
کامپوننت تولتیپ
نمایش اطلاعات اضافی هنگام هاور
نمونه تولتیپ
نمونه‌های کامل
نمونه‌های کاربردی از استفاده دیما
کارت‌های قیمت‌گذاری
پایه
برای پروژه‌های کوچک
- ۵ پروژه
- ۱GB فضای ذخیره‌سازی
حرفه‌ای
برای تیم‌های کوچک
- نامحدود پروژه
- پشتیبانی ۲۴/۷
سازمانی
برای سازمان‌های بزرگ
- همه امکانات
- پشتیبانی اختصاصی
سوالات رایج
پاسخ به سوالات متداول درباره دیما