История одной кнопки или b-form-button.css и b-form-button.js (Елена...

РИТ-2012, Москва, 2 апреля 2012 года

Елена ГлуховаВарвара Степанова

b-form-button.css и b-form-button.jsИстория одной кнопки

#БЭМ

Tuesday, April 3, 12

2


3

Цветовая адаптация


4


Что и Зачем?


Все сервисы6



Все браузеры



Все браузерыВсе операционные системы


Браузеры7


8

Цветовая адаптация


9

Все состояния


Скачать Яндекс.Навигатор

Кнопка в тексте10


Темы11


Анатомия


Элемент формы13


... <input class=”b-form-button__input” type=”submit” value=””/>

 <input type=”submit”/>

или

 <input type=”button”/>

14

Скачать Яндекс.Навигатор

Ссылка15


<a href=”ya.ru”> ...</a>



16

Верстаем по БЭМ!


bit.ly/vXZRjx

Что такое БЭМ?18


http://bit.ly/vXZRjx

http://bit.ly/vXZRjx

bit.ly/HfIAHc

Репозиторий с кнопкой на 19


http://bit.ly/HfIAHc


...

Кнопка это блок20

b-form-button/ b-form-button.css

Блок на файловой системе21


Элемент формы22




Элемент input23


b-form-button/ b-form-button.css __input/ b-form-button__input.css

24


.b-form-button__input{ opacity: 0; .../* визуально прячем инпут и натягиваем его поверх всей кнопки*/}

25


26


Идея в картинках27


27


Режем на кусочки28


Левая часть29


...

30

.b-form-button__left{ ...

background: no-repeat 0 2px; }

31


Правая часть32


.b-form-button{ ... /* background-image задаётся в _theme */ background-repeat: no-repeat; background-position: 100% -55px;}

33


Середина34


... Универсальная кнопка ...

35

.b-form-button__content{ .../* background-image задаётся в _theme */ background: repeat-x 0 -112px;}

36


Размер имеет значение37


...

Размер — это модификатор38

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


.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


...

Тема — это модификатор41

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


.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


Новая тема44


<span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m

Состояния — это модификаторы45

...

Важно: Состояния переключает JavaScript

Несколько состояний одновременно46


В фокусе46


47

В фокусе и наведенная


.b-form-button_focused_yes{ background-position: 100% -570px;}

.b-form-button_focused_yes .b-form-button__left{ background-position: 0 -513px;}

...

48


b-form-button/ _theme/ _size/ _hovered/ _focused/ _pressed/ _disabled/ ...

49


Нажатая50

_pressed_yesTuesday, April 3, 12

... Универсальная кнопка ...

51

.b-form-button_pressed_yes{ background-position: 100% -399px;}

...

.b-form-button_pressed_yes .b-form-button__text{ padding-top: 1px;}

52


Результат53


b-form-button.js


Требования к функциональностиРазличные состояния кнопки

— фокус и наведение мыши

— нажатость

— неактивность

55


Как браузерный контрол56


Как браузерный контрол

— управление с клавиатуры

56



— управление с клавиатуры— события

56



— управление с клавиатуры— события— неактивная

56


b-form-button/ ... b-form-button.css

57


b-form-button/ ... b-form-button.css b-form-button.js

57


bit.ly/HbUcZT

Документация к блоку i-bem58


http://clck.ru/KzEJ

http://clck.ru/KzEJ

http://bit.ly/HbUcZT

http://bit.ly/HbUcZT

bit.ly/HKyEWa

bit.ly/nkQbWF

Мастер-классы про JavaScript59


http://bit.ly/HKyEWa

http://bit.ly/HKyEWa

http://bit.ly/nkQbWF

http://bit.ly/nkQbWF

Особенный JavaScript


Особенный JavaScript61


Особенный JavaScriptООП-представление— class & instance

61


Особенный JavaScriptООП-представление— class & instance

Предметная область БЭМ—оперируем БЭМ-сущностями— не работаем с CSS-классами и DOM-деревом

61


Особенный JavaScript62


Особенный JavaScriptБлок — это— BEM-объект– DOM node

62


Особенный JavaScriptБлок — это— BEM-объект– DOM node

Хелперы— для работы с модификаторами

— для работы со структурой блока

— для работы с событиями

62


Декларативный стиль


b-form-button.js64


BEM.DOM.decl('b-form-button', {

/* Динамические свойства и методы */

},{

b-form-button.js64



/* Динамические свойства и методы */

},{

/* Статические свойства и методы */

})

b-form-button.js64


На языке состояний


На языке модификаторов


67


68


69


70

JavaScript



onSetMod : {

'mod' : function() { // Реакция на установку // модификатора }

}

71



onSetMod : { 'mod' : { 'val' : function() { // Реакция на установку // значения модификатора } } }

72


focused


В фокусе74

<input type=”submit”/>

focused: ‘yes’75


focused: ‘yes’— Связь с браузерным контролом

input — в фокусе

75


focused: ‘yes’— Связь с браузерным контролом

input — в фокусе— Неактивная кнопка — без фокуса

75


BEM.DOM.decl('b-form-button', { onSetMod : {

76



'focused' : {

'yes' : function() {

76



'focused' : {


if(this.hasMod('disabled', 'yes')) return false; }

}

76


/** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @param {String} [modVal] значение модификатора * @returns {Boolean} */

hasMod : function( elem, modName, modVal)

77



'focused' : {


... this .bindTo('keydown', this._onKeyDown)

78


/** * @protected * @param {jQuery|String} [elem] элемент * @param {String} event имя события * @param {Function} fn функция-обработчик, будет выполнена в контексте блока * @returns {BEM} */

bindTo : function(elem, event, fn)

79


В фокусе80




'focused' : {


... this .bindTo('keydown', this._onKeyDown) .elem('input').focus();

81


/** * @protected * @param {String} names имя (или через пробел имена) вложенных элементов * @param {String} [modName] имя модификатора * @param {String} [modVal] значение модификатора * @returns {jQuery} DOM-элементы */

elem : function( names, modName, modVal)

82



'focused' : { 'yes': ...,

'' : function() {

this .unbindFrom('keydown') .elem('input').blur();

83


disabled


Неактивная85



disabled: ‘yes’86


disabled: ‘yes’— Отсутствие реакции

86


disabled: ‘yes’— Отсутствие реакции— Связь с браузерным контролом

input — disabled

86



'disabled' : function() {

var disable = modVal == 'yes'; this.elem('input').attr('disabled', disable);

87


88


BEM.DOM.decl('b-form-button', { onSetMod : {88




...

this._href && (disable? this.domElem.removeAttr('href') : this.domElem.attr('href', this._href));

88




...

this._href && (disable? this.domElem.removeAttr('href') : this.domElem.attr('href', this._href));

disable && this.domElem.keyup();

88


89

this.domElem



onSetMod : { ... },

isDisabled : function() {

return this.hasMod('disabled', 'yes');

}

})

90


pressed и hovered


Наведенная и нажатая92


hovered и pressed93


hovered и pressed— С событиями

93


hovered и pressed— С событиями— Не для неактивной кнопки

93



'pressed' : function() {

this.isDisabled() || this.trigger(modVal == 'yes'? 'press' : 'release');

94


/** * @protected * @param {String} e имя события * @param {Object} [data] дополнительные данные * @returns {BEM} */

trigger : function(e, data)

95


96



'hovered' : {

'' : function() {

this.delMod('pressed');

}

97


/** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @returns {BEM} */

delMod : function(elem, modName)

98



'*' : function(modName) {

if(this.isDisabled() && 'hovered pressed'.indexOf(modName) > -1) return false;

}

99


live


live-события


bit.ly/6B9eyk

jQuery.live()102


http://bit.ly/6B9eyk

http://bit.ly/6B9eyk

Event delegation103


Event delegation103

handler


Event delegation104


Event delegation104

handler


105


106


live-инициализация


BEM.DOM.decl('b-form-button', { ... },

{ live: function() { /* методы инициализации */

}

}

108


BEM.DOM.decl('b-form-button', { ... },

{ live: function() { this .liveBindTo('leftclick', function(e) { this._onClick(e); }) }}

109


/** * @static * @protected * @param {String|Object} [to] описание * @param {String} event имя события * @param {Function} callback обработчик */

liveBindTo : function(to, event, callback, invokeOnInit)

110


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


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


113


bit.ly/HfIAHc

Репозиторий с кнопкой на 114




Реализация CSS3


116

Все меняется


116


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/ b-form-button_type_complex.css b-form-button_type_normal.css


.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


.b-form-button{ position: relative;

display: inline-block;

outline: 0; cursor: default; ...

b-form-button.css119


Меньше разметки120


120

Кнопка на css3 



120

<input class=”b-form-button__input”/>

120

b-form-button_type_normal.css121


.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


b-form-button/ _theme/ b-form-button_theme_normal-grey.css ...

Тема для css3122


123


b-form-button_theme_normal-grey.css124


.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


Что не так?


Что не так?!126


126


— не пиксель в пиксель

126


— не пиксель в пиксель

— новая тема

126


Новая тема127


Что сделали128


Что сделали— сверстали в картинках

128



— написали JavaScript

128



— написали JavaScript

— сверстали на CSS3

128


Выводы


CSS3130


CSS3— масштабируемость

130



— меньше разметки

130



— меньше разметки

— минус запрос

130


PNG131


PNG— пиксель в пиксель

131



— создание тем

131



— создание тем

— рендеринг

131


132

Three years remainingTuesday, April 3, 12

Варвара Степанова[email protected]

Елена Глухова[email protected]


mailto:[email protected]




История одной кнопки или b-form-button.css и b-form-button.js (Елена...

Documents

button bform

input bform

px padding

px lineheight