SlideShare a Scribd company logo
1 of 200
Download to read offline
b-form-button.css и b-form-button.js
                       История одной кнопки
                       Елена Глухова                          #БЭМ
                       Варвара Степанова


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



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
14

                  <span>
                          <input type=”submit”/>
                  </span>
                    <span class=”b-form-button”>
                      ...
                        <input class=”b-form-button__input”
                            type=”submit”
                            value=””/>
                       </span>
                                     или

                  <span>
                      <input type=”button”/>
                  </span>

Tuesday, April 3, 12
15

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




Tuesday, April 3, 12
16


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

                  <!-- без <input/> внутри -->



Tuesday, April 3, 12
Верстаем по БЭМ!


Tuesday, April 3, 12
18

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




                       bit.ly/vXZRjx



Tuesday, April 3, 12
19

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




                       bit.ly/HfIAHc



Tuesday, April 3, 12
20

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

                  <span class=”b-form-button”>
                     ...
                  </span>




Tuesday, April 3, 12
21

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

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




Tuesday, April 3, 12
22

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




Tuesday, April 3, 12
23

                Элемент input
                  <span class=”b-form-button”>
                       <span class=”b-form-button”>
                         ...

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


                             type=”submit”
                             value=””/>
                  </span>


Tuesday, April 3, 12
24

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




Tuesday, April 3, 12
25

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

           <span class=”b-form-button”>
              <span class=”b-form-button__left”>
              </span>
               ...
           </span>




Tuesday, April 3, 12
31


                  .b-form-button__left
                  {
                      ...

                       background: no-repeat 0 2px;
                  }



Tuesday, April 3, 12
32

                Правая часть




Tuesday, April 3, 12
33

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




Tuesday, April 3, 12
34

                Середина




Tuesday, April 3, 12
35

                  <span class=”b-form-button”>
                      ...
                     <span class=”b-form-button__content”>
                        Универсальная кнопка
                     </span>
                      ...
                  </span>




Tuesday, April 3, 12
36

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




Tuesday, April 3, 12
37


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




Tuesday, April 3, 12
38

                Размер — это модификатор
                  <span class=”b-form-button
                               b-form-button_size_m”>
                      ...
                  </span>




Tuesday, April 3, 12
39

                  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


Tuesday, April 3, 12
40
             .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;
             }


Tuesday, April 3, 12
41

                Тема — это модификатор
                  <span class=”b-form-button
                               b-form-button_size_m
                               b-form-button_theme_grey-m”>
                      ...
                  </span>




Tuesday, April 3, 12
42




                  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
                        ...


Tuesday, April 3, 12
43

              .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);
              }




Tuesday, April 3, 12
44

                Новая тема




Tuesday, April 3, 12
45

                Состояния — это модификаторы
                  <span class=”b-form-button
                               b-form-button_size_m
                               b-form-button_theme_grey-m




Tuesday, April 3, 12
45

                Состояния — это модификаторы
                  <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”>




Tuesday, April 3, 12
45

                Состояния — это модификаторы
                  <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

Tuesday, April 3, 12
46
                 Несколько состояний одновременно




Tuesday, April 3, 12
46
                 В фокусе




Tuesday, April 3, 12
47
                 В фокусе и наведенная




Tuesday, April 3, 12
48

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

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

                  ...

Tuesday, April 3, 12
49

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

Tuesday, April 3, 12
50
                 Нажатая




                           _pressed_yes
Tuesday, April 3, 12
51

             <span class=”b-form-button ...”>
                 ...
                <span class=”b-form-button__content”>
                   <span class=”b-form-button__text”>
                        Универсальная кнопка
                   </span>
                </span>
                 ...
             </span>

Tuesday, April 3, 12
52
                  .b-form-button_pressed_yes
                  {
                      background-position: 100% -399px;
                  }

                  ...

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


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
57


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




Tuesday, April 3, 12
57


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



Tuesday, April 3, 12
58

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


                       bit.ly/HbUcZT




Tuesday, April 3, 12
59

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


                       bit.ly/HKyEWa

                       bit.ly/nkQbWF


Tuesday, April 3, 12
Особенный JavaScript




