فریم ورک ها به برنامه نویسان کمک میکند که آسانتر کار کنند.آنها باعث افزایش بهره وری می شوند و برای نمونه سازی سریع و سایت ها بسیار مناسب هستند. علاوه بر این، آنها مزایایی مانند سازگاری متقابل مرورگر و اجزای آماده CSS را ارائه می دهند.اساسا، با استفاده از یک فریم ورک سمت کاربری (front-end) به این معنی است که شما مجبور نیستید هر بار که یک وب سایت جدید و یا یک برنامه وب طراحی می کنید از ابتدا شروع کنید.فریم ورک های front-end که به عنوان فریم ورک های css هم نامیده می شوند، معمولا از یک سری فایهایی تشکیل شده اند مثل css jsvascriptدرحالیکه فریم ورک های سمت کاربری (front-end) بسیار زیاد هستند. دوتا از محبوب ترین فریم ورک ها، بوتسترپ (bootstrap) و فاندیشن (foundation) هستند. اگرچه بسیار شبیه به هم هستند اما هنگام طراحی سایت تفاوت های کلیدی دارند.در این مقاله، بررسی خواهیم کرد که کدام فریم ورک برای شما، نسبت به اهداف و سبکی که درنظر دارید، مناسب تر است.داستان شروع بوتسترپفریم ورک بوتسترپ برای اولین بار در اواسط سال 2010 توسط کارکنان Mark Otto در توییتر ساخته شد. در ابتدا یک فریم ورک داخلی بود اما بعدا در 19 اوت 2011 به عموم منتشر شد.
داستان شروع فاندیشنفاندیشن نیز به عنوان یک فریم ورک داخلی در سال 2008 توسط شرکت Zurb ایجاد شد و آن را در پاییز 2011 در اختیار عموم قرار داد.با گذشت زمان، فاندیشن نسخه های بیشتری نسبت به بوتسترپ انتشار داد ( به این معنی که کدام یک از آنها زمان بیشتری برای تنظیم دقیق و حل مشکلات صرف کرده اند). با این حال، کاربرانی که از بوتسترپ استفاده می کنند بیشتر هستند.شباهت های مابین بوتسترپ و فاندیشن
- منبع باز (open source)
هر دو فریم ورک تحت مجوز MIT ساخته شده اند، به این معنی که انها برای استفاده و انطباق، آزاد و کدباز هستند.
- واکنشگرا (یا mobile first)
یک سایت واکنشگرا، اساسا به این معنی است که وبسایت یا برنامه وب میتواند به صورت یکپارچه در اندازههای صفحه نمایش، موبایل، رایانه رومیزی و دسکتاپ و .. کار کند.
- سیستم 12گرید
یک سیستم گرید بندی در فریم ورک، به شما این امکان را می دهد که با قدرت بیشتری چیدمان صفحه سایت یا وب اپلیکیشن خود را طراحی کنید.هر دو فریم ورک عبارتند از:
- سطر ها و ستون ها
- توانایی کشیدن ستون در ردیفها و بالعکسپ
Figure 1 - نمونه گرید بندی بوتسترپFigure 2 - نمونه گرید بندی فاندیشن
- سبک اجزای css
بوتسترپ و فاندیشن هر دو "پیش طراحی شده" و اجزای "آماده به کار" ارائه شده اند. مانند موارد زیر:
- نوار ناوبری
- دکمه ها
- صفحه بندی
- برچسب ها
- نوار پیشرفت
- و ...
- افزونه های اختیاری جاوااسکریپت
این افزونه های 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
منبع: طراحی سایت نوپرداز
