Moff.js and modulated Bootstrap

In a previous article, I wrote about how the Moff.js framework can make it easier to create a Mobile First page without using a CSS framework.

But today, most projects use some kind of 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 just CSS and JS files.

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

All modules are divided into three categories:

• Main
• Components
• Javascripts

In the Main category are the following modules:

• Buttons - Responsible for styling buttons
• Core - Containing all the basic styles
• Forms - Responsible for forms
• Glyphicons - Glyphicons Icon Styles
• Grid - Grid System
• Tables - Tables
• Typography - Typography

The Components category contains all Bootstrap components: Alerts, Badges, Breadcrumbs, Button groups, Dropdown, etc.
The JavaScripts category contains all the Bootstrap JS modules: Affix, Alert, Button, Carousel, etc.
You can read the detailed list of modules 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.

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 download it in order to start using it. There are two ways to download it:

using AMD

Moff.amd.include('grid');

or using Data Events

Show listing

HTML

Both approaches have a drawback. This is a large amount of time for an HTTP connection due to the many files. But this problem is the first download, in the future the files will be downloaded from the cache. The solution may be to merge files. At the moment, this can be done manually, but in the future it is planned to create a CLI for Moff, which will solve similar problems.

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