BEM DESIGN STUB

Установка

npm i

export PATH=./node_modules/.bin:$PATH

enb make

npm start

Порядок работы с визуалом

1 шаг: блок темы в нужной модификации примиксовывается на верхний уровень бандла;
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 используется для отображения упрощенной версии логотипа, например в истории или формах оплаты (рядом с подписью). Для создания дополнительного акцента, поверхность на который размещается логотип может окрашиваться в цвет близкий основному цвету логотипа.

• Документация
• Репозиторий
• Пакет

bem-components

Это библиотека с открытым кодом, которая предоставляет набор готовых визуальных компонентов (блоков). Содержит контролы форм и другие базовые компоненты для построения интерфейсов.

Паттерны

Все бесконечное многообразие интерфейсных множеств сводится к числу понятных/базовых/фундаментальных конструкций, на основе которых можно получить практически любой визуал.

• Документация
• Репозиторий
• Пакет

Процесс визуализации с использованием паттернов, происходит следующим образом:

К узлам блока примиксовывается подходящий по способу представления паттерн (элементы паттерна) в нужных модификациях. Это помогает сразу получить большую часть визуала.

{
    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!