نسخه 6 از Foundation، حالا بهتر از همیشه

yeti-sketch2

از قدیم و نه خیلی قدیم بین طراحان وب سوالی مطرح بوده که Foundation یا Bootstrap؟ دو فریم ورک مطرح CSS که البته در حال حاضر تعدادشون هم کم نیست و شاهد رقیب های قوی ای مانند Semantic UI نیز هستیم.

البته امروز ما قراره تمرکز رو روی نسخه 6 از Foundation بزاریم. من خودم چند سال سابقه کار با Foundation رو دارم و تقریبا با خوبی ها و مشکلاتش آشنا شدم. پس بزارید یه نگاهی به خوبی هاش داشته باشیم:

امکان شخصی سازی زیاد

یک نقطه مثبت فاندیشن، قابلیت شخصی سازی زیادش بود. البته در اینجا استفاده از Sass هم خیلی کمک کننده بود. شما یک فایل Settings دارید که می توانید در آن جا به خیلی از تنظیمات و شخصی سازی ها دسترسی داشته باشید.

ظاهرسازی کم

یکی از دلایلی که من فاندیشن رو به Bootstrap ترجیح می دم همین کم بودن استایل دهی هاست. چیزی که باعث می شه خیلی در چارچوب فریم ورک قرار نگیرید ویا برای تغییرات مجبور به بازنویسی زیاد نشوید.

البته کلی مزیت های دیگه نظیر مستندات خوب، پشتیبانی از زبان های راست به چپ (نظیر فارسی)، ماژولار بودن، استفاده از Sass و… .

و اما نگاهی هم داشته باشیم به مشکلاتش:

پلاگین های جاوااسکریپت داغون!

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

سنگین بودن هم حجمی هم پردازشی

از لحاظ حجمی با اینکه ساختار ماژولار هست و شما خیلی راحت می توانید کامپوننت های اضافی را بردارید اما در نهایت حجم زیادی به صفحه شما برای استفاده از این فریم ورک اضافه می شود. البته این همه ماجرا نیست، ساختار کدنویسی فاندیشن با استایل های تو در تو و پیچیده باعث بالا رفتن پیچیدگی و در نتیجه گرفتن پردازش بیشتر برای نمایش صفحه می شه که این قضیه روی طرح های پیچیده، به خصوص در موبایل واقعا آزاردهنده هست.

Google-Cover-1088x608-2

و اما! ببینیم نسخه 6 برامون چی داره؟

کم حجم تر

طبق گفته سازنده، حجم کدها نسبت به نسخه 5 حدود 50% کاهش یافته است که البته حرف درستی هست، حجم فایل CSS از تمامی کامپوننت ها به صورت فشرده کمتر از 50 کیلوبایت هست که خب واقعا، واقعا در این زمینه کار خیلی بزرگی انجام شده.

پردازش کمتر

یه بررسی که روی کدهاش داشتم و خودش هم بهش اشاره کرده، نشون می ده دیگه خبری از اون ساختار پیچیده و تو در توی سابق نیست (البته هنوز نشانه هایی ازش هست ولی خیلی خیلی کمتر شده) و این خبر خیلی خوبیه. البته هر چند هنوز نحوه کلاس دهی Bem و البته یک مرحله جدیدتر آن یعنی BEMIT رو اجرا نکرده (نحوه کلاس دهی مورد علاقم) اما همین هم راضی کنندس.

بهبود در زمینه جاوااسکریپت ها

یه بررسی کوتاه روی کدهای جاوااسکریپ نشون دهنده بهبود نسبی داره اما خبری از رفع مشکلات بنیادین نیست تقریبا. شاهد کاهش حجم هستیم اما نه خیلی. متاسفانه هنوز وابستی به jQuery وجود داره. در مجموع باز پیشنهاد می کنم تا جای ممکن سراغ این پلاگین ها نروید.

گرید بهتر و Flexbox Grid اختیاری

مهمترین بخش یک CSS Framework بخش Grid اون هست. این قسمت در نسخه 6 حالا تنظیمات و انعطاف بیشتری را ارائه می دهد و البته یک گزینه تبدیل Grid با استفاده از Flexbox هم دارید. به نظر می رسه که Zurb تصمیم داره Foundation Sites رو با Foundation Apps یکی کنه.

برای آشنایی بیشتر با نسخه 6 و تغییرات اون به این صفحه مراجعه کنید.

2 دیدگاه

  1. سلام،
    خیلی دنبال همچین نوشته ای می گشتم و خوشحالم که اینجا پیداش کردم.
    میشه بگید کلا استفاده از این فریم ورک خوب هست یا نه؟! در واقع چه زمانی و برای چه پروژه هایی ازش استفاده کنیم؟

    • سلام،
      خوشحالم که مفید بوده. در اینکه این فریم ورک خوب هست شکی نیست… با توجه به کاهش حجمش می شه روی پروژه های کوچک تا بزرگ ازش استفاده کرد. اما خب استفاده از فریم ورک های CSS می تونه برای هر پروژه هم متفاوت باشه. اگر پروژه بزرگ و مهم هست پیشنهاد من استفاده از کامپوننت Grid این فریم ورک ویا بقیه فریم ورک ها هست.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *