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

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

Елена Глухова и Варвара Степанова
Разработчики интерфейсов

YAC, Москва, 19 сентября 2011 года

Wednesday, October 5, 2011

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


Немного теории

3


Образец подзаголовка

Картинка про предметную область БЭМ

4


Картинка про уровни переопределения

Образец текста

5


Про что мастер-класс?

6


Мы сделаем:

7



Проект с типовой архитектурой

8



Страницу на блоках из библиотеки

9



Свои блоки на ядре библиотеки

10



Свои блоки на ядре библиотеки
Используем БЭМ-инструменты

11


Конкретно:

12


Конкретно:

Подключение библиотеки

13


Конкретно:

Сборка страницы

14


Конкретно:

Переопределение уровнем

15


Конкретно:

Переопределение уровнем
Переопределение в разных технологиях

16


БЭМ библиотека

Репозиторий
github.com/bem/bem-bl
или clck.ru/Kuu4
Документация
bem.github.com/bem-bl
или clck.ru/Kuuk
17


Среда разработки

18


Инструменты и окружение

Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v

19


Установка bem-tools

Node.js
nodejs.org
Пакетный менеджер NPM
npmjs.org

20


Установка БЭМ-инструментов

> npm install -g
bem ometajs xjst

21


Команды:

> bem --help

> bem create

> bem build

22


Новый проект

23


Проект на GitHub

clck.ru/LP3d
git://github.com/toivonen/yac2011-bem-bl-in-use.git

> git checkout first

> make branches

24


bem-bl

> git clone
git://github.com/bem/bem-bl.git

25


Создание уровня (папки)
pages

> bem create level --help

> bem create level pages

26


Создание страницы
pages/index

> bem create block --help

> bem create block index
-l pages

27


Создание страницы
pages/index

-l pages -T bemjson.js

28


Настройки уровня

> .bem/level.js

29


Создание страницы pages/index

-l pages -T bemjson.js

30



31


Собранные файлы
для браузера

pages/index/index.css
pages/index/index.ie.css

32



pages/index/index.js

33



pages/index/index.js
pages/index/index.html

34


Сборка css и js

bemjson.js -> bemdecl.js
bemdecl.js -> deps.js
deps.js -> css, js, ie.css

35


Сборка html

deps.js -> bemhtml.js
bemjson + bemhtml.js = html

36


Команды сборки

> bem build --help
> bem create --help

37


Развернуть @import

npm install -g
borschik coa
node-inherit
cssp ometajs

38


Развернуть @import

borschik -t css
-i pages/index/index.css
-o pages/index/_index.css

39


GNUmake le

40


GNUmake le

> make
> make -B
> make -B
pages/index/index.html
> make -B
41


Делаем страницу

42


43


Будем создавать:

Уровень переопределения блоков
Свой блок
Модификатор блока
Зависимость блока от другого блока

44


Создаем уровень переопределения
проекта blocks

> bem create level blocks
-l bem-bl/blocks-common/
.bem/level.js

45


Создаем блок
> bem create block b-page
-l blocks -T css

46


Сборка css для index.html
> make
pages/index/index.css -B

— index.css

47


Сборка любой другой технологии js

> make
pages/index/index.js -B
или
> make
pages/index/index.ie.css -B

48


Сборка всей страницы

> make
pages/index/index.html -B

— index.html
— index.js
— index.css
— index.ie.css
49


Ссылки
для “почитать”

Репозиторий библиотеки
github.com/bem/bem-bl или clck.ru/Kuu4
Сайт с документацией
clck.ru/KzG7
Клуб в Ярушке
clubs.ya.ru/bem/ или clck.ru/4Jl3
50


Варвара Степанова
toivonen@yandex-team.ru

Елена Глухова
lento4ka@yandex-team.ru


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

More Related Content

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

More from yaevents

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