npm iexport PATH=./node_modules/.bin:$PATHenb makenpm start1 шаг: блок темы в нужной модификации примиксовывается на верхний уровень бандла;
2 шаг: в BEMJSON описывается основная структура блока;
3 шаг: внутрь насыпается содержимое/контент (текст, графика, контролы);
4 шаг: к узлам блока миксуется паттерн (список, форма, карточка, ...);
5 шаг: по необходимости дописываются уникальные стили (к основному блоку);
6 шаг: блок занимает свое место в обвязке (пропорции регулируются модификаторами сетки).
Если уникальные стили начинают повторятся, они выносятся на уровень паттернов.
Все библиотеки делятся на 4 смысловых уровня:
- тема (.theme);
- контент (.text, .icon, .vector, .brand-logo, .button, ...);
- паттерн (.pt-list, .pt-card, .pt-table, .pt-form, .pt-badge, .pt-icon-plus, .pt-avatar);
- обвязка (.tpl-layout, .tpl-grid).
Тема является фундаментом, на котором выстраиваются остальные интерфейсные уровни. Модификации темы можно комбинировать, отдельно указав нужные значения для цветов, отступов и размеров.
mix : {
block : 'theme',
mods : { color : 'default', space : 'default', size : 'default' }
}Переменных не приклеиваются к конкретным значениям, а учитывают интерфейсные состояния блоков и типографики, их вполне хватает для того, чтобы покрыть основные интерфейсные потребности.
Хорошая практика, когда в стилях любого блока ни один цвет, отступ или размер не пишется руками, используются только переменные. Это делает блок по умолчанию кастомным и готовым к дальнейшим изменениям.
Блок .decorator выполняет роль контролируемых (ограниченных) инлайн-стилей, относительно которых еще нет понимания по классификации. Он добавляет «косметику», которая нужна для визуальной «подпорки».
Для легкой манипуляции внешним видом блоков любой текст в интерфейсе выводится в блоке text. Блок text имеет модификаторы для цвета, размера, регистра, жирности, межбуквенного интервала. Их можно использовать в различных комбинациях, это помогает получить все необходимые вариации текста.
Блок text встречается в интерфейсе в двух разных контекстах:
Внутри смысловых интерфейсных блоков. В этом случае к их элементах мы примиксовываем блок text в нужных модификациях. Таким образом мы получаем консистентный типографический визуал не написав ни одной строчки CSS.
{
block: 'offer',
content: [
...
{
elem: 'description',
mix: {
block: 'text',
mods: { size: 'm', view: 'inverse' }
},
content: 'Скидка 15% по промо слову.'
}
]
}Внутри информационных страниц. Здесь text является вполне самостоятельным блоком. У которого добавляется еще один модификатор type c нужным семантическим значение, для него прописаны относительные отступы, они высчитываются с учетом заложенных типографических рекомендаций. Это позволяет более легко считывать информацию, создавая нужную иерархию.
{
block: 'text',
mods: {
size: 'xl',
view: 'primary',
type: 'h2'
},
content: 'Work with declarations'
},Для отображения иконок используется блок icon. Иконки используются в различных частях интерфейса, они могут быть как самостоятельными сущностями или находиться внутри контролов, но чаще всего иконки используется рядом с текстовыми блоками, поэтому имеют такие же цветовые модификации, как и блок text и отрисовываются двух размерах.
Для отображения маркерных иконок используется блок vector. Они не имеют никакого смыслового значения сами по себе, а всего лишь дополнительно поддерживают смысловые блоки.
Для перекрашивания используется сервис Orion, для этого необходимо разложить слои по папкам.
Блок .brand-logo используется для отображения упрощенной версии логотипа, например в истории или формах оплаты (рядом с подписью). Для создания дополнительного акцента, поверхность на который размещается логотип может окрашиваться в цвет близкий основному цвету логотипа.
Это библиотека с открытым кодом, которая предоставляет набор готовых визуальных компонентов (блоков). Содержит контролы форм и другие базовые компоненты для построения интерфейсов.
Все бесконечное многообразие интерфейсных множеств сводится к числу понятных/базовых/фундаментальных конструкций, на основе которых можно получить практически любой визуал.
Процесс визуализации с использованием паттернов, происходит следующим образом:
К узлам блока примиксовывается подходящий по способу представления паттерн (элементы паттерна) в нужных модификациях. Это помогает сразу получить большую часть визуала.
{
block: 'history',
mix: { block: 'pt-list', mods: { view: 'default' } },
content: [
{
block: 'item',
mix: { block: 'pt-list', elem: 'item', elemMods: { 'space-v': 'xl' } },
content: '...'
}
]
},Паттерн .pt-table используется для представления табличной информации во различных пропорциях, имеет модификации для статусов.
Паттерн .pt-list используется для представления вертикально повторяющихся пунктов с любым содержимым.
Паттерн .pt-informer используется для представления блоков информирующих об успехе/ошибке или предупреждающих/информирующих о чем либо.
Паттерн .pt-icon-plus используется для представления связки графической и любой другой информации.
Паттерн .pt-form используется для представления любой информации требующей ввода данных (или выбора настроек) пользователем для дальнейшей отправки.
Паттерн .pt-card используется для отображения любых модификаций карточной информации.
Паттерн .pt-badge используется для отображения статусов.
Паттерн .pt-badge используется для отображения фотографий пользователей и может быть дополнен дополнительными элементами, такими как статус или счетчик.
Шаблоны позволяют занять смысловым сущностям свое место в интерфейсе.
Блок tpl-layout содержит в себе необходимые элементы в различных модификациях для реализации общих обвязок проектов. Элементы обвязки являются каркасом для интеграции основных семантических сущностей, таких как меню, шапка, панель.
{
block: 'tpl-layout',
mods: { col: 'unfold-100' },
content: [
{
elem: 'col',
content: [
/* Раскрытое меню */
]
},
{
elem: 'col',
content: [
{
elem: 'panel',
content: [
/* Панель */
]
},
{
elem: 'heading',
content: [
/* Заголовок с дополнительной информацией */
]
},
{
elem: 'content',
content: [
/* Секции с контентом */
{
elem: 'section',
content: [
/* Любые смысловые блоки */
]
}
]
}
]
}
]
}Блок tpl-grid управляет ритмом и композицией (расположением блоков) внутри секций. Любые настройки пропорции и соотношений блоков между собой совершаются через модификаторы элементов сетки.
{
{
block: 'tpl-grid',
mods: { 'col-gap': 'xxl', 'col-size': '12-45' },
content: [
{
elem: 'fraction',
elemMods: { 'col': '1-7' },
content: [
/* Любой смысловой блок */
]
},
{
elem: 'fraction',
elemMods: { 'col': '7-13' },
content: [
/* Любой смысловой блок */
]
}
]
}
}Stay BEMed!