مقایسه فریم ورک های بوتسترپ و فاندیشن در طراحی سایت

فریم ورک ها به برنامه نویسان کمک میکند که آسانتر کار کنند.

آنها باعث افزایش بهره وری می شوند و برای نمونه سازی سریع و سایت ها بسیار مناسب هستند. علاوه بر این، آنها مزایایی مانند سازگاری متقابل مرورگر و اجزای آماده CSS را ارائه می دهند.

اساسا، با استفاده از یک فریم ورک سمت کاربری (front-end) به این معنی است که شما مجبور نیستید هر بار که یک وب سایت جدید و یا یک برنامه وب طراحی می کنید از ابتدا شروع کنید.

فریم ورک های front-end که به عنوان فریم ورک های css هم نامیده می شوند، معمولا از یک سری فایهایی تشکیل شده اند مثل css jsvascript

درحالیکه فریم ورک های سمت کاربری (front-end) بسیار زیاد هستند. دوتا از محبوب ترین فریم ورک ها، بوتسترپ (bootstrap) و فاندیشن (foundation) هستند. اگرچه بسیار شبیه به هم هستند اما هنگام طراحی سایت تفاوت های کلیدی دارند.

در این مقاله، بررسی خواهیم کرد که کدام فریم ورک برای شما، نسبت به اهداف و سبکی که درنظر دارید، مناسب تر است.

داستان شروع بوتسترپ

فریم ورک بوتسترپ برای اولین بار در اواسط سال 2010 توسط کارکنان Mark Otto در توییتر ساخته شد. در ابتدا یک فریم ورک داخلی بود اما بعدا در 19 اوت 2011 به عموم منتشر شد.

داستان شروع فاندیشن

فاندیشن نیز به عنوان یک فریم ورک داخلی در سال 2008  توسط شرکت Zurb ایجاد شد و آن را در پاییز 2011 در اختیار عموم قرار داد.

با گذشت زمان، فاندیشن نسخه های بیشتری نسبت به بوتسترپ انتشار داد ( به این معنی که کدام یک از آنها زمان بیشتری برای تنظیم دقیق و حل مشکلات صرف کرده اند). با این حال، کاربرانی که از بوتسترپ استفاده می کنند بیشتر هستند.

شباهت های مابین بوتسترپ و فاندیشن

1. منبع باز (open source)

هر دو فریم ورک تحت مجوز MIT ساخته شده اند، به این معنی که انها برای استفاده و انطباق، آزاد و کدباز هستند.

2. واکنشگرا (یا mobile first)

یک سایت واکنشگرا، اساسا به این معنی است که وبسایت یا برنامه وب میتواند به صورت یکپارچه در اندازههای صفحه نمایش، موبایل، رایانه رومیزی و دسکتاپ و .. کار کند.

3. سیستم 12گرید

یک سیستم گرید بندی در فریم ورک، به شما این امکان را می دهد که با قدرت بیشتری چیدمان صفحه سایت یا وب اپلیکیشن خود را طراحی کنید.

هر دو فریم ورک عبارتند از:

• سطر ها و ستون ها
• توانایی کشیدن ستون در ردیفها و بالعکسپ

Figure 1 - نمونه گرید بندی بوتسترپ

Figure 2 - نمونه گرید بندی فاندیشن

4. سبک اجزای css

بوتسترپ و فاندیشن هر دو "پیش طراحی شده" و اجزای "آماده به کار" ارائه شده اند. مانند موارد زیر:

• نوار ناوبری
• دکمه ها
• صفحه بندی
• برچسب ها
• نوار پیشرفت
• و ...

5. افزونه های اختیاری جاوااسکریپت

این افزونه های JS برای افزودن انواع خاصی از ویژگی های پیشرفته تر در front-end کار را برای برنامه نویسان آسان تر میکند؛ مانند منو های ساید بار یا پاپ اپ ها.

بوتسترپ دارای 12 افزونه است درحالیکه فاندیشن دارای 15 افزونه است.

جدول مقایسه بوتسترپ و فاندیشن

 حال این سوال برای ما ایجاد می شود که استفاده از کدام یک برای طراحی سایت بهتر است؟!! در مقالات بعدی به این موضوع خواهیم پرداخت با ما همراه باشید.