Дом из готовых кирпичей. Библиотека блоков, тюнинг,...
DESCRIPTION
Елена Глухова, Яндекс Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года. Варвара Степанова, Яндекс Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source. Тема доклада Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Тезисы Все сайты немного похожи друг на друга. Если заниматься веб-разработкой долгие годы, накапливаются практики и типовые решения распространённых задач. Результатом наших накоплений становится open source библиотека блоков bem-bl , которую мы разрабатываем на GitHub. Библиотека реализована согласно методологии БЭМ и позволяет использовать блоки, уже имеющие шаблонную, CSS и JS-реализации, для построения web-страницы. Мастер-класс продемонстрирует, как можно использовать готовые блоки из этой библиотеки и как модифицировать их под нужды своего сайта. Для работы с файлами библиотеки используются консольные инструменты bem-tools.TRANSCRIPT
![Page 1: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/1.jpg)
YAC, Москва, 19 сентября 2011 года
Разработчики интерфейсовЕлена Глухова и Варвара Степанова
Дом из готовых кирпичейБиблиотека блоков, тюнинг, инструменты
Wednesday, October 5, 2011
![Page 2: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/2.jpg)
clck.ru/L462шпаргалка к мастер-классу
Дом из готовых кирпичей
Wednesday, October 5, 2011
![Page 3: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/3.jpg)
Немного теории
3
Wednesday, October 5, 2011
![Page 4: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/4.jpg)
Образец подзаголовка
Картинка про предметную область БЭМ
4
Wednesday, October 5, 2011
![Page 5: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/5.jpg)
Образец текста
Картинка про уровни переопределения
5
Wednesday, October 5, 2011
![Page 6: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/6.jpg)
Про что мастер-класс?
6
Wednesday, October 5, 2011
![Page 7: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/7.jpg)
7
Мы сделаем:
Wednesday, October 5, 2011
![Page 8: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/8.jpg)
8
Проект с типовой архитектурой
Мы сделаем:
Wednesday, October 5, 2011
![Page 9: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/9.jpg)
9
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Мы сделаем:
Wednesday, October 5, 2011
![Page 10: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/10.jpg)
10
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
Мы сделаем:
Wednesday, October 5, 2011
![Page 11: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/11.jpg)
11
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
Используем БЭМ-инструменты
Мы сделаем:
Wednesday, October 5, 2011
![Page 12: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/12.jpg)
12
Конкретно:
Wednesday, October 5, 2011
![Page 13: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/13.jpg)
13
Подключение библиотеки
Конкретно:
Wednesday, October 5, 2011
![Page 14: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/14.jpg)
14
Подключение библиотекиСборка страницы
Конкретно:
Wednesday, October 5, 2011
![Page 15: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/15.jpg)
15
Подключение библиотекиСборка страницыПереопределение уровнем
Конкретно:
Wednesday, October 5, 2011
![Page 16: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/16.jpg)
16
Подключение библиотекиСборка страницыПереопределение уровнемПереопределение в разных технологиях
Конкретно:
Wednesday, October 5, 2011
![Page 17: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/17.jpg)
17
Репозиторий
github.com/bem/bem-bl
или clck.ru/Kuu4
Документация
bem.github.com/bem-bl или clck.ru/Kuuk
БЭМ библиотека
Wednesday, October 5, 2011
![Page 18: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/18.jpg)
Среда разработки
18
Wednesday, October 5, 2011
![Page 19: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/19.jpg)
Инструменты и окружение
19
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
Wednesday, October 5, 2011
![Page 20: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/20.jpg)
Установка bem-tools
20
Node.jsnodejs.org
Пакетный менеджер NPMnpmjs.org
Wednesday, October 5, 2011
![Page 21: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/21.jpg)
Установка БЭМ-инструментов
21
> npm install -g bem ometajs xjst
Wednesday, October 5, 2011
![Page 22: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/22.jpg)
Команды:
22
> bem --help
> bem create
> bem build
Wednesday, October 5, 2011
![Page 23: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/23.jpg)
Новый проект
23
Wednesday, October 5, 2011
![Page 24: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/24.jpg)
Проект на GitHub
24
clck.ru/LP3dgit://github.com/toivonen/yac2011-bem-bl-in-use.git
> git checkout first
> make branches
Wednesday, October 5, 2011
![Page 25: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/25.jpg)
Подключение библиотеки
25
> git clone git://github.com/bem/bem-bl.git
bem-bl
Wednesday, October 5, 2011
![Page 26: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/26.jpg)
Создание уровня (папки)
26
> bem create level --help
> bem create level pages
pages
Wednesday, October 5, 2011
![Page 27: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/27.jpg)
Создание страницы
27
> bem create block --help
> bem create block index -l pages
pages/index
Wednesday, October 5, 2011
![Page 28: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/28.jpg)
Создание страницы
28
> bem create block index -l pages -T bemjson.js
pages/index
Wednesday, October 5, 2011
![Page 29: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/29.jpg)
Настройки уровня
29
> .bem/level.js
Wednesday, October 5, 2011
![Page 30: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/30.jpg)
Создание страницы pages/index
30
> bem create block index -l pages -T bemjson.js
Wednesday, October 5, 2011
![Page 31: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/31.jpg)
Сборка страницы
31
Wednesday, October 5, 2011
![Page 32: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/32.jpg)
Собранные файлы
32
pages/index/index.csspages/index/index.ie.css
для браузера
Wednesday, October 5, 2011
![Page 33: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/33.jpg)
Собранные файлы
33
pages/index/index.csspages/index/index.ie.csspages/index/index.js
для браузера
Wednesday, October 5, 2011
![Page 34: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/34.jpg)
Собранные файлы
34
pages/index/index.csspages/index/index.ie.csspages/index/index.jspages/index/index.html
для браузера
Wednesday, October 5, 2011
![Page 35: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/35.jpg)
Сборка css и js
35
bemjson.js -> bemdecl.jsbemdecl.js -> deps.jsdeps.js -> css, js, ie.css
Wednesday, October 5, 2011
![Page 36: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/36.jpg)
Сборка html
36
deps.js -> bemhtml.jsbemjson + bemhtml.js = html
Wednesday, October 5, 2011
![Page 37: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/37.jpg)
Команды сборки
37
> bem build --help> bem create --help
Wednesday, October 5, 2011
![Page 38: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/38.jpg)
Развернуть @import
38
npm install -g borschik coa node-inherit cssp ometajs
Wednesday, October 5, 2011
![Page 39: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/39.jpg)
Развернуть @import
39
borschik -t css -i pages/index/index.css -o pages/index/_index.css
Wednesday, October 5, 2011
![Page 40: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/40.jpg)
GNUmakeAle
40
Wednesday, October 5, 2011
![Page 41: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/41.jpg)
GNUmakeJle
41
> make> make -B> make -B pages/index/index.html> make -B pages/index/index.css
Wednesday, October 5, 2011
![Page 42: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/42.jpg)
Делаем страницу
42
Wednesday, October 5, 2011
![Page 43: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/43.jpg)
43
Wednesday, October 5, 2011
![Page 44: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/44.jpg)
44
Уровень переопределения блоковСвой блокМодификатор блокаЗависимость блока от другого блока
Будем создавать:
Wednesday, October 5, 2011
![Page 45: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/45.jpg)
45
> bem create level blocks -l bem-bl/blocks-common/ .bem/level.js
Создаем уровень переопределения проекта blocks
Wednesday, October 5, 2011
![Page 46: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/46.jpg)
Создаем блок
46
> bem create block b-page -l blocks -T css
Wednesday, October 5, 2011
![Page 47: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/47.jpg)
Сборка css для index.html
> make pages/index/index.css -B
47
— index.css
Wednesday, October 5, 2011
![Page 48: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/48.jpg)
48
> make pages/index/index.js -Bили > make pages/index/index.ie.css -B
Сборка любой другой технологии js
Wednesday, October 5, 2011
![Page 49: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/49.jpg)
Сборка всей страницы
49
> make pages/index/index.html -B
— index.html
— index.js
— index.css
— index.ie.css
Wednesday, October 5, 2011
![Page 50: Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,](https://reader033.vdocuments.site/reader033/viewer/2022052409/54621f9daf79597f198b6f2e/html5/thumbnails/50.jpg)
для “почитать”Ссылки
50
Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4
Сайт с документациейclck.ru/KzG7
Клуб в Ярушкеclubs.ya.ru/bem/ или clck.ru/4Jl3
Wednesday, October 5, 2011