bem components
v5.1.1
bem-components -это библиотека с открытым исходным кодом, которая предоставляет набор готовых визуальных компонентов (блоков) для создания веб-интерфейсов.
Библиотека предоставляет темы дизайна. Эта версия представляет тему islands , которая реализует новый дизайн Yandex. Особенности включают в себя поддержку нескольких тем одновременно и создание новых тем.
Дополнительная информация
common.blocks - поддержка любых устройств и браузеров.desktop.blocks - поддержка настольных браузеров.touch.blocks - реализация конкретных функций для сенсорных платформ.touch-phone.blocks -реализация конкретных функций для смартфонов.touch-pad.blocks -реализация конкретных функций для планшетов.design/<common|desktop|touch|touch-phone|touch-pad>.blocks -реализация различных дизайнов (темы). Настольный компьютер
Трогать
Чтобы поддержать Internet Explorer 8, вы должны добавить:
*.ie.styl на страницу. Для этого укажите их в конфигурации сборки (см. Этот пример) и добавьте комментарии в разделе page (см. Этот пример). Вы также можете включить стили для Internet Explorer 8 на уровне шаблона. Собрание
Оптимизаторы
Анализ кода
Другой
Есть несколько способов начать использование bem-components . Лучший подход зависит от требований вашего проекта и его совместимости с технологиями и инструментами библиотеки, а также от вашего опыта работы с проектами BEM.
Выберите наиболее подходящий метод для вашего проекта:
| Расстояние | Источник | Составлено |
|---|---|---|
| Предварительно собранные CSS и JavaScript Code и библиотечные шаблоны. Интегрировано путем ссылки на страницу. Не требует сборки или совместимости с вашим проектом. | Полный исходный код библиотеки. Требуется сборка. Ваш проект должен быть полностью совместим с технологиями и инструментами библиотеки. | Полный исходный код библиотеки. Требуется сборка. Отличается от метода источника в этом PostCSS, скомпилируется в CSS. Подходит для проектов, где PostCSS не используется. |
То, как вы используете библиотеку, определяет, как интегрировать ее в свой проект:
Мы рекомендуем использовать ENB или BEM-Tools для интеграции библиотеки.
В качестве примера вы можете использовать Project-Stub, где библиотека включена по умолчанию. Вы также можете создать проект и использовать генератор YO для подключения библиотеки (это позволяет создавать необходимую конфигурацию проекта).
Самый простой способ подключить библиотеку к проекту-загрузить предварительно собранные библиотечные файлы и использовать элементы <link> и <script> для добавления их на HTML-страницы. Есть несколько способов сделать это:
Информацию о том, как использовать подключенные файлы библиотеки, см. Работа с библиотекой.
Структура предварительно собранной библиотеки
Существуют отдельные наборы файлов для трех платформ:
Каждый набор включает в себя:
bem-components.css -стили;bem-components.ie.css -стили для IE8 (больше информации);bem-components.js -javascript;bem-components.bemhtml.js -шаблоны Bemhtml;bem-components.bh.js -шаблоны BH;bem-components.js+bemhtml.js -объединяет код JavaScript и шаблоны Bemhtml для использования шаблонов в браузере;bem-components.js+bh.js -объединяет код JavaScript и шаблоны BH для использования шаблонов в браузере;bem-components.no-autoinit.js -javascript без автоматической инициализации. Используйте его, если вам нужно написать свой собственный код в i-bem.js ;bem-components.no-autoinit.js+bemhtml.js ;bem-components.no-autoinit.js+bh.js .Каждый набор также включает в себя версии разработки одних и тех же файлов (сохранение исходного форматирования и комментариев).
Самый быстрый и самый простой способ подключить библиотеку к проекту - добавить элементы <link> и <script> на HTML -страницы:
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js " > </ script > Шаблон для подключения файла из cdn: //yastatic.net/library-name/version/platform/file-name .
Пример: //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bemhtml.js .
Выберите соответствующую версию библиотеки и загрузите архив. Разанизируйте это. Добавьте файлы на страницу, используя <link> и <script> Elements:
< link rel =" stylesheet " href =" desktop/bem-components.css " >
< script src =" desktop/bem-components.js+bemhtml.js " > </ script > Код библиотеки находится на GitHub: https://github.com/bem/bem-components.
Чтобы запустить сборку, используйте эти команды:
# Clone the library source code
git clone https://github.com/bem/bem-components.git
# Switch to the library folder
cd bem-components
# Install the required dependencies
npm install
# Build Dist
npm run dist
В результате сборки файлы будут доступны в папке bem-components-dist . Подключите файлы в HTML на странице:
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > При условии, что Bower уже находится в вашем проекте, запустите следующую команду:
bower i bem/bem-components-dist
В результате сборки файлы будут доступны в папке bem-components-dist . Подключите файлы так же, как и для предыдущего метода:
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > Есть два шага к работе с библиотекой:
Первый шаг всегда одинаковый. Второй шаг может быть выполнен тремя различными способами, которые вы можете объединить по своему желанию:
Метод 1. Скопируйте HTML из примера. Для этого перейдите на вкладку HTML в заголовке примера.
Это самый простой подход, но если шаблоны будут обновлены в будущих версиях библиотеки, вам придется внести изменения вручную в каждом обновленном блоке.
Метод 2. Используйте шаблон в браузере. Сборка библиотеки Dist включает в себя предварительно собранные шаблоны BEMHTML и BH на выбор.
Для этого скопируйте образец кода Bemjson из документации и вставьте его в HTML -код страницы. Используйте вкладку BEMJSON в заголовке примера.
HTML -код страницы будет выглядеть следующим образом:
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " >
< title > bem-components as a library </ title >
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
</ head >
< body class =" page page_theme_islands " >
< form class =" form " action =" / " > </ form >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js+bemhtml.js " > </ script >
< script >
modules . require ( [ 'i-bem__dom' , 'BEMHTML' , 'jquery' , 'i-bem__dom_init' ] , function ( BEMDOM , BEMHTML , $ , init ) {
var html = BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ;
BEMDOM . append ( $ ( '.form' ) , html ) ;
// NOTE: explicitly call `init();` if you need to initialize blocks from HTML markup
} ) ;
</ script >
</ body >
</ html >В отличие от первого метода, этот код не потребует каких -либо изменений в разметке, когда библиотека обновляется до новой версии. Тем не менее, сгенерированная клиентом разметка может также не индексировать поисковые системы.
Метод 3 . Выполнить {BEMHTML,BH}.apply() в node.js и дайте браузеру подготовленный HTML:
var BEMHTML = require ( './dist/desktop/bem-components.bemhtml.js' ) . BEMHTML ;
BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ; // returns HTML line Библиотека состоит из блоков, которые вы можете увидеть, представленные визуально в выставке bem-components . Блоки имеют состояния, которые определяют поведенческую модель. Состояние блока выражается через модификаторы и специализированные поля. Изменение модификатора создает событие, которое можно использовать для работы с блоком.
Нет необходимости создавать специальное событие BEM, если вы можете работать с событием изменения модификатора. В зависимости от того, что используется для изменения состояния компонента (модификатор или поле), используются разные события:
value , используется событие change .bem-components Элементы управления в bem-components могут использоваться в качестве основы для создания других библиотечных компонентов. Такие элементы управления не имеют моделей, как в HTML, и их можно использовать для задач, которые не требуют семантики определенной модели HTML.
Например, подумайте о «поведенческой модели» для HTMlinPutelement, который представляет собой интерфейс более высокого уровня, разработанный специально для редактирования данных. Что отличается от блоков bem-components так это то, что их можно использовать в качестве основы блока в другой библиотеке, которая решит ту же проблему. Но наряду с этим, они могут служить другим целям в интерфейсе, которые не требуют семантики HTML input .
focused модификатор Управление в BEM-компонентах имеют два типа фокуса, которые устанавливаются с использованием модификаторов focused и focused-hard . Тип фокуса определяет внешний вид управления.
Модификатор выбирается автоматически на основе того, как установлен фокус:
focused - установите для мыши нажмите на управление.focused-hard -установлен, когда элемент управления выбирается с использованием клавиатуры или через JavaScript. Он выделяет компонент более очевидно, когда он получает фокус. Например, в теме Islands большинство элементов управления получают дополнительную границу, когда устанавливается focused-hard . Получите источники:
$ git clone git://github.com/bem/bem-components.git
$ cd bem-componentsУстановить зависимости (инструментов):
$ npm install Чтобы затем запустить локально установленные инструменты, используйте export PATH=./node_modules/.bin:$PATH или любой альтернативный метод.
Установить зависимые библиотеки:
$ bower installСоздайте примеры и тесты:
$ npm run build-allЗапустите сервер разработки:
$ npm start
$ open http://localhost:8080/ПРИМЕЧАНИЕ. Для получения информации о сборке отдельных блоков см. В разделе тесты для шаблонов.
Анализ кода:
$ npm run lint Команда npm run test-specs запускает модульные тесты на JS.
Чтобы запустить точечную сборку, используйте команду enb make specs desktop.specs/<block-name> (например, enb make specs desktop.specs/input ).
Тесты будут выполняться автоматически на Трэвисе для каждого запроса на вытяжение.
Гермиона используется для тестирования макета.
Тесты для каждого блока хранятся в отдельном файле block-name.hermione.js в каталоге hermione/ . Локально тест выполняется вручную. На Трэвисе тесты выполняются автоматически. Для селена сетки используется сервис Saucelabs.
Для выполнения тестов локально вам нужно:
SAUCE_USERNAME и SAUCE_ACCESS_KEY ).sc (SauceConnect) и дождитесь открытия туннеля.hermione .hermione gui .При разработке новых тестов для ускорения локального исполнения:
.hermione.conf.js измените опцию gridUrl на http://localhost:4444/ . Для получения дополнительной информации об использовании Hermione с различными бэкэндами прочитайте статью Hermion Quick Start.
Примечание: вам нужно сохранить скриншоты от Saucelabs в репозитории. Это помогает избежать расхождений при рендеринге шрифтов.
Перед тем, как выступить с новыми или модифицированными справочными изображениями, вы должны:
Инструменты сборки для библиотеки позволяют создавать и запускать тесты на шаблонах блоков BEMHTML и BH.
Добавить тест на блок
[block name].tmpl-specs в каталоге блока на необходимом уровне. Тестовые файлы будут храниться в этом каталоге.Несколько тестов могут быть записаны для блока, и, соответственно, каждый тест состоит из двух файлов (Bemjson и HTML) с одинаковым именем.
desktop.blocks
└── myblocks
├── myblock.bemhtml.js
├── myblock.bh.js
├── ...
└── myblock.tmpl-specs
├── 10-default.bemjson.js
├── 10-default.html
├── 20-advanced.bemjson.js
└── 20-advanced.html
Чтобы создать и запустить тесты, используйте:
magic run tmpl-specsЧтобы создать тесты на требуемом уровне определения, используйте:
magic make desktop.tmpl-specsЧтобы создать тесты только для определенного блока, используйте:
magic make desktop.tmpl-specs/buttonЕсли процедура сборки успешна, тесты выполняются автоматически, и вы увидите все результаты теста. Если результат применения шаблона не совпадает с образцом блока в HTML, вы увидите ошибку в журнале, указывающая, как он отличается от выборки блока.
Все тесты выполняются автоматически с использованием Travis по каждому запросу на вытяжение.
Текущие задачи перечислены на специальной гибкой доске.
Статусы задачи:
Код и документация © 2012 Yandex LLC. Код, выпущенный в соответствии с общественной лицензией Mozilla 2.0.
