В предыдущей статье я писал о том, как фреймворк 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 помогает загрузить только необходимые части фреймворка для облегчения объема страницы.
ссылка на оригинал статьи http://habrahabr.ru/post/271007/
Добавить комментарий