SlideShare a Scribd company logo

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

•
•
Varya Stepanova
Varya Stepanova

Слайды мастер-класса "Тема для WordPress в БЭМ" на YAC2011. Владимир Гриненко.

Spiritual
1 of 14
Download to read offline
Тема для WordPress в БЭМ Владимир Гриненко Разработчик интерфейсов Yet another Conference, Москва, 19 сентября 2011 года
БЭМ! Клуб http://clubs.ya.ru/bem/ Репозиторий https://github.com/bem/ 2
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
Ссылки на инструменты Шпаргалка http://clck.ru/L2Lh Репозиторий http://clck.ru/L4lR 10
Структура проекта 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

Recommended

BEM — block, element, modification conception
BEM — block, element, modification conceptionBEM — block, element, modification conception
BEM — block, element, modification conceptionVadim Patsev
 
Beminar js
Beminar jsBeminar js
Beminar jsYandex
 
Вебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проектаВебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проекта
Yandex
 
bem-components — от методологии до full stack платформы
bem-components — от методологии до full stack платформыbem-components — от методологии до full stack платформы
bem-components — от методологии до full stack платформы
Yandex
 
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницуВебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Yandex
 
Преимущества компонентной разработки для тестирования интерфейсов
Преимущества компонентной разработки для тестирования интерфейсовПреимущества компонентной разработки для тестирования интерфейсов
Преимущества компонентной разработки для тестирования интерфейсов
Yandex
 
Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"
Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"
Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"
Yandex
 
Библиотека bem-components
Библиотека bem-componentsБиблиотека bem-components
Библиотека bem-components
Yandex
 

Recommended

BEM — block, element, modification conception
BEM — block, element, modification conceptionBEM — block, element, modification conception
BEM — block, element, modification conceptionVadim Patsev
 
Beminar js
Beminar jsBeminar js
Beminar jsYandex
 
Вебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проектаВебинар по БЭМ: сборка и оптимизация проекта
Вебинар по БЭМ: сборка и оптимизация проекта
Yandex
 
bem-components — от методологии до full stack платформы
bem-components — от методологии до full stack платформыbem-components — от методологии до full stack платформы
bem-components — от методологии до full stack платформы
Yandex
 
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницуВебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Yandex
 
Преимущества компонентной разработки для тестирования интерфейсов
Преимущества компонентной разработки для тестирования интерфейсовПреимущества компонентной разработки для тестирования интерфейсов
Преимущества компонентной разработки для тестирования интерфейсов
Yandex
 
Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"
Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"
Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"
Yandex
 
Библиотека bem-components
Библиотека bem-componentsБиблиотека bem-components
Библиотека bem-components
Yandex
 
оформление текста Css (1) (1)
оформление текста Css (1) (1)оформление текста Css (1) (1)
оформление текста Css (1) (1)
Victor Salimgareev
 
От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовОт БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектов
CodeFest
 
BEM и BEViS. Разработка интерфейсов в большом городе
BEM и BEViS. Разработка интерфейсов в большом городеBEM и BEViS. Разработка интерфейсов в большом городе
BEM и BEViS. Разработка интерфейсов в большом городеBenjamin Tambourine
 
модуль 1
модуль 1модуль 1
модуль 1Евгений Решетников
 
Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)my1site
 
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcСергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Yandex
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
Alex Yaroshevich
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
Alexander Baumgertner
 
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Yandex
 
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Yandex
 
Презентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail TroshevПрезентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail Troshev
1 1
 
ошибки при аудите
ошибки при аудитеошибки при аудите
ошибки при аудитеВеб-толк - создание сайтов
 
тпцми пр№ 10 создание сайта
тпцми пр№ 10 создание сайтатпцми пр№ 10 создание сайта
тпцми пр№ 10 создание сайтаannuta123
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаДмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Yandex
 
Доклад на DrupalCafe Minsk
Доклад на DrupalCafe MinskДоклад на DrupalCafe Minsk
Доклад на DrupalCafe Minsk
Алексей Колосов
 
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
Ivan Voischev
 
Как бесплатно создать сайт за 5 мин?
Как бесплатно создать сайт за 5 мин?Как бесплатно создать сайт за 5 мин?
Как бесплатно создать сайт за 5 мин?
Yevgen Nasadyuk
 
Оживление сайтов
Оживление сайтовОживление сайтов
Оживление сайтовMageCloud
 
Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)
Oleksii Prohonnyi
 
Case study presentation
Case study presentationCase study presentation
Case study presentation
Manon7
 
Podstawy projektowania do Internetu - zdjęcia
Podstawy projektowania do Internetu - zdjęciaPodstawy projektowania do Internetu - zdjęcia
Podstawy projektowania do Internetu - zdjęciaTrzecia Pracownia Wzornictwa
 