Tuesday, April 3, 12
61

               Особенный JavaScript




Tuesday, April 3, 12
61

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




Tuesday, April 3, 12
61

               Особенный JavaScript
                ООП-представление
                       — class & instance
                Предметная область БЭМ
                       — оперируем БЭМ-сущностями
                       — не работаем с CSS-классами и DOM-деревом




Tuesday, April 3, 12
62

               Особенный JavaScript




Tuesday, April 3, 12
62

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




Tuesday, April 3, 12
62

               Особенный JavaScript
                Блок — это
                       — BEM-объект
                        – DOM node
                Хелперы
                       — для работы с модификаторами
                       — для работы со структурой блока
                       — для работы с событиями


Tuesday, April 3, 12
Декларативный стиль




Tuesday, April 3, 12
64

                b-form-button.js




Tuesday, April 3, 12
64

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

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

                  },{




Tuesday, April 3, 12
64

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

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

                  },{

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

                  })

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
71

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

                       onSetMod : {

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

                       }

Tuesday, April 3, 12
72

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

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

Tuesday, April 3, 12
focused




Tuesday, April 3, 12
74
                 В фокусе




                            <input type=”submit”/>




Tuesday, April 3, 12
75

               focused: ‘yes’




Tuesday, April 3, 12
75

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




Tuesday, April 3, 12
75

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




