Bootstrap
بوت استرپ، پرکاربردترین فریم ورک CSS است. که با استفاده از اسکریپت های HTML، JS که توسط Mark Toto و Jacob Thornton طراحی شده است. اولین هدف آن طراحی سایت های Responsive بود. این مجموعه ای از Feature ها است که باعث افزایش سرعت و آسانی پروژه می شود. همانطور که توسعه دهندگان آن با افتخار ادعا می کنند، این فریم ورک برای مردمی از تمام سطوح مهارت، انواع دستگاه ها و نمایشگر ها و همه سایز پروژه ساخته شده است.
جوانب مثبت:
فوق العاده خوب از دستگاه های موبایل پشتیبانی می کند.
گسترده ترین تنوع قالب را دارد.
دارای الگو های سیال Fluid و ثابت Fixed در سیستم Grid است.
دارای امکانات و ابزار های فراوان توسعه در مقایسه Foundation می باشد.
بسیاری از شرکت های برجسته توسعه وب این ابزار را ترجیح می دهند.
ضعف:
حجم بار گزاری کدهای آن زیاد است.
برند های معروفی از Bootstrap در وب سایت خود استفاده می کنند، از جمله: Lyft، Vogue، Riot Design، Newsweek.
Foundation
یک فریم ورک CSS که در سپتامبر 2011 توسط ZURB طراحی شده است. یک رابط کاربری نسبتا پیشرفته از نظر خلاقیت ارائه می دهد. دارای سازگاری با چندین دستگاه است. این فریم ورک Responsive به توسعه و طراحی وب سایت های زیبا کمک می کند.
جوانب مثبت:
بهترین امکانات سفارشی سازی را ارائه می دهد.
دارای یک سیستم Grid قوی است.
از توسعه سریع پروژه ها پشتیبانی می کند.
دارای مجموعه ای از قالب ها و کدهای آماده است.
به سایت ها و همچنین ایمیل ها خدمات می دهد.
ضعف:
کمی پیچیدگی در سفارشی سازی دارد.
اصلاح کدها برای مبتدیان سخت است.
در مقایسه با بوت استرپ کمتر محبوب است.
برند های معروفی که از Foundation در وب سایت خود استفاده می کنند، از جمله: Adobe، Amazon، Ebay، Pixar.
مقایسه Foundation 6.4 و Bootstrap 4 Alpha 6
Foundation و Bootstrap هر دو بشدت به روز شده اند. این ابزارهای شگفت انگیز کل فرایند را بهبود و روان تر می کند. با آخرین نسخه این دو ابزار طراحی، ویژگی های آنها بسیار محبوب شده است. اجازه دهید به طور جداگانه به این ویژگی های جدید نگاه کنیم. این به نوبه خود ما را در مقایسه آنها هدایت می کند.
Foundation 6.4
XY grids
آخرین نسخه Foundation شامل یک سیستم پیش فرض Grid قوی یعنی شبکه های XY می باشد. این باعث می شود که صفحات نمایش داده شده را به صورت افقی و عمودی کنترل کنید.
Flexbox به طور پیش فرض
اگر چه یک ویژگی در دسترس وجود دارد که از حالت شناور حمایت می کند، اما Flexbox بطور پیش فرض در نظر گرفته شده است.
Smooth Scroll
این ویژگی را می توان برای ایجاد رفتار “Smooth Scroll” برای هر لینک درون صفحه استفاده کرد.
ارتقا به ES2016 JavaScript
Foundation معماری جاوا اسکریپت خود را به معماری مبتنی بر ماژول ES2016 ارتقا داد. اگر کسی Module Bundler نداشته باشد، فایل JS کامپایل شده در dist/js می تواند سازگاری را فراهم می کند.
نمونه سازی ساده تر
فرآیند نمونه سازی و تولید اغلب مردم را گیج می کند. با استفاده از این ویژگی، Foundation یک راه بهتر با «Prototype Mode» برای سرعت بخشیدن به این عمل را ارائه می دهد.
ویژگی های Bootstrap 4 Alpha 6
باز نویسی سیستم Grid در Flexbox
آنها سیستم Grid را با سه تغییر عمده بهبود دادند. در اینجا می توان کلاس های Grid را با استفاده از متغیر SASS غیرفعال کرد. شما می توانید بخش سفارشی Grid را به اسناد اضافه کنید. شما همچنین شاهد Grid های ساده خواهید بود. این تغییرات در شبکه های استاندارد و Flexbox در دسترس هستند.
Flexbox به طور پیش فرض
همراه با پیش فرض بودن سیستم Flexbox، Grid های Flexbox نیز در کنار موارد استاندارد موجود است. همچنین امکانات جدید Flexbox Alignment Utility Classes برای توزیع آیتم ها در دسترس هستند.
فرم ها
با توسعه ی آلفا 4، تغییرات قابل توجهی در فرم به وجود آمد. پیشرفت های لازمی در اندازه، هم ترازی و طرح بندی اجزا، جدید شدن فرمهای اعتبارسنجی، ساده شدن متن راهنما به وجود آمده است.
سیستم اتوماتیک ستون های هم اندازه در Grid
کلاس Breakpoint-specific را می توان برای ستون هایی با عرض مساوی استفاده کرد.
Navbar به روز شده و بهبود یافته است
پیش از این، سبک های خاصی برای اجزای Navbar وجود داشت که قابلیت تنظیم با متغیر ها را نداشت. این به روز رسانی علاوه بر این امکان برخی ویژگی های جدید را به آن اضافه می کند.
قابلیت حاشیه اتوماتیک برای راحتی فضا سازی
تغییر در سیستم فونت ها
فونت Helvetica / Arial سیستم قدیم بود. آنها با یک سری فونت سیستم از فونت های مدرن و قوی جایگزین می شدند. این تغییر برای شرکت هایی مانند اپل و گوگل انجام شده است تا به جدیدترین دستگاه ها خدمات دهند. اگر چه، این به روز رسانی برای کاربران لینوکس انجام نشده است.
چرا Foundation به اندازه Bootstrap معروف نیست؟
Foundation به عنوان یک محصول Zurb، بر دو جنبه تمرکز دارد؛ ارائه فریم ورک های Responsive برای سایت ها و ایمیل ها. در حالی که Bootstrap فقط بر طراحی فریم ورک متمرکز بوده و اخیرا با ارائه تم ها گسترش یافته است. و بیشتر نشان می دهد که تلاش های Foundation، برخلاف Bootstrap، تا حدی متنوع و مختلف است. در نتیجه از این جهت Bootstrap در پایان مقایسه برتری پیدا می کند.
بوت استرپ نیز تایید تبلیغاتی توییتر را دارد، زیرا آن به طور انحصاری برای توییتر کار می کرد. از سوی دیگر Foundation، بیشتر همانند یک راز تجاری محسوب می شود. و برای توسعه دهندگان تازه کار Bootstrap در مقایسه با Foundation مثل آب خوردن است. برتری بوت استرپ می تواند از یک پایه مصرف کننده و سادگی آن باشد.
با بررسی آمارهای جستجو کاملا واضح است که هر دو فریم ورک دارای الگوی Zigzag هستند. جستجوی آنها به طور منظم افزایش و کاهش می یابد، و موازی هم حرکت می کنند. اما بوت استرپ دارای تعداد جستجوی دو برابر به معنای محبوبیت دو برابر است. این خود نشان از غالب بودن بوت استرپ در قلمرو فریم ورک ها می باشد. و به ما کمک می کند تا بینش بیشتری نسبت به این موضوع داشته باشیم.
جایگزین های Bootstrap
این دو فریم ورک Front-end (Bootstrap و Foundation) پر از آخرین امکانات هستند و بر بازار طراحی وب تسلط دارند. برای بوت استرپ چند جایگزین دیگر وجود دارد که همچنین می توانند مورد آزمایش قرار گیرند. برخی از آنها در زیر ذکر شده است.
UI semantic
این فریم ورک توسعه مسئول ایجاد پوسته های Exquisite و Responsive با استفاده از کد های سازگار با HTML است.
Materialize
یک نرم افزار Material Design، که ذاتا با امکانات قابل تنظیم زیادی همراه است. این ابزار پتانسیل خوبی برای نمایش در هر نوع دستگاه را دارد.
UIkit
یک فریم ورک سبک، ماجولار Front-end است. یک رابط کاربری قوی و قدرتمند را به کاربران ارائه می دهد.
Element
این یک کتابخانه Component برای توسعه دهندگان، طراحان و مدیران وب است. و بر اساس Vue 2.0 است که نیازی به Jquery ندارد.
Material design lite
یک Front-End Template است که به ایجاد برنامه های سریع و مدرن وب موبایل کمک می کند.
Skeleton
این یک فریم ورک مناسب برای مبتدیان در زمینه برنامه نویسی است که یکی از کوچک ترین چارچوب های CSS را ارائه می دهد.
ArtDesignUI
این فریم ورک یک پشتیبانی عالی فنی را فراهم می کند. همچنین ظاهرا سازگار با تمام مرورگرهای بزرگ وب است.
Petal
این یکی از آخرین فریم ورک های وب CSS است. یکی از کتابخانه های متن باز با استفاده از LESS به عنوان پیش پردازنده است.
Pure CSS
این فریم ورک رویکرد ماجولار به CSS دارد. کتابخانه های بسیاری از عناصر مختلف مانند فرم ها، شبکه ها، جداول و غیره را داراست.
Vital CSS
یک فریم ورک مینیمالیست متن باز رابط کاربری است که با SASS اجرا می شود. یک فریم ورک پایه CSS ساده با کتابخانه ساده و منحنی یادگیری کوتاه است.
با وجود فریم ورک های front-end فراوان و در دسترس، دلیلی وجود دارد که Bootstrap و Foundation بر وب تسلط دارند.
کلام آخر
برای حل این مبارزه بوت استرپ در مقابل Foundation، شما هستید که باید تصمیم بگیرید که چه فریم ورکی برای شما مناسب است، و آن نیز با نیازهای شما مطابقت داشته باشد. شما باید از ویژگی های موجود در فریم ورک ارائه شده استفاده کنید. اگر آنها با نیازهای شما مطابقت داشته باشند، می توانید فریم ورک CSS مورد نظرتان را انتخاب کنید. با توجه به توابع، شما نباید نادیده بگیرید که Foundation به سرعت در حال تحول است، اما بوت استرپ پشتیبانی گسترده کاربران خود را حفظ می کند. هر گونه فریم ورک CSS به منظور ساده سازی کل روند توسعه وب شماست. Foundation اغلب به عنوان یک جایگزین بوت استرپ استفاده می شود. در صورتی که قصد دارید بوت استرپ را به عنوان فریم ورک اصلی خود قرار دهید، می توانید از TemplateToaster به عنوان یک نرم افزار طراحی تم استفاده کنید. این می تواند به شما در ایجاد یک وب سایت بدون داشتن مشکل سازگاری کمک کند. از آنجا که TemplateToaster از Bootstrap استفاده می کند و تمام تم های طراحی شده در آن بر اساس Bootstrap هستند.
مقایسه فریم ورک های طراحی وب Responsive: Bootstrap و Foundation
- ۹۶/۰۸/۱۰