Ko'galo After Party
Ko'galo After PartyKo'galo After Party
Ko'galo After PartySupremacy enterprises
 

More Related Content

What's hot

оформление текста Css (1) (1)
оформление текста Css (1) (1)оформление текста Css (1) (1)
оформление текста Css (1) (1)
Victor Salimgareev
 
От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовОт БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектов
CodeFest
 
BEM и BEViS. Разработка интерфейсов в большом городе
BEM и BEViS. Разработка интерфейсов в большом городеBEM и BEViS. Разработка интерфейсов в большом городе
BEM и BEViS. Разработка интерфейсов в большом городеBenjamin Tambourine
 
Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)my1site
 
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcСергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Yandex
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
Alex Yaroshevich
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
Alexander Baumgertner
 
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Yandex
 
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Yandex
 
Презентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail TroshevПрезентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail Troshev
1 1
 
тпцми пр№ 10 создание сайта
тпцми пр№ 10 создание сайтатпцми пр№ 10 создание сайта
тпцми пр№ 10 создание сайтаannuta123
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаДмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Yandex
 
Доклад на DrupalCafe Minsk
Доклад на DrupalCafe MinskДоклад на DrupalCafe Minsk
Доклад на DrupalCafe Minsk
Алексей Колосов
 
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
Ivan Voischev
 
Как бесплатно создать сайт за 5 мин?
Как бесплатно создать сайт за 5 мин?Как бесплатно создать сайт за 5 мин?
Как бесплатно создать сайт за 5 мин?
Yevgen Nasadyuk
 
Оживление сайтов
Оживление сайтовОживление сайтов
Оживление сайтовMageCloud
 
Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)
Oleksii Prohonnyi
 

What's hot (19)

оформление текста Css (1) (1)
оформление текста Css (1) (1)оформление текста Css (1) (1)
оформление текста Css (1) (1)
 
От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовОт БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектов
 
BEM и BEViS. Разработка интерфейсов в большом городе
BEM и BEViS. Разработка интерфейсов в большом городеBEM и BEViS. Разработка интерфейсов в большом городе
BEM и BEViS. Разработка интерфейсов в большом городе
 
модуль 1
модуль 1модуль 1
модуль 1
 
Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)
 
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcСергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
 
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"
 
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
 
Презентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail TroshevПрезентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail Troshev
 
ошибки при аудите
ошибки при аудитеошибки при аудите
ошибки при аудите
 
тпцми пр№ 10 создание сайта
тпцми пр№ 10 создание сайтатпцми пр№ 10 создание сайта
тпцми пр№ 10 создание сайта
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаДмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
 
Доклад на DrupalCafe Minsk
Доклад на DrupalCafe MinskДоклад на DrupalCafe Minsk
Доклад на DrupalCafe Minsk
 
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
 
Как бесплатно создать сайт за 5 мин?
Как бесплатно создать сайт за 5 мин?Как бесплатно создать сайт за 5 мин?
Как бесплатно создать сайт за 5 мин?
 
Оживление сайтов
Оживление сайтовОживление сайтов
Оживление сайтов
 
Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)
 

Viewers also liked

Case study presentation
Case study presentationCase study presentation
Case study presentation
Manon7
 
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
Varya Stepanova
 
Session 2 - Q&A
Session 2 - Q&ASession 2 - Q&A
Session 2 - Q&A
The Digital Insurer
 
Introduction of Agent Based Modeling (ABM) for Customer Behavior Model
Introduction of Agent Based Modeling (ABM) for Customer Behavior Model Introduction of Agent Based Modeling (ABM) for Customer Behavior Model
Introduction of Agent Based Modeling (ABM) for Customer Behavior Model
yudiyasik
 
Integral
IntegralIntegral
Integral
Alv Awg
 
Магический квадрат
Магический квадратМагический квадрат
Магический квадратKseniya_Nenartovich
 
ФОРУМ ПРОФЕССИОНАЛОВ
ФОРУМ ПРОФЕССИОНАЛОВ ФОРУМ ПРОФЕССИОНАЛОВ
ФОРУМ ПРОФЕССИОНАЛОВ
Asti Group Exhibition Company
 
Pikachu Productions - A2 Media Pitch
Pikachu Productions - A2 Media PitchPikachu Productions - A2 Media Pitch
Pikachu Productions - A2 Media Pitch
likeitsthefirsttime
 
Lessons for Africa’s Integration inspired by the EU Integration
Lessons for Africa’s Integration inspired by the EU IntegrationLessons for Africa’s Integration inspired by the EU Integration
Lessons for Africa’s Integration inspired by the EU Integration
Gaia Manco
 
