Елена Глухова, Яндекс
Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года.
Варвара Степанова, Яндекс
Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source.
Тема доклада
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты.
Тезисы
Все сайты немного похожи друг на друга. Если заниматься веб-разработкой долгие годы, накапливаются практики и типовые решения распространённых задач. Результатом наших накоплений становится open source библиотека блоков bem-bl , которую мы разрабатываем на GitHub. Библиотека реализована согласно методологии БЭМ и позволяет использовать блоки, уже имеющие шаблонную, CSS и JS-реализации, для построения web-страницы. Мастер-класс продемонстрирует, как можно использовать готовые блоки из этой библиотеки и как модифицировать их под нужды своего сайта. Для работы с файлами библиотеки используются консольные инструменты bem-tools.
Поисковая технология "Спектр". Андрей Плахов, Яндекс
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова, Яндекс
1. Дом из готовых кирпичей
Библиотека блоков, тюнинг, инструменты
Елена Глухова и Варвара Степанова
Разработчики интерфейсов
YAC, Москва, 19 сентября 2011 года
Wednesday, October 5, 2011
2. clck.ru/L462
шпаргалка к мастер-классу
Дом из готовых кирпичей
Wednesday, October 5, 2011
8. Мы сделаем:
Проект с типовой архитектурой
8
Wednesday, October 5, 2011
9. Мы сделаем:
Проект с типовой архитектурой
Страницу на блоках из библиотеки
9
Wednesday, October 5, 2011
10. Мы сделаем:
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
10
Wednesday, October 5, 2011
11. Мы сделаем:
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
Используем БЭМ-инструменты
11
Wednesday, October 5, 2011
13. Конкретно:
Подключение библиотеки
13
Wednesday, October 5, 2011
14. Конкретно:
Подключение библиотеки
Сборка страницы
14
Wednesday, October 5, 2011
15. Конкретно:
Подключение библиотеки
Сборка страницы
Переопределение уровнем
15
Wednesday, October 5, 2011
16. Конкретно:
Подключение библиотеки
Сборка страницы
Переопределение уровнем
Переопределение в разных технологиях
16
Wednesday, October 5, 2011
17. БЭМ библиотека
Репозиторий
github.com/bem/bem-bl
или clck.ru/Kuu4
Документация
bem.github.com/bem-bl
или clck.ru/Kuuk
17
Wednesday, October 5, 2011
24. Проект на GitHub
clck.ru/LP3d
git://github.com/toivonen/yac2011-bem-bl-in-use.git
> git checkout first
> make branches
24
Wednesday, October 5, 2011
25. Подключение библиотеки
bem-bl
> git clone
git://github.com/bem/bem-bl.git
25
Wednesday, October 5, 2011
26. Создание уровня (папки)
pages
> bem create level --help
> bem create level pages
26
Wednesday, October 5, 2011
27. Создание страницы
pages/index
> bem create block --help
> bem create block index
-l pages
27
Wednesday, October 5, 2011
28. Создание страницы
pages/index
> bem create block index
-l pages -T bemjson.js
28
Wednesday, October 5, 2011
44. Будем создавать:
Уровень переопределения блоков
Свой блок
Модификатор блока
Зависимость блока от другого блока
44
Wednesday, October 5, 2011
45. Создаем уровень переопределения
проекта blocks
> bem create level blocks
-l bem-bl/blocks-common/
.bem/level.js
45
Wednesday, October 5, 2011
46. Создаем блок
> bem create block b-page
-l blocks -T css
46
Wednesday, October 5, 2011
47. Сборка css для index.html
> make
pages/index/index.css -B
— index.css
47
Wednesday, October 5, 2011
48. Сборка любой другой технологии js
> make
pages/index/index.js -B
или
> make
pages/index/index.ie.css -B
48
Wednesday, October 5, 2011
49. Сборка всей страницы
> make
pages/index/index.html -B
— index.html
— index.js
— index.css
— index.ie.css
49
Wednesday, October 5, 2011
50. Ссылки
для “почитать”
Репозиторий библиотеки
github.com/bem/bem-bl или clck.ru/Kuu4
Сайт с документацией
clck.ru/KzG7
Клуб в Ярушке
clubs.ya.ru/bem/ или clck.ru/4Jl3
50
Wednesday, October 5, 2011
51. Варвара Степанова
toivonen@yandex-team.ru
Елена Глухова
lento4ka@yandex-team.ru
Wednesday, October 5, 2011