Дом из готовых кирпичей                   Библиотека блоков, тюнинг, инструменты                   Елена Глухова и Варвара...
clck.ru/L462                                шпаргалка к мастер-классу                             Дом из готовых кирпичейW...
Немного теории                   3Wednesday, October 5, 2011
Образец подзаголовка                              Картинка про предметную область БЭМ                   4Wednesday, Octobe...
Картинка про уровни переопределения                                                 Образец текста                   5Wedn...
Про что мастер-класс?                   6Wednesday, October 5, 2011
Мы сделаем:                   7Wednesday, October 5, 2011
Мы сделаем:                   Проект с типовой архитектурой                   8Wednesday, October 5, 2011
Мы сделаем:                   Проект с типовой архитектурой                   Страницу на блоках из библиотеки            ...
Мы сделаем:                   Проект с типовой архитектурой                   Страницу на блоках из библиотеки            ...
Мы сделаем:                   Проект с типовой архитектурой                   Страницу на блоках из библиотеки            ...
Конкретно:                   12Wednesday, October 5, 2011
Конкретно:                   Подключение библиотеки                   13Wednesday, October 5, 2011
Конкретно:                   Подключение библиотеки                   Сборка страницы                   14Wednesday, Octob...
Конкретно:                   Подключение библиотеки                   Сборка страницы                   Переопределение ур...
Конкретно:                   Подключение библиотеки                   Сборка страницы                   Переопределение ур...
БЭМ библиотека                   Репозиторий                             github.com/bem/bem-bl                            ...
Среда разработки                   18Wednesday, October 5, 2011
Инструменты и окружение                Локальный web-сервер                БЭМ-инструменты                         github....
Установка bem-tools                Node.js                  nodejs.org                Пакетный менеджер NPM               ...
Установка БЭМ-инструментов                      > npm install -g                          bem ometajs xjst                ...
Команды:                      > bem --help                      > bem create                      > bem build             ...
Новый проект                   23Wednesday, October 5, 2011
Проект на GitHub                   clck.ru/LP3d                   git://github.com/toivonen/yac2011-bem-bl-in-use.git     ...
Подключение библиотеки                   bem-bl      > git clone        git://github.com/bem/bem-bl.git                   ...
Создание уровня (папки)                   pages                      > bem create level --help                      > bem ...
Создание страницы                   pages/index                      > bem create block --help                      > bem ...
Создание страницы                   pages/index                      > bem create block index                          -l ...
Настройки уровня                      > .bem/level.js                   29Wednesday, October 5, 2011
Создание страницы pages/index                      > bem create block index                          -l pages -T bemjson.j...
Сборка страницы                   31Wednesday, October 5, 2011
Собранные файлы                   для браузера                      pages/index/index.css                      pages/index...
Собранные файлы                   для браузера                      pages/index/index.css                      pages/index...
Собранные файлы                   для браузера                      pages/index/index.css                      pages/index...
Сборка css и js                      bemjson.js -> bemdecl.js                      bemdecl.js -> deps.js                  ...
Сборка html                      deps.js -> bemhtml.js                      bemjson + bemhtml.js = html                   ...
Команды сборки                      > bem build --help                      > bem create --help                   37Wednes...
Развернуть @import                      npm install -g                          borschik coa                          node...
Развернуть @import                      borschik -t css                       -i pages/index/index.css                    ...
GNUmake le                   40Wednesday, October 5, 2011
GNUmake le                      > make                      > make -B                      > make -B                      ...
Делаем страницу                   42Wednesday, October 5, 2011
43Wednesday, October 5, 2011
Будем создавать:                   Уровень переопределения блоков                   Свой блок                   Модификато...
Создаем уровень переопределения                   проекта blocks                     > bem create level blocks            ...
Создаем блок                      > bem create block b-page                         -l blocks -T css                   46W...
Сборка css для index.html                      > make                        pages/index/index.css -B                     ...
Сборка любой другой технологии js                      > make                        pages/index/index.js -B              ...
Сборка всей страницы                      > make                        pages/index/index.html -B                      — i...
Ссылки                   для “почитать”                Репозиторий библиотеки                   github.com/bem/bem-bl или ...
Варвара Степанова                             toivonen@yandex-team.ru                             Елена Глухова           ...
Upcoming SlideShare
Loading in...5
×

Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова, Яндекс