Info sec foss-mandate-migration-sep-2013-b-
Info sec foss-mandate-migration-sep-2013-b-Info sec foss-mandate-migration-sep-2013-b-
Info sec foss-mandate-migration-sep-2013-b-
nghia le trung
 
Com estructurar un projecte web (ca)
Com estructurar un projecte web (ca)Com estructurar un projecte web (ca)
Com estructurar un projecte web (ca)
Carlos Campderrós
 
Lord of Ages
Lord of AgesLord of Ages
Lord of Ages
Jessica_Dai
 
Wijkkrant MiddenDoor_2016#1_lr
Wijkkrant MiddenDoor_2016#1_lrWijkkrant MiddenDoor_2016#1_lr
Wijkkrant MiddenDoor_2016#1_lrMugmedia
 
Collaborate Bristol
Collaborate BristolCollaborate Bristol
Collaborate Bristol
David Peter Simon
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
Varya Stepanova
 
Magpie InsurTech Award Presentation
Magpie InsurTech Award PresentationMagpie InsurTech Award Presentation
Magpie InsurTech Award Presentation
The Digital Insurer
 
Getting started with_microsoft_excel
Getting started with_microsoft_excelGetting started with_microsoft_excel
Getting started with_microsoft_excel
Pratiksha Mhatre
 
Integral
IntegralIntegral
IntegralAlv Awg
 

Viewers also liked (20)

Case study presentation
Case study presentationCase study presentation
Case study presentation
 
Podstawy projektowania do Internetu - zdjęcia
Podstawy projektowania do Internetu - zdjęciaPodstawy projektowania do Internetu - zdjęcia
Podstawy projektowania do Internetu - zdjęcia
 
Ko'galo After Party
Ko'galo After PartyKo'galo After Party
Ko'galo After Party
 
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
 
Session 2 - Q&A
Session 2 - Q&ASession 2 - Q&A
Session 2 - Q&A
 
Introduction of Agent Based Modeling (ABM) for Customer Behavior Model
Introduction of Agent Based Modeling (ABM) for Customer Behavior Model Introduction of Agent Based Modeling (ABM) for Customer Behavior Model
Introduction of Agent Based Modeling (ABM) for Customer Behavior Model
 
Integral
IntegralIntegral
Integral
 
Магический квадрат
Магический квадратМагический квадрат
Магический квадрат
 
ФОРУМ ПРОФЕССИОНАЛОВ
ФОРУМ ПРОФЕССИОНАЛОВ ФОРУМ ПРОФЕССИОНАЛОВ
ФОРУМ ПРОФЕССИОНАЛОВ
 
Pikachu Productions - A2 Media Pitch
Pikachu Productions - A2 Media PitchPikachu Productions - A2 Media Pitch
Pikachu Productions - A2 Media Pitch
 
Lessons for Africa’s Integration inspired by the EU Integration
Lessons for Africa’s Integration inspired by the EU IntegrationLessons for Africa’s Integration inspired by the EU Integration
Lessons for Africa’s Integration inspired by the EU Integration
 
Info sec foss-mandate-migration-sep-2013-b-
Info sec foss-mandate-migration-sep-2013-b-Info sec foss-mandate-migration-sep-2013-b-
Info sec foss-mandate-migration-sep-2013-b-
 
Com estructurar un projecte web (ca)
Com estructurar un projecte web (ca)Com estructurar un projecte web (ca)
Com estructurar un projecte web (ca)
 
Lord of Ages
Lord of AgesLord of Ages
Lord of Ages
 
Wijkkrant MiddenDoor_2016#1_lr
Wijkkrant MiddenDoor_2016#1_lrWijkkrant MiddenDoor_2016#1_lr
Wijkkrant MiddenDoor_2016#1_lr
 
Collaborate Bristol
Collaborate BristolCollaborate Bristol
Collaborate Bristol
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
 
Magpie InsurTech Award Presentation
Magpie InsurTech Award PresentationMagpie InsurTech Award Presentation
Magpie InsurTech Award Presentation
 
Getting started with_microsoft_excel
Getting started with_microsoft_excelGetting started with_microsoft_excel
Getting started with_microsoft_excel
 
Integral
IntegralIntegral
Integral
 

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

Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"Yandex
 
Сайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологийСайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологий
Yandex
 
Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0
Yandex
 
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Yandex
 
Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"
Yandex
 
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Yandex
 
Сергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-nodeСергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-node
Yandex
 
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Yandex
 
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Yandex
 
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндексbem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
Yandex
 
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Yandex
 
