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

  • توسط کاظمی زاده
  • 5 دیدگاه
  • آموزش ها
مقایسه فریم ورک های بوتسترپ و فاندیشن در طراحی سایت

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

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

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

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

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

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

بوتسترپ 

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

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

فاندیشن 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. سبک اجزای css

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

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

 

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

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

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

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

 

بوتسترپ

فاندیشن

وبسایت

getbootstrap.com

foundation.zurb.com

ورژن

3.3.7

6.4.3

تاریخ آخرین ورژن منتشر شده

27 Dec 2017

18 Aug 2017

رتبه در گیت هاب

85000+

20000+

سوالات برچسب زده شده در stack overflow

41000+

3300+

پشتیبانی مرورگرها

Chrome (Mac, Windows, iOS, and Android)Safari (Mac and iOS only)Firefox (Mac and Windows)Opera (Mac and Windows)IE8+

Chrome (Mac, Windows, iOS, and Android)Safari (Mac and iOS only)Firefox (Mac and Windows)Opera (Mac and Windows)IE9+

واحدهای اندازه گیری

px

rem

LESS

بله

خیر

Sass/scss

بله

بله

سایز فایل

14 files  در 1019 KB

30 files  در 936 KB

سیستم گرید

12 column layoutFluid and fixed

12 column layoutFluid, block and centering available

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

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

5 دیدگاه

دیدگاه خود را ارسال کنید

15 + 2 =

پربازدیدترین ها