چگونه فریم‌ورک Foundation را به کمک NPM نصب و استفاده کنیم

فریم‌ورک رابط کاربری Foundation یکی از فریم‌ورک‌های رایج برای ساخت رابط کاربری است که می‌توان آن را پس از Bootstrap، پرکاربردترین فریم‌ورک css دنیا دانست. به دلیل پشتیبانی رسمی از زبان‌های راست‌ به چپ، من آن را در پروژه‌هایم به Bootstrap ترجیح می‌دهم و فریم‌ورک منتخب من برای ساخت رابط کاربری است. در این نوشتار، قصد دارم نحوه نصب این فریم‌ورک به کمک ابزار مدیریت بسته npm و استفاده از نسخه پیش‌کامپایل sass در این فریمورک را توضیح دهم.

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

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

پیش‌نیازهای نصب Foundation به کمک npm

فرض ما بر این است که شما:

• قبلا با فریم‌ورک‌هایی مانند Bootstrap یا Foundation کار کرده اید و با منطق کار آن‌ها آشنایی دارید.
• می‌دانید NPM چیست و چه کاربردی دارد.
• با sass و نحوه کامپایل کردن آن به کمک ابزارهایی چون Grunt، Gulp یا Webpack آشنایی دارید.

نصب Foundation به کمک NPM

یک فولدر برای پروژه جدید خود ایجاد کنید و پس از init کردن npm، کامپایلر sass به css را با روش دلخواهتان در آن فولدر راه‌اندازی کنید.

با استفاده از Command prompt به فولدر روت پروژه‌تان cd کنید و در آنجا، با کمک دستور زیر، فریمورک foundation را نصب کنید.

 npm install foundation-sites --save-dev

حال اگر به پوشه node_modules در پروژه خود نگاهی بیندازید، پوشه foundation-sites را در آن خواهید یافت که به این معنی است که این فریمورک به درستی در پروژه شما نصب شده است.

حال می‌خواهیم بخش‌هایی از فریم‌ورک foundation را که به آن نیاز داریم، در داخل فایل css نهایی کامپایل شده خودمان داشته باشیم. برای این کار، در روت پروژه، دو فولدر با نام‌های scss و css ایجاد کرده و درون فولدر scss، یک فایل با نام styles.scss ایجاد کنید. و آن را کامپایل کنید تا styles.css در فولدر css ایجاد شود و سپس styles.css را در داخل فایل html خود فراخوانی کنید.

حال می‌خواهیم استایل‌های مورد نیازمان را از فریم‌ورک فاندیشن، به داخل styles.scss خودمان احضار کنیم، تا در فایل css نهایی حضور داشته باشند. برای این کار، از داخل styles.scss باید فایل استایل اصلی فریمورک Foundation را import کنیم. پس خط زیر را در styles.scss وارد می‌کنیم:

@import '../node_modules/foundation-sites/scss/foundation';

حال اگر فایل را به css کامپایل کنیم، هنوز چیزی در آن نخواهیم یافت. چون هیچ کامپاننتی از فاندیشن را در پروژه درون‌ریزی (import) نکرده ایم. اکنون به درون‌ریزی کامپاننت‌ها می‌پردازیم.

اگر مشکلی با import شدن همه کامپاننت‌ها به درون فایل استایل خود ندارید، کافی است، خط زیر را پس از دستور import فوق، در styles.scss وارد کنید:

@include foundation-everything; 

اما این چیزی نیست که ما می‌خواهیم. ما می‌خواهیم فایل استایل ما سبک باشد و تنها استایل‌ها مورد نیازمان در آن باشد. پس از میان دستورهای include که در زیر فهرست کرده‌ایم، تنها مواردی را که در پروژه مان لازم داریم را در فایل styles.scss وارد می‌کنیم.

// استایل‌های کلی: توصیه ما این است که این سه را حتما وارد کنید
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// بر اساس سیستم گریدی که در فاندیشن استفاده می‌کنید، یکی از این‌ها را انتخاب و وارد کنید
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// از کامپوننت‌های زیر، فقط آن‌هایی را که استفاده می‌کنید وارد نمایید
// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

تنظیمات فاندیشن در فایل Settings

فریمورک فاندیشن یک فایل تنظیمات با نام settings.scss_ دارد که با ویرایش آن می‌توانیم تنظیمات متنوعی را روی چهارچوب اعمال کنیم. با ویرایش این فایل می‌توان تنظیماتی از قبیل پالت رنگ، فونت‌های مورد استفاده، گوشه‌های گرد حواشی و … را به کل چهارچوب اعمال کرد. این فایل به طور پیشفرض در آدرس node_modules/foundation/scss/settings قرار دارد. اما ما می‌خواهیم آن را در پروژه اصلی خود داشته باشیم که اولا با آپدیت احتمالی فاندیشن در آینده‌ از بین نرود و ثانیا در صورتی که بخواهیم پروژه را به روی رایانه دیگری ببریم، نیازی به انتقال پوشه‌های node_modules نداشته باشیم.

پس فایل _settings.scss را از آدرسی که در بالا گفته شد، کپی کرده و در فولدر scss پروژه خودمان، در کنار styles.scss قرار می‌دهیم. اگر این فایل را باز کنید، خواهید دید که در بالای آن فایلی با عنوان util فراخوانی شده است. فایل تنظیمات برای عملکرد خود به این فایل نیاز دارد. اما حال که جای فایل را عوض کرده و آن را داخل فولدر scss پروژه خود آورده‌ایم، باید لینک فراخوانی util را اصلاح کنیم. پس آن را به صورت زیر، بسته به ساختار پوشه‌های پروژه‌مان، تغییر می‌دهیم و فایل را ذخیره می‌کنیم:

@import '../node_modules/foundation-sites/scss/util/util';

حال باید این فایل تنظیمات را از درون styles.scss فراخوانی کنیم. برای این کار، در styles.scss، در خط بعد از فراخوانی (import) فاندیشن، فایل تنظیمات را نیز import می‌کنیم:

@import "/settings";

تا به اینجای کار، به فرض این که می‌خواهیم از xy-grid استفاده کنیم و علاوه بر استایل‌های جهانشمول (global) فقط نیاز به استایل فرم‌ها، دکمه‌ها و جداول داریم، فایل styles.scss ما به شکل زیر خواهید بود:

@import '../node_modules/foundation-sites/scss/foundation';
@import "/settings"; 

@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;
@foundation-xy-grid-classes;
@include foundation-button;
@include foundation-table;
@include foundation-close-button;

حال اگر این فایل را به styles.css کامپایل کنیم، خروجی نهایی ما فایلی است که شامل تمامی فریمورک فاندیشن نیست، بلکه فقط مواردی را دارد که ما به آن نیاز داریم. اگر طی فرآیند توسعه به کامپاننت‌های بیشتری از چهارچوب فاندیشن نیاز داشتیم، می‌توانیم آن‌ها را نیز درون فایل styles.scss به سادگی improt کنیم.

پس از این کار، می‌توانیم استایل‌هایی که خودمان می‌نویسیم را در انتهای styles.scss اضافه کنیم و یا آن‌ها را در فایل(ها)ی جداگانه قرار داده و improt‌ نماییم.