نگاهی کوتاه بر نسخه جدید فریمورک Foundation

فریمورک Foundation محصول کمپانی ZURB هست و مثل فریمورک‌های دیگر مانند bootstrap برای توسعه front-end به کار میرود. اما به جرئت می‌توان گفت یکی از پیشرفته‌ترین فریمورک‌هایی هست که در این زمینه منتشر می‌شود، و به تازگی نسخه ۶ آن منتشر خواهد شد. تمرکز اصلی فاندیشن بر روی ساخت چارچوبی است که به شما کمک می‌کند تا با سرعت بیشتری از نمونه اولیه تا تولید محصول پیش بروید. در نسخه جدید پیشرفت‌هایی حاصل شده، مانند کاهش ۵۰ درصدی در مقدار کدها اما پیشرفتهایی دیگری نیز وجود دارند که کمک می‌کنند تا شما بیشتر و سریعتر از قبل حرکت کنید. در این مطلب نگاه کوتاهی داریم به چند پیشرفت قابل توجه :

قابلیت‌های بیشتر و بهتر برای ساخت منو (navigation)

پایه و اساس تمامی پایگاه‌های اینترنتی بزرگ، نوار ناوبری (منوی) و نحوه هدایت آن است. با وجود اینکه نقشه و پیوندها و یک سری سلسه مراتب کمک می‌کنند تا شما به یک طراحی خوب برسید اما، فریمورک‌ها نیز می‌بایست با ایجاد برخی راه‌های میانبر به شما در ناوبری سایت کمک کند. ما برای این کار از Top Bar  در فاندیشن ۵ استفاده می‌کردیم، در نسخه ۵ این بخش دارای پایه و اساس خوبی بود، یک منو و فهرست کشویی کاربردی که دارای دو بخش چپ و راست بود که به شکلی جادویی به فهرست و منویی مناسب برای موبایل و دستگاه‌های کوچکتر نیز تغییر حالت می‌داد. با این حالت نکته منفی برای آن این است که پیکربندی آن مشکل و کمی دشوار است و برای سفارشی‌سازی آن نیز چالش‌های زیادی را پیش رو داشتیم.

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

• فهرست درون خطی (Inline list)
• نوار پیمایش کناری (Side nav)
• نوار آیکون (Icon bar)
• نوار زیرمنو (Sub nav)

شما می‌توانید با چند دستکاری ساده تغییرات قابل توجه را انجام دهید:

• می‌توانید آن را عمودی کنید – سپس منوهای کشویی را بیفزایید (flyouts).
• می‌توانید تراز پیوندها را از سمت راست یا چپ بچینید یا به طور مساوی پخش کنید.
• و یا از منوی‌های dropdowns و drilldowns یا از منوی آکاردئونی استفاده کنید.

اگر منو را با کلاس جدید

.top-bar

  درست کنید می‌توانید :

• یک منوی بالایی با پس زمینه دلخواه ایجاد کنید.
• و از فرم‌ها و دکمه‌ها (buttons) نیز داخل منو  بهره ببرید.

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

<ul class="vertical menu-bar" data-menu-bar="drilldown medium-dropdown">

پیمایش و ناوبری (منو) جدید در فاندیشن به شما کمک می‌کند که یکی از مهمتری بخش‌های سایت خود را بسیار سریعتر از قبل انجام دهید. نوار پیمایش و ناوبری که ایجاد می‌شود از کدهای بسیار کمتری نیز برخوردار است و در نتیجه باعث خواهد شد تا صفحه اینترنتی شما بسیار سریعتر بارگیری و نمایش داده شود و همچنین منو بسیار ساده‌تر بر اساس چیزی که می‌خواهید ساخته خواهد شد.

ابزاری قدرتمند برای اینکه پلاگین‌های خود را داشته باشید

