Moff.js and modulated Bootstrap

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

But today, most projects use any CSS frameworks and one of these frameworks is Bootstrap . It is safe to say that Bootstrap is the most popular Mobile First framework.
')
The biggest drawback of this framework is its size. Even the minified version weighs 154.9KB and these are only CSS and JS files.

Often, developers need only a part of the functionality, but they connect the entire framework as a whole. And therefore, users of mobile devices have to download a large amount of excess traffic. The solution to this problem was the division of the framework into groups of frequently and frequently used modules that are convenient to use in the Mobile First approach. Each of these groups was rendered as a separate module in Moff.

All modules are divided into three categories:

• Main
• Components
• Javascripts

The Main category contains the following modules:

• Buttons - Responsible for styling buttons.
• Core - Containing all the basic styles.
• Forms - Responsible Forms
• Glyphicons - glyphicons icon styles
• Grid - Grid System
• Tables - Tables
• Typography - Typography

The Components category contains all the Bootstrap components: Alerts, Badges, Breadcrumbs, Button groups, Dropdown, and so on.
The JavaScripts category contains all Bootstrap JS modules: Affix, Alert, Button, Carousel, and so on.
A detailed list of modules can be found on the Moff page .

Ways to use modules

The Core module is basic 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 remaining modules can be connected in two ways.

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

After registering the module, you need to load it in order to start using it. You can download it in two ways:

using AMD

 Moff.amd.include('grid'); 

or using Data Events

 <a href="listing.html" data-load-target="#grid-target" data-load-module="grid">Show listing</a> <div id="grid-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 flaw. This is a big amount of time for an HTTP connection due to multiple files. But this problem is the first boot, in the future files will be loaded from the cache. The solution may be to merge files. At the moment, this can be done manually, but in the future we plan to create a CLI for Moff, which will solve such problems.

PS The modular version of Bootstrap in Moff helps to load only the necessary parts of the framework to facilitate the page volume.