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

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

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

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

Wednesday, October 5, 2011

clck.ru/L462шпаргалка к мастер-классу

Дом из готовых кирпичей

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

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

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

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

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

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

Мы сделаем:

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

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

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

Используем БЭМ-инструменты

Конкретно:

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

Конкретно:

Подключение библиотекиСборка страницы

Конкретно:

Подключение библиотекиСборка страницыПереопределение уровнем

Конкретно:

Подключение библиотекиСборка страницыПереопределение уровнемПереопределение в разных технологиях

Конкретно:

Репозиторий

github.com/bem/bem-bl

или clck.ru/Kuu4

Документация

bem.github.com/bem-bl или clck.ru/Kuuk

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

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

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

Локальный web-сервер

БЭМ-инструменты

github.com/bem/bem-tools

или clck.ru/Kz8v

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

Node.jsnodejs.org

Пакетный менеджер NPMnpmjs.org

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

> npm install -g bem ometajs xjst

Команды:

> bem --help

> bem create

> bem build

Новый проект

Проект на GitHub

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

> git checkout first

> make branches

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

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

bem-bl

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

> bem create level --help

> bem create level pages

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

> bem create block --help

> bem create block index -l pages

pages/index

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

> bem create block index -l pages -T bemjson.js

pages/index

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

> .bem/level.js

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

> bem create block index -l pages -T bemjson.js

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

Собранные файлы

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

для браузера

pages/index/index.csspages/index/index.ie.csspages/index/index.js

pages/index/index.csspages/index/index.ie.csspages/index/index.jspages/index/index.html

Сборка css и js

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

Сборка html

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

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

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

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

npm install -g borschik coa node-inherit cssp ometajs

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

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

GNUmakeAle

GNUmakeJle

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

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

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

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

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

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

Создаем блок

> bem create block b-page -l blocks -T css

Сборка css для index.html

> make pages/index/index.css -B

— index.css

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

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

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

> make pages/index/index.html -B

— index.html

— index.js

— index.css

— index.ie.css

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

Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4

Сайт с документациейclck.ru/KzG7

Клуб в Ярушкеclubs.ya.ru/bem/ или clck.ru/4Jl3

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

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

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

bem create block

bl clck

pages index

html

bem

index

css

make

Technology

Мониторинг, тюнинг и оптимизация...

Обзор hadoop-дистрибутивов. Тюнинг...

Развитие(тюнинг) УАЗ 3303 в...

История одной кнопки или...

instagram для бизнеса: 40 хаков и...

untitled-1 [santehshop.by] · title: untitled-1 author:...

Каталог - hach company · 2017. 2. 23. · hach...

i-bem.js: javascript в БЭМ-терминах. Елена...

lib.brsu.bylib.brsu.by/sites/default/files/books/Глухова...

the future is autonomous - quadrosoft · 2018-11-23 · •...

Елена Глухова "Верстка...