Trening modul2-conf3-tema5
Trening modul2-conf3-tema5Trening modul2-conf3-tema5
Trening modul2-conf3-tema5
olgaoov
 
БЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир ГриненкоБЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир Гриненко
Yandex
 
Osvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinOsvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinyaevents
 
Владимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизыВладимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизы
Yandex
 
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Yandex
 
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Yandex
 
БЭМ в дикой природе
БЭМ в дикой природеБЭМ в дикой природе
БЭМ в дикой природе
Ihor Zenich
 

Similar to Тема для WordPress в БЭМ (20)

Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"
 
Сайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологийСайт с нуля на полном стеке БЭМ-технологий
Сайт с нуля на полном стеке БЭМ-технологий
 
Yac2012
Yac2012Yac2012
Yac2012
 
БЭМ
БЭМБЭМ
БЭМ
 
Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0
 
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
 
Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"Виталий Харисов "Настоящее и будущее БЭМ"
Виталий Харисов "Настоящее и будущее БЭМ"
 
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
 
Сергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-nodeСергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-node
 
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
 
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
 
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндексbem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
 
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
 
Trening modul2-conf3-tema5
Trening modul2-conf3-tema5Trening modul2-conf3-tema5
Trening modul2-conf3-tema5
 
БЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир ГриненкоБЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир Гриненко
 
Osvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinOsvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshin
 
Владимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизыВладимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизы
 
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
 
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
 
БЭМ в дикой природе
БЭМ в дикой природеБЭМ в дикой природе
БЭМ в дикой природе
 

More from Varya Stepanova

Design systems on the web
Design systems on the webDesign systems on the web
Design systems on the web
Varya Stepanova
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide Generator
Varya Stepanova
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
 
The Thinking behind BEM
The Thinking behind BEMThe Thinking behind BEM
The Thinking behind BEM
Varya Stepanova
 
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEMMaintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
Varya Stepanova
 
BEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend devBEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend dev
Varya Stepanova
 
Шаблонизатор BEMHTML
Шаблонизатор BEMHTMLШаблонизатор BEMHTML
Шаблонизатор BEMHTML
Varya Stepanova
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
Varya Stepanova
 
JavaScript в БЭМ терминах
JavaScript в БЭМ терминахJavaScript в БЭМ терминах
JavaScript в БЭМ терминах
Varya Stepanova
 

More from Varya Stepanova (10)

Design systems on the web
Design systems on the webDesign systems on the web
Design systems on the web
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide Generator
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
 
The Thinking behind BEM
The Thinking behind BEMThe Thinking behind BEM
The Thinking behind BEM
 
Modular development
Modular developmentModular development
Modular development
 
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEMMaintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
 
BEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend devBEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend dev
 
Шаблонизатор BEMHTML
Шаблонизатор BEMHTMLШаблонизатор BEMHTML
Шаблонизатор BEMHTML
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
 
JavaScript в БЭМ терминах
JavaScript в БЭМ терминахJavaScript в БЭМ терминах
JavaScript в БЭМ терминах
 

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

  • 1. Тема для WordPress в БЭМ Владимир Гриненко Разработчик интерфейсов Yet another Conference, Москва, 19 сентября 2011 года
  • 3. BEM – это не только b- 3
  • 4. Что мы будем делать Yet another WordPress theme — Описание страницы в формате bemjson 4
  • 5. Что мы будем делать Yet another WordPress theme — Описание страницы в формате bemjson — Блоки в технологиях php, css, js 5
  • 6. Что мы будем делать Yet another WordPress theme — Описание страницы в формате bemjson — Блоки в технологиях php, css, js — Сборка блоков с помощью BEM tools 6
  • 7. Что мы будем делать Yet another WordPress theme — Описание страницы в формате bemjson — Блоки в технологиях php, css, js — Сборка блоков с помощью BEM tools — Разворачивание css-импортов утилитой borschik 7
  • 8. Что мы будем делать Yet another WordPress theme — Описание страницы в формате bemjson — Блоки в технологиях php, css, js — Сборка блоков с помощью BEM tools — Разворачивание css-импортов утилитой borschik — Структурная минимизация с CSSO 8
  • 9. Что мы будем делать 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 10
  • 11. Структура проекта bempress/ blocks/ уровень переопределения темы header/ footer/ pages/ уровень переопределения страниц index/ blocks/ single/ 11
  • 12. Структура проекта bempress/ blocks/ уровень переопределения темы header/ технологии блока header.css header.js header.php footer/ 12
  • 13. Структура проекта bempress/ pages/ уровень переопределения страниц index/ blocks/ блоки уровня страниц header/ header.css доопределение технологии блока index.bemjson.js описание страницы 13