История одной кнопки или b-form-button.css и b-form-button.js (Елена...
DESCRIPTION
TRANSCRIPT
РИТ-2012, Москва, 2 апреля 2012 года
Елена ГлуховаВарвара Степанова
b-form-button.css и b-form-button.jsИстория одной кнопки
#БЭМ
Tuesday, April 3, 12
2
Tuesday, April 3, 12
3
Цветовая адаптация
Tuesday, April 3, 12
4
Tuesday, April 3, 12
Что и Зачем?
Tuesday, April 3, 12
Все сервисы6
Tuesday, April 3, 12
Все сервисы6
Все браузеры
Tuesday, April 3, 12
Все сервисы6
Все браузерыВсе операционные системы
Tuesday, April 3, 12
Браузеры7
Tuesday, April 3, 12
8
Цветовая адаптация
Tuesday, April 3, 12
8
Цветовая адаптация
Tuesday, April 3, 12
9
Все состояния
Tuesday, April 3, 12
9
Все состояния
Tuesday, April 3, 12
9
Все состояния
Tuesday, April 3, 12
9
Все состояния
Tuesday, April 3, 12
9
Все состояния
Tuesday, April 3, 12
Скачать Яндекс.Навигатор
Кнопка в тексте10
Tuesday, April 3, 12
Темы11
Tuesday, April 3, 12
Анатомия
Tuesday, April 3, 12
Элемент формы13
Tuesday, April 3, 12
<span class=”b-form-button”> ... <input class=”b-form-button__input” type=”submit” value=””/></span>
<span> <input type=”submit”/></span>
или
<span> <input type=”button”/></span>
14
Tuesday, April 3, 12
Скачать Яндекс.Навигатор
Ссылка15
Tuesday, April 3, 12
<a href=”ya.ru”> ...</a>
<!-- без <input/> внутри -->
16
Tuesday, April 3, 12
Верстаем по БЭМ!
Tuesday, April 3, 12
bit.ly/HfIAHc
Репозиторий с кнопкой на 19
Tuesday, April 3, 12
<span class=”b-form-button”> ...</span>
Кнопка это блок20
Tuesday, April 3, 12
b-form-button/ b-form-button.css
Блок на файловой системе21
Tuesday, April 3, 12
Элемент формы22
Tuesday, April 3, 12
<span class=”b-form-button”> ... <input class=”b-form-button__input” type=”submit” value=””/></span>
<span class=”b-form-button”> ... <input class=”b-form-button__input” type=”submit” value=””/></span>
Элемент input23
Tuesday, April 3, 12
b-form-button/ b-form-button.css __input/ b-form-button__input.css
24
Tuesday, April 3, 12
.b-form-button__input{ opacity: 0; .../* визуально прячем инпут и натягиваем его поверх всей кнопки*/}
25
Tuesday, April 3, 12
26
Tuesday, April 3, 12
Идея в картинках27
Tuesday, April 3, 12
27
Tuesday, April 3, 12
27
Tuesday, April 3, 12
27
Tuesday, April 3, 12
27
Tuesday, April 3, 12
27
Tuesday, April 3, 12
27
Tuesday, April 3, 12
27
Tuesday, April 3, 12
Режем на кусочки28
Tuesday, April 3, 12
Левая часть29
Tuesday, April 3, 12
<span class=”b-form-button”> <span class=”b-form-button__left”> </span> ...</span>
30
Tuesday, April 3, 12
.b-form-button__left{ ...
background: no-repeat 0 2px; }
31
Tuesday, April 3, 12
Правая часть32
Tuesday, April 3, 12
.b-form-button{ ... /* background-image задаётся в _theme */ background-repeat: no-repeat; background-position: 100% -55px;}
33
Tuesday, April 3, 12
Середина34
Tuesday, April 3, 12
<span class=”b-form-button”> ... <span class=”b-form-button__content”> Универсальная кнопка </span> ...</span>
35
Tuesday, April 3, 12
.b-form-button__content{ .../* background-image задаётся в _theme */ background: repeat-x 0 -112px;}
36
Tuesday, April 3, 12
Размер имеет значение37
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_size_m”> ...</span>
Размер — это модификатор38
Tuesday, April 3, 12
b-form-button/ b-form-button.css _size/ b-form-button_size_s.css b-form-button_size_m.css b-form-button_size_l.css b-form-button_size_xl.css
39
Tuesday, April 3, 12
.b-form-button_size_m { height: 26px;}
.b-form-button_size_m .b-form-button__content { font-size: 13px; padding: 0 10px;
line-height: 25px;}
40
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m”> ...</span>
Тема — это модификатор41
Tuesday, April 3, 12
b-form-button/ _theme/ b-form-button_theme_grey-m.css b-form-button_theme_grey-m.png b-form-button_theme_grey-l.css b-form-button_theme_grey-l.png ...
42
Tuesday, April 3, 12
.b-form-button_theme_grey-m,
.b-form-button_theme_grey-m .b-form-button__left,
.b-form-button_theme_grey-m .b-form-button__content{ color: #000; background-image: url(b-form-button_theme_grey-m.png);}
43
Tuesday, April 3, 12
Новая тема44
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m
Состояния — это модификаторы45
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m b-form-button_focused_yes b-form-button_hovered_yes”>
Состояния — это модификаторы45
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m b-form-button_focused_yes b-form-button_hovered_yes”> ...
Важно: Состояния переключает JavaScript
Состояния — это модификаторы45
Tuesday, April 3, 12
Несколько состояний одновременно46
Tuesday, April 3, 12
В фокусе46
Tuesday, April 3, 12
47
В фокусе и наведенная
Tuesday, April 3, 12
.b-form-button_focused_yes{ background-position: 100% -570px;}
.b-form-button_focused_yes .b-form-button__left{ background-position: 0 -513px;}
...
48
Tuesday, April 3, 12
b-form-button/ _theme/ _size/ _hovered/ _focused/ _pressed/ _disabled/ ...
49
Tuesday, April 3, 12
Нажатая50
_pressed_yesTuesday, April 3, 12
<span class=”b-form-button ...”> ... <span class=”b-form-button__content”> <span class=”b-form-button__text”> Универсальная кнопка </span> </span> ...</span>
51
Tuesday, April 3, 12
.b-form-button_pressed_yes{ background-position: 100% -399px;}
...
.b-form-button_pressed_yes .b-form-button__text{ padding-top: 1px;}
52
Tuesday, April 3, 12
Результат53
Tuesday, April 3, 12
b-form-button.js
Tuesday, April 3, 12
Требования к функциональностиРазличные состояния кнопки
— фокус и наведение мыши
— нажатость
— неактивность
55
Tuesday, April 3, 12
Как браузерный контрол56
Tuesday, April 3, 12
Как браузерный контрол
— управление с клавиатуры
56
Tuesday, April 3, 12
Как браузерный контрол
— управление с клавиатуры— события
56
Tuesday, April 3, 12
Как браузерный контрол
— управление с клавиатуры— события— неактивная
56
Tuesday, April 3, 12
b-form-button/ ... b-form-button.css
57
Tuesday, April 3, 12
b-form-button/ ... b-form-button.css b-form-button.js
57
Tuesday, April 3, 12
bit.ly/HbUcZT
Документация к блоку i-bem58
Tuesday, April 3, 12
bit.ly/HKyEWa
bit.ly/nkQbWF
Мастер-классы про JavaScript59
Tuesday, April 3, 12
Особенный JavaScript
Tuesday, April 3, 12
Особенный JavaScript61
Tuesday, April 3, 12
Особенный JavaScriptООП-представление— class & instance
61
Tuesday, April 3, 12
Особенный JavaScriptООП-представление— class & instance
Предметная область БЭМ—оперируем БЭМ-сущностями— не работаем с CSS-классами и DOM-деревом
61
Tuesday, April 3, 12
Особенный JavaScript62
Tuesday, April 3, 12
Особенный JavaScriptБлок — это— BEM-объект– DOM node
62
Tuesday, April 3, 12
Особенный JavaScriptБлок — это— BEM-объект– DOM node
Хелперы— для работы с модификаторами
— для работы со структурой блока
— для работы с событиями
62
Tuesday, April 3, 12
Декларативный стиль
Tuesday, April 3, 12
b-form-button.js64
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', {
/* Динамические свойства и методы */
},{
b-form-button.js64
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', {
/* Динамические свойства и методы */
},{
/* Статические свойства и методы */
})
b-form-button.js64
Tuesday, April 3, 12
На языке состояний
Tuesday, April 3, 12
На языке модификаторов
Tuesday, April 3, 12
67
Tuesday, April 3, 12
68
Tuesday, April 3, 12
69
Tuesday, April 3, 12
70
JavaScript
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', {
onSetMod : {
'mod' : function() { // Реакция на установку // модификатора }
}
71
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', {
onSetMod : { 'mod' : { 'val' : function() { // Реакция на установку // значения модификатора } } }
72
Tuesday, April 3, 12
focused
Tuesday, April 3, 12
В фокусе74
<input type=”submit”/>
Tuesday, April 3, 12
focused: ‘yes’75
Tuesday, April 3, 12
focused: ‘yes’— Связь с браузерным контролом
input — в фокусе
75
Tuesday, April 3, 12
focused: ‘yes’— Связь с браузерным контролом
input — в фокусе— Неактивная кнопка — без фокуса
75
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
76
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'focused' : {
'yes' : function() {
76
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'focused' : {
'yes' : function() {
if(this.hasMod('disabled', 'yes')) return false; }
}
76
Tuesday, April 3, 12
/** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @param {String} [modVal] значение модификатора * @returns {Boolean} */
hasMod : function( elem, modName, modVal)
77
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'focused' : {
'yes' : function() {
... this .bindTo('keydown', this._onKeyDown)
78
Tuesday, April 3, 12
/** * @protected * @param {jQuery|String} [elem] элемент * @param {String} event имя события * @param {Function} fn функция-обработчик, будет выполнена в контексте блока * @returns {BEM} */
bindTo : function(elem, event, fn)
79
Tuesday, April 3, 12
В фокусе80
<input type=”submit”/>
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'focused' : {
'yes' : function() {
... this .bindTo('keydown', this._onKeyDown) .elem('input').focus();
81
Tuesday, April 3, 12
/** * @protected * @param {String} names имя (или через пробел имена) вложенных элементов * @param {String} [modName] имя модификатора * @param {String} [modVal] значение модификатора * @returns {jQuery} DOM-элементы */
elem : function( names, modName, modVal)
82
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'focused' : { 'yes': ...,
'' : function() {
this .unbindFrom('keydown') .elem('input').blur();
83
Tuesday, April 3, 12
disabled
Tuesday, April 3, 12
Неактивная85
<input type=”submit”/>
Tuesday, April 3, 12
disabled: ‘yes’86
Tuesday, April 3, 12
disabled: ‘yes’— Отсутствие реакции
86
Tuesday, April 3, 12
disabled: ‘yes’— Отсутствие реакции— Связь с браузерным контролом
input — disabled
86
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'disabled' : function() {
var disable = modVal == 'yes'; this.elem('input').attr('disabled', disable);
87
Tuesday, April 3, 12
88
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {88
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'disabled' : function() {
...
this._href && (disable? this.domElem.removeAttr('href') : this.domElem.attr('href', this._href));
88
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'disabled' : function() {
...
this._href && (disable? this.domElem.removeAttr('href') : this.domElem.attr('href', this._href));
disable && this.domElem.keyup();
88
Tuesday, April 3, 12
89
this.domElem
Tuesday, April 3, 12
89
this.domElem
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', {
onSetMod : { ... },
isDisabled : function() {
return this.hasMod('disabled', 'yes');
}
})
90
Tuesday, April 3, 12
pressed и hovered
Tuesday, April 3, 12
Наведенная и нажатая92
Tuesday, April 3, 12
hovered и pressed93
Tuesday, April 3, 12
hovered и pressed— С событиями
93
Tuesday, April 3, 12
hovered и pressed— С событиями— Не для неактивной кнопки
93
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'pressed' : function() {
this.isDisabled() || this.trigger(modVal == 'yes'? 'press' : 'release');
94
Tuesday, April 3, 12
/** * @protected * @param {String} e имя события * @param {Object} [data] дополнительные данные * @returns {BEM} */
trigger : function(e, data)
95
Tuesday, April 3, 12
96
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'hovered' : {
'' : function() {
this.delMod('pressed');
}
97
Tuesday, April 3, 12
/** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @returns {BEM} */
delMod : function(elem, modName)
98
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { onSetMod : {
'*' : function(modName) {
if(this.isDisabled() && 'hovered pressed'.indexOf(modName) > -1) return false;
}
99
Tuesday, April 3, 12
live
Tuesday, April 3, 12
live-события
Tuesday, April 3, 12
Event delegation103
Tuesday, April 3, 12
Event delegation103
Tuesday, April 3, 12
Event delegation103
Tuesday, April 3, 12
Event delegation103
handler
Tuesday, April 3, 12
Event delegation104
Tuesday, April 3, 12
Event delegation104
handler
Tuesday, April 3, 12
105
Tuesday, April 3, 12
105
Tuesday, April 3, 12
106
Tuesday, April 3, 12
106
Tuesday, April 3, 12
live-инициализация
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { ... },
{ live: function() { /* методы инициализации */
}
}
108
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { ... },
{ live: function() { this .liveBindTo('leftclick', function(e) { this._onClick(e); }) }}
109
Tuesday, April 3, 12
/** * @static * @protected * @param {String|Object} [to] описание * @param {String} event имя события * @param {Function} callback обработчик */
liveBindTo : function(to, event, callback, invokeOnInit)
110
Tuesday, April 3, 12
BEM.DOM.decl('b-form-button', { ... },{ live: function() { this .liveBindTo( 'mouseover mouseout ... focusin ...', function(e) { var mod = eventsToMods[e.type]; this.setMod(mod.name, mod.val || ''); }
111
Tuesday, April 3, 12
var eventsToMods = {
'mouseover' : { name : 'hovered', val : 'yes' }, 'mouseout' : { name : 'hovered' }, 'mousedown' : { name : 'pressed', val : 'yes' }, 'mouseup' : { name : 'pressed' }, 'focusin' : { name : 'focused', val : 'yes' }, 'focusout' : { name : 'focused' }
};
112
Tuesday, April 3, 12
113
Tuesday, April 3, 12
bit.ly/HfIAHc
Репозиторий с кнопкой на 114
Tuesday, April 3, 12
Реализация CSS3
Tuesday, April 3, 12
116
Все меняется
Tuesday, April 3, 12
116
Tuesday, April 3, 12
116
Tuesday, April 3, 12
116
Tuesday, April 3, 12
b-form-button/ _type/
Модификатор _type117
Tuesday, April 3, 12
b-form-button/ _type/
Модификатор _type117
b-form-button/ _type/ b-form-button_type_complex.css
Tuesday, April 3, 12
b-form-button/ _type/
Модификатор _type117
b-form-button/ _type/ b-form-button_type_complex.css
b-form-button/ _type/ b-form-button_type_complex.css b-form-button_type_normal.css
Tuesday, April 3, 12
.b-form-button_type_complex.b-form-button_hovered_yes{ background-position: ...}
$block_type_complex.$block_hovered_yes .$block__left{ background-position: ...}...
b-form-button_type_complex.css118
Tuesday, April 3, 12
.b-form-button{ position: relative;
display: inline-block;
outline: 0; cursor: default; ...
b-form-button.css119
Tuesday, April 3, 12
Меньше разметки120
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_type_normal”>
</span>
120
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_type_normal”>
</span>
<span class=”b-form-button b-form-button_type_normal”>
<span class=”b-form-button__text”> Кнопка на css3 </span>
</span>
120
Tuesday, April 3, 12
<span class=”b-form-button b-form-button_type_normal”>
</span>
<span class=”b-form-button b-form-button_type_normal”>
<span class=”b-form-button__text”> Кнопка на css3 </span>
</span>
<span class=”b-form-button b-form-button_type_normal”>
<span class=”b-form-button__text”> Кнопка на css3 </span>
<input class=”b-form-button__input”/></span>
120
Tuesday, April 3, 12
b-form-button_type_normal.css121
Tuesday, April 3, 12
.b-form-button_type_normal{ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; ...}
.b-form-button_type_normal.b-form-button_disabled_yes{ opacity: 0.35;}
121
Tuesday, April 3, 12
b-form-button/ _theme/ b-form-button_theme_normal-grey.css ...
Тема для css3122
Tuesday, April 3, 12
123
Tuesday, April 3, 12
b-form-button_theme_normal-grey.css124
Tuesday, April 3, 12
.b-form-button_theme_normal-grey{ color: #000;
border-color: rgba(192,192,192,0.5) rgba(192,192,192,0.3) rgba(49,49,49,0.45);
background: linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 10%, rgba(216,216,216,0.66) 75%, rgba(193,193,193,0.66) 92%, rgba(168,168,168,0.66) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(255,255,255,0.9)), color-stop(75%,rgba(216,216,216,0.66)), color-stop(92%,rgba(193,193,193,0.66)), color-stop(100%,rgba(168,168,168,0.66))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#a8d6d6d6',GradientType=0 ); /* IE6-9 */}
body .b-form-button_theme_normal-grey.b-form-button_hovered_yes{ border-top-style: solid;
background: linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 88%,rgba(255,255,255,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 10%, rgba(206,206,206,0.61) 59%, rgba(193,193,193,0.66) 87%, rgba(198,198,198,0.66) 94%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(255,255,255,0.9)), color-stop(59%,rgba(206,206,206,0.61)), color-stop(87%,rgba(193,193,193,0.66)), color-stop(88%,rgba(198,198,198,0.66)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 94%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 94%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 94%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f7f7f7', endColorstr='#a8d4d4d4',GradientType=0 ); /* IE6-9 */}
.b-form-button_theme_normal-grey.b-form-button_focused_yes{ box-shadow: 0 0 0.1em #ffd438, 0 0 0.13em #ffd438, 0 0 0.2em #ffd438, 0 0 0.3em #ffd438; -moz-box-shadow: 0 0 0.1em #ffd438, 0 0 0.13em #ffd438; -webkit-box-shadow: 0 0 0.25em #ffd438, 0 0 0.25em #ffd438;}
...
124
Tuesday, April 3, 12
Что не так?
Tuesday, April 3, 12
Что не так?!126
Tuesday, April 3, 12
126
Tuesday, April 3, 12
— не пиксель в пиксель
126
Tuesday, April 3, 12
— не пиксель в пиксель
— новая тема
126
Tuesday, April 3, 12
Новая тема127
Tuesday, April 3, 12
Что сделали128
Tuesday, April 3, 12
Что сделали— сверстали в картинках
128
Tuesday, April 3, 12
Что сделали— сверстали в картинках
— написали JavaScript
128
Tuesday, April 3, 12
Что сделали— сверстали в картинках
— написали JavaScript
— сверстали на CSS3
128
Tuesday, April 3, 12
Выводы
Tuesday, April 3, 12
CSS3130
Tuesday, April 3, 12
CSS3— масштабируемость
130
Tuesday, April 3, 12
CSS3— масштабируемость
— меньше разметки
130
Tuesday, April 3, 12
CSS3— масштабируемость
— меньше разметки
— минус запрос
130
Tuesday, April 3, 12
PNG131
Tuesday, April 3, 12
PNG— пиксель в пиксель
131
Tuesday, April 3, 12
PNG— пиксель в пиксель
— создание тем
131
Tuesday, April 3, 12
PNG— пиксель в пиксель
— создание тем
— рендеринг
131
Tuesday, April 3, 12
132
Three years remainingTuesday, April 3, 12