Moff.js и модулированный Bootstrap

В предыдущей статье я писал о том, как фреймворк Moff.js может облегчить создание Mobile First страницы без использования CSS фреймворка.

Но на сегодняшний день большенство проектов используют какие либо CSS фреймворки и одним из таких фреймворков является Bootstrap. Смело можно утверждать, что Bootstrap является самым популярным Mobile First фреймворком.

Cамым большим недостатоком это фреймворка является его размер. Даже минифицированная версия весит 154.9KB и это только CSS и JS файлы.

Зачастую разработчикам нужна только часть функционала, но подключают они весь фреймворк целиком. И поэтому пользователям мобильных устройств приходится загружать большой объем лишнего трафика. Решением этой проблемы было разделение фреймворка на группы из часто и не часто используемых модулей, которые удобно использовать в Mobile First подходе. Каждая из этих групп была вынесена в виде отдельного модуля в Moff.

Все модули разбиты на три категории:

• Main
• Components
• JavaScripts

В категории Main находятся следующие модули:

• Buttons – Отвечающий за стилизацию кнопок
• Core – Содержащий в себе все базовые стили
• Forms – Отвечающий за формы
• Glyphicons – Стили иконок glyphicons
• Grid – Система сетки
• Tables – Таблицы
• Typography – Типографика

Категория Components содержит все Bootstrap компоненты: Alerts, Badges, Breadcrumbs, Button groups, Dropdown и тд.
Категория JavaScripts содержит все JS модули Bootstrap: Affix, Alert, Button, Carousel и тд.
Подробный список модулей можете прочитать на странице Moff.

Способы использования модулей

Mодуль Core является базовым и подключается на все станицы как основная зависимость для всех остальных модулей.

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

Он состоих из следующих Bootstrap 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: false
});

После регистрации модуля нужно его загрузить, что бы начать использовать. Загрузить его можно двумя способами:

с помощью AMD

Moff.amd.include('grid');

или с использовав 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">

У обоих подходов есть недостаток. Это большое количетво времени на HTTP соединение из-за множества файлов. Но эта проблема первой загрузки, в дальнейшем файлы загрузятся из кэша. Решением может быть объединение файлов. В данный момент это можно сделать вручную, но в дальнейшем планируется создать CLI для Moff, который будет решать подобные задачи.

P.S. Модульная версия Bootstrap в Moff помогает загрузить только необходимые части фреймворка для облегчения объема страницы.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.