Moff.js and Modulated Bootstrap

In the previous article, I wrote about how the Moff.js framework can facilitate the creation of a Mobile First page without using the CSS framework.

However, currently the majority of projects use various types of CSS frameworks, one of which is Bootstrap. We can say with confidence that Bootstrap is the most popular Mobile First framework.

The biggest disadvantage of this framework is its size. Even a minimized version is 154.9 KB, and that is only the size of CSS and JS files.

Often developers only need some of the functionality, but they connect the entire framework. Therefore, mobile device users have to download a larger volume of needless traffic. The solution to this problem was the division of the framework into groups of modules that are seldom or often used, and that are easy to use within the Mobile First approach. Each of these groups was delineated as individual modules in Moff.

The modules are divided into three categories:

• Main
• Components
• JavaScripts

The following modules are in the Main category:

• 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 

The Components category contains all Bootstrap components:

Alerts, Badges, Breadcrumbs, Button groups, Dropdown, etc.

The JavaScript category contains all Bootstrap JS modules:

Affix, Alert, Button, Carousel, etc.

You can read the detailed list of modules on Moff page.

Ways of Using Modules

Core Module is fundamental, and is connected to all pages as the main dependency for all other modules.

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

It consists of the following Bootstrap Sass modules.

@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';

The rest of the modules can be loaded in two ways.

AMD (Asynchronous module definition)

A module can be added using AMD.

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
});

When registering the module, it needs to be downloaded in order to start using it. It can be downloaded using two ways:

Using AMD:

Moff.amd.include('grid');

or using Data Events:

<!-- 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

<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">

Both approaches have a disadvantage. It is the large amount of time spent at the HTTP connection due to the great number of files. However, this problem only applies to the first download, after that the files are loaded from cache. File merging can be a solution. Currently, this can be done manually, but in the future a CLI for Moff will be created, that can solve such issues.

P.S. The modular version of Bootstrap in Moff helps download only the required framework parts to lighten up the page size.

Origin resource: Moff.js and modulated Bootstrap