در این مقاله راجع به Moff.js صحبت خواهیم کرد.Moff.js روشی است برای دانلود کردن فقط قسمت های مورد نیاز از BootStrap و یا هر Css Framework دیگری که از آن در پروژه های خود استفاده می کنیم.

قبل از شروع بحث مختصری راجع به sass (برای آشنایی به این مبحث به مقاله کارکردن با SASS در ASP.Net MVC مراجعه کنید)صحبت خواهیم کرد.در css بسیاری از کدها تکراری است چقدر خوب بود اگر مانند زبان های برنامه نویسی Css هم دارای  پارامتر و تابع بود تا بتوانند بعضی کدها را فقط یک بار نوشته و بارها از آن استفاده کنند.
دو تکنولوژی sass و less پاسخی به این نیاز هستند.
Sass یک روش توسعه یافته از کدنویسی Css همراه با کد دستوری می باشد. sass ، یک روش کوتاه تر نویسی Css است که پس از اجرا شدن به  Css تبدیل می شود.
فایل های Bootstrap بسیار بزرگ هستند کاری که Moff.js انجام میدهد این است که تنها فایل هایی را که نیاز است به برنامه اضافه می کند.
پروژه های تحت وب می توانند از CSS frameworks مختلفی استفاده کنند.یکی از معروفترین این Css ها Bootstrap می باشد.شاید بتوان گفت که تنها بدی Bootstrap اندازه آن می باشد.کوچکترین ورژن Bootstrap به اندازه 154.9 KB است .
در درون پروژه خود نیاز به تنها قسمت هایی از این فرم ورک داریم ولی مجبوریم تمام css و فایل های .js آن را به برنامه لینک دهیم .کاربران سایت شما که از موبایل وارد سایت می شوند مجبورند تمام این کتابخانه را دانلود کنند.راه حل این مشکل این است که فرم ورک را به قسمت ها و ماژول های مختلفی تقسیم کنیم .مثلا قسمت هایی که کمتر استفاده میشوند و قسمت هایی که تقریبا همیشه استفاده می شوند.Moff.js در این قسمت وارد شده و عملکرد آن تقسیم فرم ورک بزرگ به قطعات کوچک است تا کاربران مجبور به دانلود قسمت های بی استفاده فرم ورک نباشند
هر ماژولی سه قسمت اصلی دارد
•    Main
•    Components
•    JavaScripts
در قسمت Main ماژولهای اصلی زیر قرار دارد
•    Buttons – Button styling
•    Core – Contains base styles
•    Forms – Responsible for forms
•    Glyphicons – Glyphicon styling
•    Grid – The grid system
•    Tables – Responsible for tables
•    Typography – Responsible for typography
قسمت Component شامل آیتم های Alerts, Badges, Breadcrumbs, Button groups, Dropdown و غیره است .استایل ها و فایل های js این آیتم ها درون قسمت Component قرار دارد
قسمت JavaScript شامل تمام فایل ها Js مربوط به bootstrap است .این قسمت فایل هایی چون Affix, Alert, Button, Carousel, دارد .
روش استفاده از ماژولها چگونه است :
ماژول اصلی fundamental است که به تمامی صفحات ما وصل خواهد شد.از این ماژول می توانیم به سایر ماژول ها متصل شویم

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css">

این ماژول شامل ماژول های Sass به شرح زیر است

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close';

ماژول ها به دو روش لود خواهند شد
AMD یاAsynchronous module definition
به کد زیر توجه کنید

Moff.amd.register({
    id: 'grid',
    depend: {
        js: ['bower_components/moff/dist/bootstrap/javascripts/button.js'],
        css: [
            'bower_components/moff/dist/bootstrap/main/grid.css',
            'bower_components/moff/dist/bootstrap/components/pagination.css',
        ]
    },
    file: {
        js: ['modules/listing.js'],
        css: ['modules/listing.css']
    },
    loadOnScreen: ['md', 'lg'],
    onWindowLoad: true
});

فراخوانی AMD

Moff.amd.include('grid');

یا به صورت زیر خواهد بود :

<!-- listing.html is a view of your grid module -->
<a href="listing.html" data-load-target="#content-target" 
data-load-module="grid">Show grid</a>
<div id="content-target"></div>

فرم صفحه Html که از روش Moff.js برای افزودن bootstrap استفاده می کند به صورت زیر است :

<link rel="stylesheet" 
href="bower_components/moff/dist/bootstrap/main/core.css">
<link rel="stylesheet" 
href="bower_components/moff/dist/bootstrap/main/grid.css">
<link rel="stylesheet" 
href="bower_components/moff/dist/bootstrap/main/typography.css">

آموزش بوت استرپ