در این مقاله درباره‌ی دو تا از محبوب‌ترین فریمورک‌های frontend برای توسعه صحبت کردیم. Bootstrap بیشتر برای ساخت صفحات واکنش‌گرا وب و موبایل مورد استفاده قرار میگیرد درصورتی که Tailwind CSS برای ساخت صفحات شخصی سازی شده برای رابط کاربری مورد استفاده قرار میگیرد. ما درباره‌ی مزایا و تفاوت‌های هردوشون با همدیگر صحبت کردیم.
CSS یا (Cascading Style Sheets) یک زبان stylesheet هست که برای استایل دادن به علمنت های HTML در صفحات وب مورد استفاده قرار میگیرد. فریم ورک‌های CSS کتابخانه‌هایی هستند که به توسعه دهندگان این امکان را میدهد که وبسایت های خود را بطور اصولی با استفاده از CSS به روشی آسان‌تر طراحی کنند. این کتابخانه‌ها ready-to-use هستند بنابراین نیازی به نوشتن کدهای طولانی و تکراری CSS نیست.
شما به جای اینکه برای هر پروژه خود از صفر کدهای CSS را بنویسید، کتابخانه‌های CSS به شما ابزارهایی را معرفی میکنند که بتوانید با سرعت بالاتری رابط‌های کاربری را طراحی کنید. در این مقاله ما قصد داریم که دو تا از فریم ورک‌های محبوب CSS یعنی Tailwind CSS و Bootstrap را بررسی کنیم.
Tailwind CSS
Tailwind CSS توسط آقای Adam Wathan توسعه یافته است. Tailwind CSS یک فریمورک utility-first و سطح پایین CSS هست. این فریمورک کلاس های تک منظوره را ارائه می دهد که می توانند مستقیماً در صفحه وب برای استایل دادن به یک عنصر استفاده شوند. این موجب میشود که توسعه دهندگان با سرعت بیشتری بتوانند رابط‌های کاربری اختصاصی خود را طراحی کنند. Tailwind CSS یکی از محبوب ترین کتابخانه utility-first CSS میباشد.
ابزارهای رابط کاربری معمولی دارای اجزا و ویژگی های داخلی هستند، بنابراین، ایجاد یک رابط کاربری اختصاصی برای توسعه دهندگان سخت میشود. با این حال، Tailwind CSS قابلیت‌های شخصی سازی و انعطاف پذیری در مورد نحوه ظاهر و عملکرد یک عنصر را فراهم می کند. این باعث می شود که طراحی رابط های کاربری اختصاصی و سفارشی برای توسعه دهندگان راحت تر و سریع تر انجام شود.
برای اضافه کردن Tailwind CSS به صفحه وبسایت خود میتوانید از طریق لینک CDN زیر این کار را انجام دهید:
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
مثال:
<!DOCTYPE html>
<html>
<head>
<title> Tailwind CSS </title>
<link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<h1 class= "m-2 inline-block bg-teal-400 text-4xl"> نکات آموزشی </h1> <br>
<h2 class= "m-2 inline-block bg-teal-400 text-2x1"> Tailwind CSS </h2>
<div class= "w-full lg:max-w-full lg:flex">
<div class= "rounded-3xl h-16 w-24 flex bg-orange-400 m-2
border-black-600 lg:border-l-0
lg:border-t lg:border-gray-400 bg-white
rounded-b lg:rounded-b-none lg:rounded-r
p-2 leading-normal">
<p class="text-black-400 text-base"> این متن برای نمایش است. </p>
</div>
</div>
</body>
</html>
مزیت‌های استفاده کردن از Tailwind CSS
1. استفاده از CSS خام شما را مجبور میکند تا کد بیشتری برای اضافه کردن ویژگی های خاص به element ها بنویسید. این کار موجب افزایش حجم فایل CSS در صفحه سایت شما میشود. از طرف دیگر، با استفاده از Tailwind CSS، شما class های از پیش تعریف شده را در اختیار قرار دارید، بنابراین میتوانید از آن ها را به صورت مستقیم نوشته و همچنین در سراسر صفحه وب مجددا استفاده کنید. این کار باعث کاهش حجم فایل CSS صفحه سایت شما میشود.
2. کلاس‌های کاربردی موجود به صورت local در دسترس هستند، به این معنی که شما میتوانید آن‌ها را بدون اختلال یا خرابی در برنامه وب به‌روزرسانی یا تغییر دهید. این کار با استفاده از CSS خالص امکان‌پذیر نیست. این ابزار بسیار قابل تنظیم است و به ما اجازه میدهد رابط کاربری اختصاصی را ایجاد کنیم. این ابزار ویژگی‌های مختلفی مانند پالت رنگ‌های متفاوت، استایل‌دهی، فاصله‌گذاری و غیره را ارائه میدهد.
3. در حین استفاده از Tailwind CSS، شما نیازی ندارید تا برای کلاس‌های خود نام گذاری انجام دهید زیرا اغلب کلاس‌های مهم و پر استفاده در Tailwind CSS قرار دارد. این امر ایجاد element های سفارشی را برای توسعه دهندگان آسان تر می کند.
Bootstrap
Bootstrap یک فریم ورک رایگان و open-source زبان CSS میباشد که برای ایجاد صفحات وب و موبایل واکنش‌گرا (responsive) مورد استفاده قرار میگیرد. این یک فریم ورک mobile-first برای فرانت‌اند میباشد. این فریمورک شامل قالب‌های HTML, CSS و JavaScript برای اجزای مختلف میباشد. Bootstrap توسط Mark Otto و Jacob Thorton توسعه داده شده است. بوت استرپ یکی از محبوب ترین فریم ورک‌ها میباشد. این یکی از محبوب‌ترین فریمورک‌های open-source میباشد.
بوت اسرپ به برنامه‌نویسان این امکان را میدهد که صفحات وب و موبایل را با استفاده از تکنولوژی های سمت سرور (server-side) مثل Java, PHP, و غیره.... بسازند. بوت‌اسرپ برای ساخت اپلیکیشن‌هایی که میتوانند روی پلتفرم‌های مختلف مثل موبایل، تبلت، لپ تاپ، دسکتاپ برای مثال استفاده کرد. بوت نسخه 2 از بحث (responsive web applications) پشتیبانی میکند، در نسخه 3 از اپلیکیشن‌های موبایل پشتیبانی میکند و در ورژن 4 از SASSs و Flexbox پشتیبانی میکند.
برای اضافه کردن Bootstrap به پروژه خود میتوانید از لینک CDN زیر استفاده بکنید:
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
مثال:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap </title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel= "stylesheet">
</head>
<body>
<h1 class= "ml-3 mt-3"> نکات آموزشی </h1>
<h3 class= "ml-3 mt-2"> Bootstrap </h3>
<button type= "button" class= "btn btn-dark ml-4 mt-3"> دکمه آزمایشی </button>
<button type= "button" class="btn btn-success ml-3 mt-3"> موفقیت </button>
</body>
</html>
مزیت‌های استفاده کردن از Boostrap
1. بوت‌استرپ یکی از قدرتمندترین فریمورک‌ها برای توسعه front-end میباشد.
2. بوت‌استرپ به شما قالب‌های ready-made یا آماده رو برای توسعه پیشنهاد میکند.اینکار موجب افزایش سرعت توسعه میشود.
3. بوت‌استرپ از ایده mobile-first برای صفحات استفاده میکند اندازه صفحه را بر 12 قسمت با استفاده از سیستم Grid تقسیم میکند. بوت استرپ تضمین میکند که صفحه شما برای تمامی مرورگرها به یک شکل نمایش داده خواهد شد.
4. بوت‌استرپ میتواند طبق نیاز پروژه شخصی سازی شود. بوت‌استرپ استایل های پیشفرضی که هر مرورگر برای HTML در نظر گرفته است مثل buttons, images, icons, tables, code, alert و غیره را reset میکند. (در واقع تمامی آن استایل ها را غیرفعال میکند)
کدام یک بهتر است، Tailwind CSS یا Bootstrap؟
هر دو فریمورک در بخش‌های مختلف مورد استفاده قرار میگیرند. درباره‌ی اینکه کدوم یک از فریمورک‌ها بهتر است باید بگویم که این کاملا بستگی به نیاز پروژه شما دارد. اگر پروژه شما بیشتر با بخش backend کار میکند و نیاز به بخش‌بندی قالب دارید در این صورت Bootstrap برای شما میتونه گزینه بهتری باشه؛ اما اگر قالب سایت شما نیاز به شخصی‌سازی دارد و بیشتر با بخش front-end کار میکنید، در این صورت Tailwind CSS برای شما بهتر خواهد بود.
سخن نهایی
در این مقاله درباره‌ی دو تا از محبوب‌ترین فریمورک‌های frontend برای توسعه صحبت کردیم. Bootstrap بیشتر برای ساخت صفحات واکنش‌گرا وب و موبایل مورد استفاده قرار میگیرد درصورتی که Tailwind CSS برای ساخت صفحات شخصی سازی شده برای رابط کاربری مورد استفاده قرار میگیرد. ما درباره‌ی مزایا و تفاوت‌های هردوشون با همدیگر صحبت کردیم.
منبع: tutorialspoint