6,589

Published on

Елена Глухова, Яндекс

Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года.

Варвара Степанова, Яндекс

Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. 

Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source.

Тема доклада
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты.

Тезисы
Все сайты немного похожи друг на друга. Если заниматься веб-разработкой долгие годы, накапливаются практики и типовые решения распространённых задач. Результатом наших накоплений становится open source библиотека блоков bem-bl , которую мы разрабатываем на GitHub. Библиотека реализована согласно методологии БЭМ и позволяет использовать блоки, уже 
имеющие шаблонную, CSS и JS-реализации, для построения web-страницы. Мастер-класс продемонстрирует, как можно использовать готовые блоки из этой библиотеки и как модифицировать их под нужды своего сайта. Для работы с файлами библиотеки используются консольные инструменты bem-tools.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,589
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова, Яндекс"

  1. 1. Дом из готовых кирпичей Библиотека блоков, тюнинг, инструменты Елена Глухова и Варвара Степанова Разработчики интерфейсов YAC, Москва, 19 сентября 2011 годаWednesday, October 5, 2011
  2. 2. clck.ru/L462 шпаргалка к мастер-классу Дом из готовых кирпичейWednesday, October 5, 2011
  3. 3. Немного теории 3Wednesday, October 5, 2011
  4. 4. Образец подзаголовка Картинка про предметную область БЭМ 4Wednesday, October 5, 2011
  5. 5. Картинка про уровни переопределения Образец текста 5Wednesday, October 5, 2011
  6. 6. Про что мастер-класс? 6Wednesday, October 5, 2011
  7. 7. Мы сделаем: 7Wednesday, October 5, 2011
  8. 8. Мы сделаем: Проект с типовой архитектурой 8Wednesday, October 5, 2011
  9. 9. Мы сделаем: Проект с типовой архитектурой Страницу на блоках из библиотеки 9Wednesday, October 5, 2011
  10. 10. Мы сделаем: Проект с типовой архитектурой Страницу на блоках из библиотеки Свои блоки на ядре библиотеки 10Wednesday, October 5, 2011
  11. 11. Мы сделаем: Проект с типовой архитектурой Страницу на блоках из библиотеки Свои блоки на ядре библиотеки Используем БЭМ-инструменты 11Wednesday, October 5, 2011
  12. 12. Конкретно: 12Wednesday, October 5, 2011
  13. 13. Конкретно: Подключение библиотеки 13Wednesday, October 5, 2011
  14. 14. Конкретно: Подключение библиотеки Сборка страницы 14Wednesday, October 5, 2011
  15. 15. Конкретно: Подключение библиотеки Сборка страницы Переопределение уровнем 15Wednesday, October 5, 2011
  16. 16. Конкретно: Подключение библиотеки Сборка страницы Переопределение уровнем Переопределение в разных технологиях 16Wednesday, October 5, 2011
  17. 17. БЭМ библиотека Репозиторий github.com/bem/bem-bl или clck.ru/Kuu4 Документация bem.github.com/bem-bl или clck.ru/Kuuk 17Wednesday, October 5, 2011
  18. 18. Среда разработки 18Wednesday, October 5, 2011
  19. 19. Инструменты и окружение Локальный web-сервер БЭМ-инструменты github.com/bem/bem-tools или clck.ru/Kz8v 19Wednesday, October 5, 2011
  20. 20. Установка bem-tools Node.js nodejs.org Пакетный менеджер NPM npmjs.org 20Wednesday, October 5, 2011
  21. 21. Установка БЭМ-инструментов > npm install -g bem ometajs xjst 21Wednesday, October 5, 2011
  22. 22. Команды: > bem --help > bem create > bem build 22Wednesday, October 5, 2011
  23. 23. Новый проект 23Wednesday, October 5, 2011
  24. 24. Проект на GitHub clck.ru/LP3d git://github.com/toivonen/yac2011-bem-bl-in-use.git > git checkout first > make branches 24Wednesday, October 5, 2011
  25. 25. Подключение библиотеки bem-bl > git clone git://github.com/bem/bem-bl.git 25Wednesday, October 5, 2011
  26. 26. Создание уровня (папки) pages > bem create level --help > bem create level pages 26Wednesday, October 5, 2011
  27. 27. Создание страницы pages/index > bem create block --help > bem create block index -l pages 27Wednesday, October 5, 2011
  28. 28. Создание страницы pages/index > bem create block index -l pages -T bemjson.js 28Wednesday, October 5, 2011
  29. 29. Настройки уровня > .bem/level.js 29Wednesday, October 5, 2011
  30. 30. Создание страницы pages/index > bem create block index -l pages -T bemjson.js 30Wednesday, October 5, 2011
  31. 31. Сборка страницы 31Wednesday, October 5, 2011
  32. 32. Собранные файлы для браузера pages/index/index.css pages/index/index.ie.css 32Wednesday, October 5, 2011
  33. 33. Собранные файлы для браузера pages/index/index.css pages/index/index.ie.css pages/index/index.js 33Wednesday, October 5, 2011
  34. 34. Собранные файлы для браузера pages/index/index.css pages/index/index.ie.css pages/index/index.js pages/index/index.html 34Wednesday, October 5, 2011
  35. 35. Сборка css и js bemjson.js -> bemdecl.js bemdecl.js -> deps.js deps.js -> css, js, ie.css 35Wednesday, October 5, 2011
  36. 36. Сборка html deps.js -> bemhtml.js bemjson + bemhtml.js = html 36Wednesday, October 5, 2011
  37. 37. Команды сборки > bem build --help > bem create --help 37Wednesday, October 5, 2011
  38. 38. Развернуть @import npm install -g borschik coa node-inherit cssp ometajs 38Wednesday, October 5, 2011
  39. 39. Развернуть @import borschik -t css -i pages/index/index.css -o pages/index/_index.css 39Wednesday, October 5, 2011
  40. 40. GNUmake le 40Wednesday, October 5, 2011
  41. 41. GNUmake le > make > make -B > make -B pages/index/index.html > make -B pages/index/index.css 41Wednesday, October 5, 2011
  42. 42. Делаем страницу 42Wednesday, October 5, 2011
  43. 43. 43Wednesday, October 5, 2011
  44. 44. Будем создавать: Уровень переопределения блоков Свой блок Модификатор блока Зависимость блока от другого блока 44Wednesday, October 5, 2011
  45. 45. Создаем уровень переопределения проекта blocks > bem create level blocks -l bem-bl/blocks-common/ .bem/level.js 45Wednesday, October 5, 2011
  46. 46. Создаем блок > bem create block b-page -l blocks -T css 46Wednesday, October 5, 2011
  47. 47. Сборка css для index.html > make pages/index/index.css -B — index.css 47Wednesday, October 5, 2011
  48. 48. Сборка любой другой технологии js > make pages/index/index.js -B или > make pages/index/index.ie.css -B 48Wednesday, October 5, 2011
  49. 49. Сборка всей страницы > make pages/index/index.html -B — index.html — index.js — index.css — index.ie.css 49Wednesday, October 5, 2011
  50. 50. Ссылки для “почитать” Репозиторий библиотеки github.com/bem/bem-bl или clck.ru/Kuu4 Сайт с документацией clck.ru/KzG7 Клуб в Ярушке clubs.ya.ru/bem/ или clck.ru/4Jl3 50Wednesday, October 5, 2011
  51. 51. Варвара Степанова toivonen@yandex-team.ru Елена Глухова lento4ka@yandex-team.ruWednesday, October 5, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×