Yet another Conference, Москва, 19 сентября 2011 года

Разработчик интерфейсовВладимир Гриненко

Тема для WordPress в БЭМ

БЭМ!

2

Клуб

http://clubs.ya.ru/bem/

Репозиторий

https://github.com/bem/

BEM – это не только b-

3

Yet another WordPress themeЧто мы будем делать

— Описание страницы в формате bemjson

4

Yet another WordPress themeЧто мы будем делать

— Описание страницы в формате bemjson

— Блоки в технологиях php, css, js

5

Yet another WordPress themeЧто мы будем делать

— Описание страницы в формате bemjson

— Блоки в технологиях php, css, js

— Сборка блоков с помощью BEM tools

6

Yet another WordPress themeЧто мы будем делать

— Описание страницы в формате bemjson

— Блоки в технологиях php, css, js

— Сборка блоков с помощью BEM tools

— Разворачивание css-импортов утилитой borschik

7

Yet another WordPress themeЧто мы будем делать

— Описание страницы в формате bemjson

— Блоки в технологиях php, css, js

— Сборка блоков с помощью BEM tools

— Разворачивание css-импортов утилитой borschik

— Структурная минимизация с CSSO

8

Yet another WordPress themeЧто мы будем делать

— Описание страницы в формате bemjson

— Блоки в технологиях php, css, js

— Сборка блоков с помощью BEM tools

— Разворачивание css-импортов утилитой borschik

— Структурная минимизация с CSSO

— Минимизация js утилитой uglify-js

9

Ссылки на инструменты

10

Шпаргалка

http://clck.ru/L2Lh

Репозиторий

http://clck.ru/L4lR

Структура проектаbempress/ blocks/ уровень переопределения темы header/ footer/ pages/ уровень переопределения страниц index/ blocks/ single/

11

Структура проектаbempress/ blocks/ уровень переопределения темы header/ технологии блока header.css header.js header.php footer/

12

Структура проектаbempress/ pages/ уровень переопределения страниц index/ blocks/ блоки уровня страниц header/ header.css доопределение технологии блока index.bemjson.js описание страницы

13

Владимир ГриненкоРазработчик интерфейсов

tadatuta@yandex-team.ru