Tuesday, April 3, 12
76
                  BEM.DOM.decl('b-form-button', {
                      onSetMod : {




Tuesday, April 3, 12
76
                  BEM.DOM.decl('b-form-button', {
                      onSetMod : {


                       'focused' : {

                             'yes' : function() {




Tuesday, April 3, 12
76
                  BEM.DOM.decl('b-form-button', {
                      onSetMod : {


                       'focused' : {

                             'yes' : function() {

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

                       }

Tuesday, April 3, 12
77

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


                  hasMod : function(
                               elem, modName, modVal)

Tuesday, April 3, 12
78
                  BEM.DOM.decl('b-form-button', {
                      onSetMod : {


                       'focused' : {

                             'yes' : function() {

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




Tuesday, April 3, 12
79

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


                  bindTo : function(elem, event, fn)

Tuesday, April 3, 12
80
                 В фокусе




                            <input type=”submit”/>




Tuesday, April 3, 12
81
                  BEM.DOM.decl('b-form-button', {
                      onSetMod : {


                       'focused' : {

                             'yes' : function() {

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



Tuesday, April 3, 12
82

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


                  elem : function(
                              names, modName, modVal)
Tuesday, April 3, 12
83
                  BEM.DOM.decl('b-form-button', {
                      onSetMod : {


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

                             '' : function() {

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



Tuesday, April 3, 12
disabled




Tuesday, April 3, 12
85
                 Неактивная




                              <input type=”submit”/>




Tuesday, April 3, 12
86

               disabled: ‘yes’




Tuesday, April 3, 12
86

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




Tuesday, April 3, 12
86

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




Tuesday, April 3, 12
87
                  BEM.DOM.decl('b-form-button', { onSetMod : {


                  'disabled' : function() {

                       var disable = modVal == 'yes';

                       this.elem('input').attr('disabled', disable);




Tuesday, April 3, 12
88




Tuesday, April 3, 12
88
                  BEM.DOM.decl('b-form-button', { onSetMod : {




Tuesday, April 3, 12
88
                  BEM.DOM.decl('b-form-button', { onSetMod : {


                  'disabled' : function() {

                       ...

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




Tuesday, April 3, 12
88
                  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();


Tuesday, April 3, 12
89
                 this.domElem




Tuesday, April 3, 12
89
                 this.domElem




Tuesday, April 3, 12
90

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

                       onSetMod : { ... },

                       isDisabled : function() {

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

                       }

                  })



Tuesday, April 3, 12
pressed и hovered




Tuesday, April 3, 12
92
                 Наведенная и нажатая




Tuesday, April 3, 12
93

               hovered и pressed




Tuesday, April 3, 12
93

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




Tuesday, April 3, 12
93

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




Tuesday, April 3, 12
94

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


                  'pressed' : function() {

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




Tuesday, April 3, 12
95

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


                  trigger : function(e, data)



Tuesday, April 3, 12
96




Tuesday, April 3, 12
97

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


                  'hovered' : {

                       '' : function() {

                             this.delMod('pressed');

                       }


Tuesday, April 3, 12
98

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


                  delMod : function(elem, modName)



Tuesday, April 3, 12
99
                  BEM.DOM.decl('b-form-button', { onSetMod : {


                  '*' : function(modName) {

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

                  }




Tuesday, April 3, 12
live




Tuesday, April 3, 12
live-события




Tuesday, April 3, 12
102

                jQuery.live()




                       bit.ly/6B9eyk



Tuesday, April 3, 12
103
                 Event delegation




Tuesday, April 3, 12
103
                 Event delegation




Tuesday, April 3, 12
103
                 Event delegation




Tuesday, April 3, 12
103
                 Event delegation
                                    handler




Tuesday, April 3, 12
104

                 Event delegation




Tuesday, April 3, 12
104

                 Event delegation
                                    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
108

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

                  {
                       live: function() {

                           /* методы инициализации */

                       }

                  }

Tuesday, April 3, 12
109
                  BEM.DOM.decl('b-form-button', { ... },


                  {
                       live: function() {

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


Tuesday, April 3, 12
110

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


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

Tuesday, April 3, 12
111
                  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 || '');
                       }



Tuesday, April 3, 12
112

                  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' }

                  };




Tuesday, April 3, 12
113




Tuesday, April 3, 12
114

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




                       bit.ly/HfIAHc



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
117

                Модификатор _type
                  b-form-button/
                     _type/




Tuesday, April 3, 12
117

                Модификатор _type
                  b-form-button/
                     _type/
                         b-form-button_type_complex.css




Tuesday, April 3, 12
117

                Модификатор _type
                  b-form-button/
                     _type/
                         b-form-button_type_complex.css
                         b-form-button_type_normal.css




Tuesday, April 3, 12
118

                b-form-button_type_complex.css
          .b-form-button_type_complex.b-form-button_hovered_yes
          {
              background-position: ...
          }

          $block_type_complex.$block_hovered_yes .$block__left
          {
              background-position: ...
          }
          ...
Tuesday, April 3, 12
119

                b-form-button.css
                  .b-form-button
                  {
                      position: relative;

                       display: inline-block;

                       outline: 0;
                       cursor: default;
                       ...

Tuesday, April 3, 12
120

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




Tuesday, April 3, 12
120

                   <span class=”b-form-button
                                b-form-button_type_normal”>




                   </span>


Tuesday, April 3, 12
120

                   <span class=”b-form-button
                                b-form-button_type_normal”>

                       <span class=”b-form-button__text”>
                           Кнопка на css3
                       </span>



                   </span>


Tuesday, April 3, 12
120

                   <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>


Tuesday, April 3, 12
121

                b-form-button_type_normal.css




Tuesday, April 3, 12
121
      .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;
      }

Tuesday, April 3, 12
122

                Тема для css3
                  b-form-button/
                     _theme/
                        b-form-button_theme_normal-grey.css
                        ...




Tuesday, April 3, 12
123




Tuesday, April 3, 12
124

                b-form-button_theme_normal-grey.css




Tuesday, April 3, 12
124
                  .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;
                  }

                  ...



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
128

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




Tuesday, April 3, 12
128

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




Tuesday, April 3, 12
Выводы


Tuesday, April 3, 12
130

               CSS3




Tuesday, April 3, 12
130

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




Tuesday, April 3, 12
130

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




Tuesday, April 3, 12
130

               CSS3
                — масштабируемость
                — меньше разметки
                — минус запрос




Tuesday, April 3, 12
131

               PNG




Tuesday, April 3, 12
131

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




Tuesday, April 3, 12
131

               PNG
                — пиксель в пиксель
                — создание тем




Tuesday, April 3, 12
131

               PNG
                — пиксель в пиксель
                — создание тем
                — рендеринг




Tuesday, April 3, 12
132




                       Three years remaining
Tuesday, April 3, 12
Варвара Степанова
                       toivonen@yandex-team.ru

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




Tuesday, April 3, 12

More Related Content

More from Ontico

One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...
One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...
One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...Ontico
 
Масштабируя DNS / Артем Гавриченков (Qrator Labs)
Масштабируя DNS / Артем Гавриченков (Qrator Labs)Масштабируя DNS / Артем Гавриченков (Qrator Labs)
Масштабируя DNS / Артем Гавриченков (Qrator Labs)Ontico
 
Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)
Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)
Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)Ontico
 
Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...
Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...
Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...Ontico
 
Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...
Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...
Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...Ontico
 
PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)
PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)
PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)Ontico
 
Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...
Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...
Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...Ontico
 
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Ontico
 
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)Ontico
 
MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)Ontico
 
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...Ontico
 
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...Ontico
 
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...Ontico
 
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)Ontico
 
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)Ontico
 
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)Ontico
 
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Ontico
 
100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...Ontico
 
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...Ontico
 
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...Ontico
 

More from Ontico (20)

One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...
One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...
One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...
 
Масштабируя DNS / Артем Гавриченков (Qrator Labs)
Масштабируя DNS / Артем Гавриченков (Qrator Labs)Масштабируя DNS / Артем Гавриченков (Qrator Labs)
Масштабируя DNS / Артем Гавриченков (Qrator Labs)
 
Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)
Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)
Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)
 
Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...
Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...
Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...
 
Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...
Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...
Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...
 
PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)
PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)
PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)
 
Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...
Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...
Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...
 
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...
 
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)
 
MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)MySQL Replication — Advanced Features / Петр Зайцев (Percona)
MySQL Replication — Advanced Features / Петр Зайцев (Percona)
 
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
Внутренний open-source. Как разрабатывать мобильное приложение большим количе...
 
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...
 
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...
 
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)
 
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)
 
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)
 
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
 
100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...100500 способов кэширования в Oracle Database или как достичь максимальной ск...
100500 способов кэширования в Oracle Database или как достичь максимальной ск...
 
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...
 
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...
 

История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)

  • 1. b-form-button.css и b-form-button.js История одной кнопки Елена Глухова #БЭМ Варвара Степанова РИТ-2012, Москва, 2 апреля 2012 года Tuesday, April 3, 12
  • 3. 3 Цветовая адаптация Tuesday, April 3, 12
  • 6. 6 Все сервисы Tuesday, April 3, 12
  • 7. 6 Все сервисы браузеры Tuesday, April 3, 12
  • 8. 6 Все сервисы операционные системы браузеры Tuesday, April 3, 12
  • 9. 7 Браузеры Tuesday, April 3, 12
  • 10. 8 Цветовая адаптация Tuesday, April 3, 12
  • 11. 8 Цветовая адаптация Tuesday, April 3, 12
  • 12. 9 Все состояния Tuesday, April 3, 12
  • 13. 9 Все состояния Tuesday, April 3, 12
  • 14. 9 Все состояния Tuesday, April 3, 12
  • 15. 9 Все состояния Tuesday, April 3, 12
  • 16. 9 Все состояния Tuesday, April 3, 12
  • 17. 10 Кнопка в тексте Скачать Яндекс.Навигатор Tuesday, April 3, 12
  • 18. 11 Темы Tuesday, April 3, 12
  • 20. 13 Элемент формы Tuesday, April 3, 12
  • 21. 14 <span> <input type=”submit”/> </span> <span class=”b-form-button”> ... <input class=”b-form-button__input” type=”submit” value=””/> </span> или <span> <input type=”button”/> </span> Tuesday, April 3, 12
  • 22. 15 Ссылка Скачать Яндекс.Навигатор Tuesday, April 3, 12
  • 23. 16 <a href=”ya.ru”> ... </a> <!-- без <input/> внутри --> Tuesday, April 3, 12
  • 25. 18 Что такое БЭМ? bit.ly/vXZRjx Tuesday, April 3, 12
  • 26. 19 Репозиторий с кнопкой на bit.ly/HfIAHc Tuesday, April 3, 12
  • 27. 20 Кнопка это блок <span class=”b-form-button”> ... </span> Tuesday, April 3, 12
  • 28. 21 Блок на файловой системе b-form-button/ b-form-button.css Tuesday, April 3, 12
  • 29. 22 Элемент формы Tuesday, April 3, 12
  • 30. 23 Элемент input <span class=”b-form-button”> <span class=”b-form-button”> ... ... <input class=”b-form-button__input” type=”submit” value=””/> <input class=”b-form-button__input” </span> type=”submit” value=””/> </span> Tuesday, April 3, 12
  • 31. 24 b-form-button/ b-form-button.css __input/ b-form-button__input.css Tuesday, April 3, 12
  • 32. 25 .b-form-button__input { opacity: 0; ... /* визуально прячем инпут и натягиваем его поверх всей кнопки */ } Tuesday, April 3, 12
  • 34. 27 Идея в картинках Tuesday, April 3, 12
  • 42. 28 Режем на кусочки Tuesday, April 3, 12
  • 43. 29 Левая часть Tuesday, April 3, 12
  • 44. 30 <span class=”b-form-button”> <span class=”b-form-button__left”> </span> ... </span> Tuesday, April 3, 12
  • 45. 31 .b-form-button__left { ... background: no-repeat 0 2px; } Tuesday, April 3, 12
  • 46. 32 Правая часть Tuesday, April 3, 12
  • 47. 33 .b-form-button { ... /* background-image задаётся в _theme */ background-repeat: no-repeat; background-position: 100% -55px; } Tuesday, April 3, 12
  • 48. 34 Середина Tuesday, April 3, 12
  • 49. 35 <span class=”b-form-button”> ... <span class=”b-form-button__content”> Универсальная кнопка </span> ... </span> Tuesday, April 3, 12
  • 50. 36 .b-form-button__content { ... /* background-image задаётся в _theme */ background: repeat-x 0 -112px; } Tuesday, April 3, 12
  • 51. 37 Размер имеет значение Tuesday, April 3, 12
  • 52. 38 Размер — это модификатор <span class=”b-form-button b-form-button_size_m”> ... </span> Tuesday, April 3, 12
  • 53. 39 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 Tuesday, April 3, 12
  • 54. 40 .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; } Tuesday, April 3, 12
  • 55. 41 Тема — это модификатор <span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m”> ... </span> Tuesday, April 3, 12
  • 56. 42 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 ... Tuesday, April 3, 12
  • 57. 43 .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); } Tuesday, April 3, 12
  • 58. 44 Новая тема Tuesday, April 3, 12
  • 59. 45 Состояния — это модификаторы <span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m Tuesday, April 3, 12
  • 60. 45 Состояния — это модификаторы <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”> Tuesday, April 3, 12
  • 61. 45 Состояния — это модификаторы <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 Tuesday, April 3, 12
  • 62. 46 Несколько состояний одновременно Tuesday, April 3, 12
  • 63. 46 В фокусе Tuesday, April 3, 12
  • 64. 47 В фокусе и наведенная Tuesday, April 3, 12
  • 65. 48 .b-form-button_focused_yes { background-position: 100% -570px; } .b-form-button_focused_yes .b-form-button__left { background-position: 0 -513px; } ... Tuesday, April 3, 12
  • 66. 49 b-form-button/ _theme/ _size/ _hovered/ _focused/ _pressed/ _disabled/ ... Tuesday, April 3, 12
  • 67. 50 Нажатая _pressed_yes Tuesday, April 3, 12
  • 68. 51 <span class=”b-form-button ...”> ... <span class=”b-form-button__content”> <span class=”b-form-button__text”> Универсальная кнопка </span> </span> ... </span> Tuesday, April 3, 12
  • 69. 52 .b-form-button_pressed_yes { background-position: 100% -399px; } ... .b-form-button_pressed_yes .b-form-button__text { padding-top: 1px; } Tuesday, April 3, 12
  • 70. 53 Результат Tuesday, April 3, 12
  • 72. 55 Требования к функциональности Различные состояния кнопки — фокус и наведение мыши — нажатость — неактивность Tuesday, April 3, 12
  • 73. 56 Как браузерный контрол Tuesday, April 3, 12
  • 74. 56 Как браузерный контрол — управление с клавиатуры Tuesday, April 3, 12
  • 75. 56 Как браузерный контрол — управление с клавиатуры — события Tuesday, April 3, 12
  • 76. 56 Как браузерный контрол — управление с клавиатуры — события — неактивная Tuesday, April 3, 12
  • 77. 57 b-form-button/ ... b-form-button.css Tuesday, April 3, 12
  • 78. 57 b-form-button/ ... b-form-button.css b-form-button.js Tuesday, April 3, 12
  • 79. 58 Документация к блоку i-bem bit.ly/HbUcZT Tuesday, April 3, 12
  • 80. 59 Мастер-классы про JavaScript bit.ly/HKyEWa bit.ly/nkQbWF Tuesday, April 3, 12
  • 82. 61 Особенный JavaScript Tuesday, April 3, 12
  • 83. 61 Особенный JavaScript ООП-представление — class & instance Tuesday, April 3, 12
  • 84. 61 Особенный JavaScript ООП-представление — class & instance Предметная область БЭМ — оперируем БЭМ-сущностями — не работаем с CSS-классами и DOM-деревом Tuesday, April 3, 12
  • 85. 62 Особенный JavaScript Tuesday, April 3, 12
  • 86. 62 Особенный JavaScript Блок — это — BEM-объект – DOM node Tuesday, April 3, 12
  • 87. 62 Особенный JavaScript Блок — это — BEM-объект – DOM node Хелперы — для работы с модификаторами — для работы со структурой блока — для работы с событиями Tuesday, April 3, 12
  • 89. 64 b-form-button.js Tuesday, April 3, 12
  • 90. 64 b-form-button.js BEM.DOM.decl('b-form-button', { /* Динамические свойства и методы */ },{ Tuesday, April 3, 12
  • 91. 64 b-form-button.js BEM.DOM.decl('b-form-button', { /* Динамические свойства и методы */ },{ /* Статические свойства и методы */ }) Tuesday, April 3, 12
  • 97. 70 JavaScript Tuesday, April 3, 12
  • 98. 71 BEM.DOM.decl('b-form-button', { onSetMod : { 'mod' : function() { // Реакция на установку // модификатора } } Tuesday, April 3, 12
  • 99. 72 BEM.DOM.decl('b-form-button', { onSetMod : { 'mod' : { 'val' : function() { // Реакция на установку // значения модификатора } } } Tuesday, April 3, 12
  • 101. 74 В фокусе <input type=”submit”/> Tuesday, April 3, 12
  • 102. 75 focused: ‘yes’ Tuesday, April 3, 12
  • 103. 75 focused: ‘yes’ — Связь с браузерным контролом input — в фокусе Tuesday, April 3, 12
  • 104. 75 focused: ‘yes’ — Связь с браузерным контролом input — в фокусе — Неактивная кнопка — без фокуса Tuesday, April 3, 12
  • 105. 76 BEM.DOM.decl('b-form-button', { onSetMod : { Tuesday, April 3, 12
  • 106. 76 BEM.DOM.decl('b-form-button', { onSetMod : { 'focused' : { 'yes' : function() { Tuesday, April 3, 12
  • 107. 76 BEM.DOM.decl('b-form-button', { onSetMod : { 'focused' : { 'yes' : function() { if(this.hasMod('disabled', 'yes')) return false; } } Tuesday, April 3, 12
  • 108. 77 /** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @param {String} [modVal] значение модификатора * @returns {Boolean} */ hasMod : function( elem, modName, modVal) Tuesday, April 3, 12
  • 109. 78 BEM.DOM.decl('b-form-button', { onSetMod : { 'focused' : { 'yes' : function() { ... this .bindTo('keydown', this._onKeyDown) Tuesday, April 3, 12
  • 110. 79 /** * @protected * @param {jQuery|String} [elem] элемент * @param {String} event имя события * @param {Function} fn функция-обработчик, будет выполнена в контексте блока * @returns {BEM} */ bindTo : function(elem, event, fn) Tuesday, April 3, 12
  • 111. 80 В фокусе <input type=”submit”/> Tuesday, April 3, 12
  • 112. 81 BEM.DOM.decl('b-form-button', { onSetMod : { 'focused' : { 'yes' : function() { ... this .bindTo('keydown', this._onKeyDown) .elem('input').focus(); Tuesday, April 3, 12
  • 113. 82 /** * @protected * @param {String} names имя (или через пробел имена) вложенных элементов * @param {String} [modName] имя модификатора * @param {String} [modVal] значение модификатора * @returns {jQuery} DOM-элементы */ elem : function( names, modName, modVal) Tuesday, April 3, 12
  • 114. 83 BEM.DOM.decl('b-form-button', { onSetMod : { 'focused' : { 'yes': ..., '' : function() { this .unbindFrom('keydown') .elem('input').blur(); Tuesday, April 3, 12
  • 116. 85 Неактивная <input type=”submit”/> Tuesday, April 3, 12
  • 117. 86 disabled: ‘yes’ Tuesday, April 3, 12
  • 118. 86 disabled: ‘yes’ — Отсутствие реакции Tuesday, April 3, 12
  • 119. 86 disabled: ‘yes’ — Отсутствие реакции — Связь с браузерным контролом input — disabled Tuesday, April 3, 12
  • 120. 87 BEM.DOM.decl('b-form-button', { onSetMod : { 'disabled' : function() { var disable = modVal == 'yes'; this.elem('input').attr('disabled', disable); Tuesday, April 3, 12
  • 122. 88 BEM.DOM.decl('b-form-button', { onSetMod : { Tuesday, April 3, 12
  • 123. 88 BEM.DOM.decl('b-form-button', { onSetMod : { 'disabled' : function() { ... this._href && (disable? this.domElem.removeAttr('href') : this.domElem.attr('href', this._href)); Tuesday, April 3, 12
  • 124. 88 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(); Tuesday, April 3, 12
  • 125. 89 this.domElem Tuesday, April 3, 12
  • 126. 89 this.domElem Tuesday, April 3, 12
  • 127. 90 BEM.DOM.decl('b-form-button', { onSetMod : { ... }, isDisabled : function() { return this.hasMod('disabled', 'yes'); } }) Tuesday, April 3, 12
  • 129. 92 Наведенная и нажатая Tuesday, April 3, 12
  • 130. 93 hovered и pressed Tuesday, April 3, 12
  • 131. 93 hovered и pressed — С событиями Tuesday, April 3, 12
  • 132. 93 hovered и pressed — С событиями — Не для неактивной кнопки Tuesday, April 3, 12
  • 133. 94 BEM.DOM.decl('b-form-button', { onSetMod : { 'pressed' : function() { this.isDisabled() || this.trigger(modVal == 'yes'? 'press' : 'release'); Tuesday, April 3, 12
  • 134. 95 /** * @protected * @param {String} e имя события * @param {Object} [data] дополнительные данные * @returns {BEM} */ trigger : function(e, data) Tuesday, April 3, 12
  • 136. 97 BEM.DOM.decl('b-form-button', { onSetMod : { 'hovered' : { '' : function() { this.delMod('pressed'); } Tuesday, April 3, 12
  • 137. 98 /** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @returns {BEM} */ delMod : function(elem, modName) Tuesday, April 3, 12
  • 138. 99 BEM.DOM.decl('b-form-button', { onSetMod : { '*' : function(modName) { if(this.isDisabled() && 'hovered pressed'.indexOf(modName) > -1) return false; } Tuesday, April 3, 12
  • 141. 102 jQuery.live() bit.ly/6B9eyk Tuesday, April 3, 12
  • 142. 103 Event delegation Tuesday, April 3, 12
  • 143. 103 Event delegation Tuesday, April 3, 12
  • 144. 103 Event delegation Tuesday, April 3, 12
  • 145. 103 Event delegation handler Tuesday, April 3, 12
  • 146. 104 Event delegation Tuesday, April 3, 12
  • 147. 104 Event delegation handler Tuesday, April 3, 12
  • 153. 108 BEM.DOM.decl('b-form-button', { ... }, { live: function() { /* методы инициализации */ } } Tuesday, April 3, 12
  • 154. 109 BEM.DOM.decl('b-form-button', { ... }, { live: function() { this .liveBindTo('leftclick', function(e) { this._onClick(e); }) } } Tuesday, April 3, 12
  • 155. 110 /** * @static * @protected * @param {String|Object} [to] описание * @param {String} event имя события * @param {Function} callback обработчик */ liveBindTo : function(to, event, callback, invokeOnInit) Tuesday, April 3, 12
  • 156. 111 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 || ''); } Tuesday, April 3, 12
  • 157. 112 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' } }; Tuesday, April 3, 12
  • 159. 114 Репозиторий с кнопкой на bit.ly/HfIAHc Tuesday, April 3, 12
  • 161. 116 Все меняется Tuesday, April 3, 12
  • 165. 117 Модификатор _type b-form-button/ _type/ Tuesday, April 3, 12
  • 166. 117 Модификатор _type b-form-button/ _type/ b-form-button_type_complex.css Tuesday, April 3, 12
  • 167. 117 Модификатор _type b-form-button/ _type/ b-form-button_type_complex.css b-form-button_type_normal.css Tuesday, April 3, 12
  • 168. 118 b-form-button_type_complex.css .b-form-button_type_complex.b-form-button_hovered_yes { background-position: ... } $block_type_complex.$block_hovered_yes .$block__left { background-position: ... } ... Tuesday, April 3, 12
  • 169. 119 b-form-button.css .b-form-button { position: relative; display: inline-block; outline: 0; cursor: default; ... Tuesday, April 3, 12
  • 170. 120 Меньше разметки Tuesday, April 3, 12
  • 171. 120 <span class=”b-form-button b-form-button_type_normal”> </span> Tuesday, April 3, 12
  • 172. 120 <span class=”b-form-button b-form-button_type_normal”> <span class=”b-form-button__text”> Кнопка на css3 </span> </span> Tuesday, April 3, 12
  • 173. 120 <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> Tuesday, April 3, 12
  • 174. 121 b-form-button_type_normal.css Tuesday, April 3, 12
  • 175. 121 .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; } Tuesday, April 3, 12
  • 176. 122 Тема для css3 b-form-button/ _theme/ b-form-button_theme_normal-grey.css ... Tuesday, April 3, 12
  • 178. 124 b-form-button_theme_normal-grey.css Tuesday, April 3, 12
  • 179. 124 .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; } ... Tuesday, April 3, 12
  • 181. 126 Что не так?! Tuesday, April 3, 12
  • 183. 126 — не пиксель в пиксель Tuesday, April 3, 12
  • 184. 126 — не пиксель в пиксель — новая тема Tuesday, April 3, 12
  • 185. 127 Новая тема Tuesday, April 3, 12
  • 186. 128 Что сделали Tuesday, April 3, 12
  • 187. 128 Что сделали — сверстали в картинках Tuesday, April 3, 12
  • 188. 128 Что сделали — сверстали в картинках — написали JavaScript Tuesday, April 3, 12
  • 189. 128 Что сделали — сверстали в картинках — написали JavaScript — сверстали на CSS3 Tuesday, April 3, 12
  • 191. 130 CSS3 Tuesday, April 3, 12
  • 192. 130 CSS3 — масштабируемость Tuesday, April 3, 12
  • 193. 130 CSS3 — масштабируемость — меньше разметки Tuesday, April 3, 12
  • 194. 130 CSS3 — масштабируемость — меньше разметки — минус запрос Tuesday, April 3, 12
  • 195. 131 PNG Tuesday, April 3, 12
  • 196. 131 PNG — пиксель в пиксель Tuesday, April 3, 12
  • 197. 131 PNG — пиксель в пиксель — создание тем Tuesday, April 3, 12
  • 198. 131 PNG — пиксель в пиксель — создание тем — рендеринг Tuesday, April 3, 12
  • 199. 132 Three years remaining Tuesday, April 3, 12
  • 200. Варвара Степанова toivonen@yandex-team.ru Елена Глухова lento4ka@yandex-team.ru Tuesday, April 3, 12