Modulated Twitter Bootstrap

Twitter Bootstrap is most popular mobile first CSS framework. Many developers use Bootstrap to markup their websites. But this framework is very heavy (119 KB minified version) and usually they don't use all its components. That is why Moff offers modulated Bootstrap. It is logically separated parts of the framework which allows you to control loading only components you are really use.

Modules are divided on three parts: Main, Components and JavaScripts. Main part consists from normalize, print and other utilities. See detailed list. And you can include core module by default in all pages, because it makes Bootstrap framework core.

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

For example if you have Bootstrap grid on the only page of your website, you don't need to load grid styles beforehand. Now you can load it only in that page.

<link rel="stylesheet" href="bower_component/moff/dist/bootstrap/main/grid.css">
<link rel="stylesheet" href="bower_component/moff/dist/bootstrap/components/pagination.css">

Also you can use Bootstrap modules with AMD mechanism by loading as dependency.

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

And include it on any callback.

function loadGrid() {
	Moff.amd.include('grid');
}

Or with 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>

Main

Buttons

Module file

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

Constituents of Buttons

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups';

Core

Module file

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

Constituents of Core

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

Forms

Module file

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

Constituents of Forms

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms';

Gplyphicons

Module file

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

Constituents of Gplyphicons

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons';

Grid

Module file

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

Constituents of Grid

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid';

Tables

Module file

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

Constituents of Tables

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables';

Typography

Module file

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

Constituents of Typography

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code';

Components

Alerts

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/alerts.css">

Constituents of Alerts

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts';

Badges

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/badges.css">

Constituents of Badges

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges';

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/breadcrumbs.css">

Constituents of Breadcrumbs

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs';

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/dropdowns.css">

Constituents of Dropdowns

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns';

Input groups

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/input-groups.css">

Constituents of Input groups

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups';

Jumbotron

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/jumbotron.css">

Constituents of Jumbotron

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron';

Labels

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/labels.css">

Constituents of Labels

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels';

List group

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/list-group.css">

Constituents of List group

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group';

Media

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/media.css">

Constituents of Media

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media';

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/navs.css">

Constituents of Navs

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar';

Pagination

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/pagination.css">

Constituents of Pagination

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager';

Panels

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/panels.css">

Constituents of Panels

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels';

Progress bars

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/progress-bars.css">

Constituents of Progress bars

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars';

Thumbnails

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/thumbnails.css">

Constituents of Thumbnails

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails';

Wells

Module file

<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/components/wells.css">

Constituents of Wells

@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells';

JavaScripts

Also you have separated JavaScript files which can be included with components or core.

Affix.js

<script src="bower_components/moff/dist/bootstrap/javascripts/affix.js"></script>

Alert.js

<script src="bower_components/moff/dist/bootstrap/javascripts/alert.js"></script>

Button.js

<script src="bower_components/moff/dist/bootstrap/javascripts/button.js"></script>

<script src="bower_components/moff/dist/bootstrap/javascripts/carousel.js"></script>

Collapse.js

<script src="bower_components/moff/dist/bootstrap/javascripts/collapse.js"></script>

<script src="bower_components/moff/dist/bootstrap/javascripts/dropdown.js"></script>

<script src="bower_components/moff/dist/bootstrap/javascripts/modal.js"></script>

Popover.js

<script src="bower_components/moff/dist/bootstrap/javascripts/popover.js"></script>

Scrollspy.js

<script src="bower_components/moff/dist/bootstrap/javascripts/scrollspy.js"></script>

Tab.js

<script src="bower_components/moff/dist/bootstrap/javascripts/tab.js"></script>

Tooltip.js

<script src="bower_components/moff/dist/bootstrap/javascripts/tooltip.js"></script>

Transition.js

<script src="bower_components/moff/dist/bootstrap/javascripts/transition.js"></script>