Responsive Web Design - Frameworks

🔹 فریم‌ورک (Framework) چیه؟

فریم‌ورک‌ها مجموعه‌ای از کدهای آماده (HTML, CSS, JS) هستن که به ما کمک می‌کنن سریع‌تر و راحت‌تر طراحی واکنش‌گرا انجام بدیم.
به جای اینکه همه‌چیز رو از صفر بنویسیم، از کلاس‌ها و قوانین آماده استفاده می‌کنیم.

🔹 Bootstrap

یکی از معروف‌ترین فریم‌ورک‌های واکنش‌گراست.

📌 نمونه کد:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">ستون ۱</div>
      <div class="col-md-6">ستون ۲</div>
    </div>
  </div>
</body>
</html>

✅ با استفاده از col-md-6 دو ستون در دسکتاپ کنار هم قرار می‌گیرن ولی در موبایل زیر هم می‌آن.

🔹 Tailwind CSS

یک فریم‌ورک جدید و سریع با کلاس‌های آماده برای استایل‌دهی.

📌 نمونه کد:

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div class="bg-blue-200 p-4">ستون ۱</div>
  <div class="bg-green-200 p-4">ستون ۲</div>
</div>

✅ در موبایل یک ستون و در دسکتاپ دو ستون نمایش داده میشه.

🔹 Foundation

فریم‌ورکی پیشرفته شبیه Bootstrap با امکانات زیاد برای طراحی واکنش‌گرا.

📌 مثال ساده:

<div class="grid-x grid-padding-x">
  <div class="cell small-12 medium-6">ستون ۱</div>
  <div class="cell small-12 medium-6">ستون ۲</div>
</div>

🔹 نکته مهم

  • Bootstrap رایج‌ترین و پرمستندترین فریم‌ورک است.

  • Tailwind CSS انعطاف‌پذیرتره و کدنویسی سریع‌تری میده.

  • Foundation برای پروژه‌های بزرگ سازمانی مناسب‌تره.