YAC, Москва, 19 сентября 2011 года Разработчики интерфейсов Елена Глухова и Варвара Степанова Дом из готовых кирпичей Библиотека блоков, тюнинг, инструменты Wednesday, October 5, 2011
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухова, Варвара Степанова,
Nov 11, 2014
Елена Глухова, Яндекс
Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года.
Варвара Степанова, Яндекс
Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source.
Тема доклада
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты.
Тезисы
Все сайты немного похожи друг на друга. Если заниматься веб-разработкой долгие годы, накапливаются практики и типовые решения распространённых задач. Результатом наших накоплений становится open source библиотека блоков bem-bl , которую мы разрабатываем на GitHub. Библиотека реализована согласно методологии БЭМ и позволяет использовать блоки, уже имеющие шаблонную, CSS и JS-реализации, для построения web-страницы. Мастер-класс продемонстрирует, как можно использовать готовые блоки из этой библиотеки и как модифицировать их под нужды своего сайта. Для работы с файлами библиотеки используются консольные инструменты bem-tools.
Верстальщик, разработчик веб-интерфейсов. Работает в Яндексе с 2008 года.
Варвара Степанова, Яндекс
Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. Последние полтора года Елена Глухова и Варвара Степанова совместно работают вместе над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также заняты разработкой подобного интерфейсного фреймворка в open source.
Тема доклада
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты.
Тезисы
Все сайты немного похожи друг на друга. Если заниматься веб-разработкой долгие годы, накапливаются практики и типовые решения распространённых задач. Результатом наших накоплений становится open source библиотека блоков bem-bl , которую мы разрабатываем на GitHub. Библиотека реализована согласно методологии БЭМ и позволяет использовать блоки, уже имеющие шаблонную, CSS и JS-реализации, для построения web-страницы. Мастер-класс продемонстрирует, как можно использовать готовые блоки из этой библиотеки и как модифицировать их под нужды своего сайта. Для работы с файлами библиотеки используются консольные инструменты bem-tools.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
YAC, Москва, 19 сентября 2011 года
Разработчики интерфейсовЕлена Глухова и Варвара Степанова
Дом из готовых кирпичейБиблиотека блоков, тюнинг, инструменты
Wednesday, October 5, 2011
clck.ru/L462шпаргалка к мастер-классу
Дом из готовых кирпичей
Wednesday, October 5, 2011
Немного теории
3
Wednesday, October 5, 2011
Образец подзаголовка
Картинка про предметную область БЭМ
4
Wednesday, October 5, 2011
Образец текста
Картинка про уровни переопределения
5
Wednesday, October 5, 2011
Про что мастер-класс?
6
Wednesday, October 5, 2011
7
Мы сделаем:
Wednesday, October 5, 2011
8
Проект с типовой архитектурой
Мы сделаем:
Wednesday, October 5, 2011
9
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Мы сделаем:
Wednesday, October 5, 2011
10
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
Мы сделаем:
Wednesday, October 5, 2011
11
Проект с типовой архитектурой
Страницу на блоках из библиотеки
Свои блоки на ядре библиотеки
Используем БЭМ-инструменты
Мы сделаем:
Wednesday, October 5, 2011
12
Конкретно:
Wednesday, October 5, 2011
13
Подключение библиотеки
Конкретно:
Wednesday, October 5, 2011
14
Подключение библиотекиСборка страницы
Конкретно:
Wednesday, October 5, 2011
15
Подключение библиотекиСборка страницыПереопределение уровнем
Конкретно:
Wednesday, October 5, 2011
16
Подключение библиотекиСборка страницыПереопределение уровнемПереопределение в разных технологиях
Конкретно:
Wednesday, October 5, 2011
17
Репозиторий
github.com/bem/bem-bl
или clck.ru/Kuu4
Документация
bem.github.com/bem-bl или clck.ru/Kuuk
БЭМ библиотека
Wednesday, October 5, 2011
Среда разработки
18
Wednesday, October 5, 2011
Инструменты и окружение
19
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
Wednesday, October 5, 2011
Установка bem-tools
20
Node.jsnodejs.org
Пакетный менеджер NPMnpmjs.org
Wednesday, October 5, 2011
Установка БЭМ-инструментов
21
> npm install -g bem ometajs xjst
Wednesday, October 5, 2011
Команды:
22
> bem --help
> bem create
> bem build
Wednesday, October 5, 2011
Новый проект
23
Wednesday, October 5, 2011
Проект на GitHub
24
clck.ru/LP3dgit://github.com/toivonen/yac2011-bem-bl-in-use.git
> git checkout first
> make branches
Wednesday, October 5, 2011
Подключение библиотеки
25
> git clone git://github.com/bem/bem-bl.git
bem-bl
Wednesday, October 5, 2011
Создание уровня (папки)
26
> bem create level --help
> bem create level pages
pages
Wednesday, October 5, 2011
Создание страницы
27
> bem create block --help
> bem create block index -l pages
pages/index
Wednesday, October 5, 2011
Создание страницы
28
> bem create block index -l pages -T bemjson.js
pages/index
Wednesday, October 5, 2011
Настройки уровня
29
> .bem/level.js
Wednesday, October 5, 2011
Создание страницы pages/index
30
> bem create block index -l pages -T bemjson.js
Wednesday, October 5, 2011
Сборка страницы
31
Wednesday, October 5, 2011
Собранные файлы
32
pages/index/index.csspages/index/index.ie.css
для браузера
Wednesday, October 5, 2011
Собранные файлы
33
pages/index/index.csspages/index/index.ie.csspages/index/index.js
для браузера
Wednesday, October 5, 2011
Собранные файлы
34
pages/index/index.csspages/index/index.ie.csspages/index/index.jspages/index/index.html
для браузера
Wednesday, October 5, 2011
Сборка css и js
35
bemjson.js -> bemdecl.jsbemdecl.js -> deps.jsdeps.js -> css, js, ie.css
Wednesday, October 5, 2011
Сборка html
36
deps.js -> bemhtml.jsbemjson + bemhtml.js = html
Wednesday, October 5, 2011
Команды сборки
37
> bem build --help> bem create --help
Wednesday, October 5, 2011
Развернуть @import
38
npm install -g borschik coa node-inherit cssp ometajs
Wednesday, October 5, 2011
Развернуть @import
39
borschik -t css -i pages/index/index.css -o pages/index/_index.css
Wednesday, October 5, 2011
GNUmakeAle
40
Wednesday, October 5, 2011
GNUmakeJle
41
> make> make -B> make -B pages/index/index.html> make -B pages/index/index.css
Wednesday, October 5, 2011
Делаем страницу
42
Wednesday, October 5, 2011
43
Wednesday, October 5, 2011
44
Уровень переопределения блоковСвой блокМодификатор блокаЗависимость блока от другого блока
Будем создавать:
Wednesday, October 5, 2011
45
> bem create level blocks -l bem-bl/blocks-common/ .bem/level.js
Создаем уровень переопределения проекта blocks
Wednesday, October 5, 2011
Создаем блок
46
> bem create block b-page -l blocks -T css
Wednesday, October 5, 2011
Сборка css для index.html
> make pages/index/index.css -B
47
— index.css
Wednesday, October 5, 2011
48
> make pages/index/index.js -Bили > make pages/index/index.ie.css -B
Сборка любой другой технологии js
Wednesday, October 5, 2011
Сборка всей страницы
49
> make pages/index/index.html -B
— index.html
— index.js
— index.css
— index.ie.css
Wednesday, October 5, 2011
для “почитать”Ссылки
50
Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4
Сайт с документациейclck.ru/KzG7
Клуб в Ярушкеclubs.ya.ru/bem/ или clck.ru/4Jl3
Wednesday, October 5, 2011
Related Documents