یکی از راه‌هایی که برای کاهش کدهای نوشته شده در پلاگین‌های JS، این بود که آن را به کاربردهای کوچکتری تقسیم شوند که رویدادهایی (events) که در پلاگین‌های بزرگ روی می‌دهند را اداره کنند. با ساخت این پلاگین‌ها به صورت عمومی، شما می‌توانید از آنان برای ساخت پلاگین خود استفاده کنید.

Universal Toggler API:تبدیل کلاس‌ها با یک ویژگی-داده. مثال:

<ul class="menu" id="menuBar" data-toggler=".expanded">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>


<p><a data-toggle="menuBar">Expand!</a></p>

ابزار کاربردی عمومی که می‌توانید در پلاگین سفارشی خود از آنان استفاده کنید:

ImNotTouchingYou: یک تابع عموی برای تعیین برخورد با لبه کانتینرها. این تشخیص لبه تولتیپ‌ها یا بازشونده‌های کشویی و … را در viewport یا کانتینر انتخابی شما حفظ خواهد کرد.
IseeYou: یک تابع public برای اضافه کردن اتفاق onescroll به صورت listener به ‘window’ روش نوشتنش هم راحته؛ [DATA-SCROLL=idOdElemnt]

IhearYou: تابعی برای افزودن اتفاق resize به ‘window’

فعلا به همین موارد بسنده می‌کنیم و منتظر می‌شویم تا به همراه انتشار نسخه اصلی لیست کاملی از آنها منتشر شود.

 

Panini: یک ابزاری جدید

به عنوان یک استودیو، ZURB از فاندیشن برای ساخت هزاران پایگاه استفاده می‌کند. در فاندیشن ۶ شما با یک بسته توسعه یافته آشنا می‌شوید با نام Panini. در واقع Panini به شما در جهت بهینه‌سازی کد و روند کارتان کمک می‌کند. این سیستم که از Glup قدرت گرفته و می‌تواند کارهای زیادی انجام دهد:

• کامپایل Sass به CSS
• فایل‌های جاوا اسکریپت را به یک فایل ترکیب کند.
• قالب‌های HTML را به صفحات و موراد جزئی تبدیل کند.

همچنین در زمان انتشار محصول نهایی می تواند کارهای زیر را برای شما انجام دهد:

• کامپایل کردن CSS
• استفاده از UnCSS برای حذف کلاس‌های بلا استفاده از CSS شما
• فشرده‌سازی جاوا اسکریپت
• فشرده‌سازی تصاویر

و یک از قابلیت‌های بسیار کاربردی آن، امکان نوشتن کدهای دینامیک برای صفحات استاتیک است. مثلا: افزودن یک کلاس active به صفحهٔ جاری:

<ul class="menu">
  <li><a href="index.html" class="{{#ifpage 'index'}}current{{/ifpage}}">Home</a></li>
  <li><a href="about.html" class="{{#ifpage 'about'}}current{{/ifpage}}">About</a></li>
  <li><a href="contact.html" class="{{#ifpage 'contact'}}current{{/ifpage}}">Contact</a></li>
</ul>

استفاده از چند بخش مجزا برای تکه‌های بزرگ HTML:

<head><title>My Site</title></head>
  <body>
    {{> header}}
    {{> navigation}}
    {{> body}}
    {{> footer}}
  </body>
</html>

تکرار تکه‌ای از HTML برای پر کردن نمونه اولیه:

<ul>
  {{#repeat 5}}
  <li>List item</li>
  {{/repeat}}
</ul>

یکی از برتری‌های اصلی فریمورک فاندیشن این هست که خود شرکت تولید کننده اون یعنی ZURB از اون برای توسعه سفارش‌ها و کارهای حرفه‌ای خودش استفاده می‌کند و در عین حال اون رو برای عموم هم به صورت بازمتن منتشر میکند. امروز (۲۸ آبان) نسخه ۶ فاندیشن رسما منتشر می‌شود. به زودی مطالب و مقالات بیشتری در این زمینه منتشر می‌کنیم. اگر از این فریمورک استفاده می‌کنید خوشحال می‌شویم تجربیات خودتان را با دیگران به اشتراک بگذارید.