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

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

on

  • 6,596 views

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

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

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

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

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

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

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

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

Statistics

Views

Total Views
6,596
Views on SlideShare
1,294
Embed Views
5,302

Actions

Likes
1
Downloads
12
Comments
0

15 Embeds 5,302

http://yac2011.yandex.ru 3249
http://yac2011.yandex.com 895
http://events.yandex.ru 572
http://tech.yandex.ru 360
http://ya-events.narod.ru 162
http://web-chib.events.lacerta.yandex-team.ru 23
http://external.events.test.tools.yandex-team.ru 14
http://events.indus.yandex.ru 9
http://yac.tadatuta.graymantle.yandex.ru 7
http://events.lynx.yandex.ru 4
http://web-chib.events.pavo.yandex-team.ru 3
http://admin-ru.tech.yandex-team.ru 1
http://events.yandex-team.ru 1
http://target126g.load.yandex.net 1
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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