Слайды мастер-класса "Использование библиотеки bem-bl" на YAC2011. Елена Глухова, Варвара Степанова

1. Дом из готовых кирпичей
Библиотека блоков, тюнинг, инструменты
Елена Глухова и Варвара Степанова
Разработчики интерфейсов
YAC, Москва, 19 сентября 2011 года
Wednesday, October 5, 2011

2. clck.ru/L462
шпаргалка к мастер-классу
Дом из готовых кирпичей
Wednesday, October 5, 2011

3. Немного теории
3
Wednesday, October 5, 2011

4. Образец подзаголовка
Картинка про предметную область БЭМ
4
Wednesday, October 5, 2011

5. Картинка про уровни переопределения
Образец текста
5
Wednesday, October 5, 2011

6. Про что мастер-класс?
6
Wednesday, October 5, 2011

7. Мы сделаем:
7
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

12. Конкретно:
12
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

18. Среда разработки
18
Wednesday, October 5, 2011

19. Инструменты и окружение
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
19
Wednesday, October 5, 2011

20. Установка bem-tools
Node.js
nodejs.org
Пакетный менеджер NPM
npmjs.org
20
Wednesday, October 5, 2011

21. Установка БЭМ-инструментов
> npm install -g
bem ometajs xjst
21
Wednesday, October 5, 2011

22. Команды:
> bem --help
> bem create
> bem build
22
Wednesday, October 5, 2011

23. Новый проект
23
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

29. Настройки уровня
> .bem/level.js
29
Wednesday, October 5, 2011

30. Создание страницы pages/index
> bem create block index
-l pages -T bemjson.js
30
Wednesday, October 5, 2011

31. Сборка страницы
31
Wednesday, October 5, 2011

32. Собранные файлы
для браузера
pages/index/index.css
pages/index/index.ie.css
32
Wednesday, October 5, 2011

33. Собранные файлы
для браузера
pages/index/index.css
pages/index/index.ie.css
pages/index/index.js
33
Wednesday, October 5, 2011

34. Собранные файлы
для браузера
pages/index/index.css
pages/index/index.ie.css
pages/index/index.js
pages/index/index.html
34
Wednesday, October 5, 2011

35. Сборка css и js
bemjson.js -> bemdecl.js
bemdecl.js -> deps.js
deps.js -> css, js, ie.css
35
Wednesday, October 5, 2011

36. Сборка html
deps.js -> bemhtml.js
bemjson + bemhtml.js = html
36
Wednesday, October 5, 2011

37. Команды сборки
> bem build --help
> bem create --help
37
Wednesday, October 5, 2011

38. Развернуть @import
npm install -g
borschik coa
node-inherit
cssp ometajs
38
Wednesday, October 5, 2011

39. Развернуть @import
borschik -t css
-i pages/index/index.css
-o pages/index/_index.css
39
Wednesday, October 5, 2011

40. GNUmake le
40
Wednesday, October 5, 2011

41. GNUmake le
> make
> make -B
> make -B
pages/index/index.html
> make -B
pages/index/index.css
41
Wednesday, October 5, 2011

42. Делаем страницу
42
Wednesday, October 5, 2011

43. 43
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