Your SlideShare is downloading. ×
0
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,609

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,609
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. b-form-button.css и b-form-button.js История одной кнопки Елена Глухова #БЭМ Варвара Степанова РИТ-2012, Москва, 2 апреля 2012 годаTuesday, April 3, 12
  • 2. 2Tuesday, April 3, 12
  • 3. 3 Цветовая адаптацияTuesday, April 3, 12
  • 4. 4Tuesday, April 3, 12
  • 5. Что и Зачем?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
  • 19. Анатомия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
  • 24. Верстаем по БЭМ!Tuesday, April 3, 12
  • 25. 18 Что такое БЭМ? bit.ly/vXZRjxTuesday, April 3, 12
  • 26. 19 Репозиторий с кнопкой на bit.ly/HfIAHcTuesday, April 3, 12
  • 27. 20 Кнопка это блок <span class=”b-form-button”> ... </span>Tuesday, April 3, 12
  • 28. 21 Блок на файловой системе b-form-button/ b-form-button.cssTuesday, 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.cssTuesday, April 3, 12
  • 32. 25 .b-form-button__input { opacity: 0; ... /* визуально прячем инпут и натягиваем его поверх всей кнопки */ }Tuesday, April 3, 12
  • 33. 26Tuesday, April 3, 12
  • 34. 27 Идея в картинкахTuesday, April 3, 12
  • 35. 27Tuesday, April 3, 12
  • 36. 27Tuesday, April 3, 12
  • 37. 27Tuesday, April 3, 12
  • 38. 27Tuesday, April 3, 12
  • 39. 27Tuesday, April 3, 12
  • 40. 27Tuesday, April 3, 12
  • 41. 27Tuesday, 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.cssTuesday, 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-mTuesday, 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”> ... Важно: Состояния переключает JavaScriptTuesday, 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_yesTuesday, 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
  • 71. b-form-button.jsTuesday, 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.cssTuesday, April 3, 12
  • 78. 57 b-form-button/ ... b-form-button.css b-form-button.jsTuesday, April 3, 12
  • 79. 58 Документация к блоку i-bem bit.ly/HbUcZTTuesday, April 3, 12
  • 80. 59 Мастер-классы про JavaScript bit.ly/HKyEWa bit.ly/nkQbWFTuesday, April 3, 12
  • 81. Особенный JavaScriptTuesday, April 3, 12
  • 82. 61 Особенный JavaScriptTuesday, April 3, 12
  • 83. 61 Особенный JavaScript ООП-представление — class & instanceTuesday, April 3, 12
  • 84. 61 Особенный JavaScript ООП-представление — class & instance Предметная область БЭМ — оперируем БЭМ-сущностями — не работаем с CSS-классами и DOM-деревомTuesday, April 3, 12
  • 85. 62 Особенный JavaScriptTuesday, April 3, 12
  • 86. 62 Особенный JavaScript Блок — это — BEM-объект – DOM nodeTuesday, April 3, 12
  • 87. 62 Особенный JavaScript Блок — это — BEM-объект – DOM node Хелперы — для работы с модификаторами — для работы со структурой блока — для работы с событиямиTuesday, April 3, 12
  • 88. Декларативный стильTuesday, April 3, 12
  • 89. 64 b-form-button.jsTuesday, 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
  • 92. На языке состоянийTuesday, April 3, 12
  • 93. На языке модификаторовTuesday, April 3, 12
  • 94. 67Tuesday, April 3, 12
  • 95. 68Tuesday, April 3, 12
  • 96. 69Tuesday, April 3, 12
  • 97. 70 JavaScriptTuesday, 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
  • 100. focusedTuesday, 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
  • 115. disabledTuesday, 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 — disabledTuesday, 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
  • 121. 88Tuesday, 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.domElemTuesday, April 3, 12
  • 126. 89 this.domElemTuesday, April 3, 12
  • 127. 90 BEM.DOM.decl(b-form-button, { onSetMod : { ... }, isDisabled : function() { return this.hasMod(disabled, yes); } })Tuesday, April 3, 12
  • 128. pressed и hoveredTuesday, April 3, 12
  • 129. 92 Наведенная и нажатаяTuesday, April 3, 12
  • 130. 93 hovered и pressedTuesday, 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
  • 135. 96Tuesday, 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
  • 139. liveTuesday, April 3, 12
  • 140. live-событияTuesday, April 3, 12
  • 141. 102 jQuery.live() bit.ly/6B9eykTuesday, April 3, 12
  • 142. 103 Event delegationTuesday, April 3, 12
  • 143. 103 Event delegationTuesday, April 3, 12
  • 144. 103 Event delegationTuesday, April 3, 12
  • 145. 103 Event delegation handlerTuesday, April 3, 12
  • 146. 104 Event delegationTuesday, April 3, 12
  • 147. 104 Event delegation handlerTuesday, April 3, 12
  • 148. 105Tuesday, April 3, 12
  • 149. 105Tuesday, April 3, 12
  • 150. 106Tuesday, April 3, 12
  • 151. 106Tuesday, April 3, 12
  • 152. live-инициализация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
  • 158. 113Tuesday, April 3, 12
  • 159. 114 Репозиторий с кнопкой на bit.ly/HfIAHcTuesday, April 3, 12
  • 160. Реализация CSS3Tuesday, April 3, 12
  • 161. 116 Все меняетсяTuesday, April 3, 12
  • 162. 116Tuesday, April 3, 12
  • 163. 116Tuesday, April 3, 12
  • 164. 116Tuesday, 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.cssTuesday, April 3, 12
  • 167. 117 Модификатор _type b-form-button/ _type/ b-form-button_type_complex.css b-form-button_type_normal.cssTuesday, 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.cssTuesday, 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
  • 177. 123Tuesday, April 3, 12
  • 178. 124 b-form-button_theme_normal-grey.cssTuesday, 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
  • 180. Что не так?Tuesday, April 3, 12
  • 181. 126 Что не так?!Tuesday, April 3, 12
  • 182. 126Tuesday, 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 Что сделали — сверстали в картинках — написали JavaScriptTuesday, April 3, 12
  • 189. 128 Что сделали — сверстали в картинках — написали JavaScript — сверстали на CSS3Tuesday, April 3, 12
  • 190. ВыводыTuesday, April 3, 12
  • 191. 130 CSS3Tuesday, 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 PNGTuesday, 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 remainingTuesday, April 3, 12
  • 200. Варвара Степанова toivonen@yandex-team.ru Елена Глухова lento4ka@yandex-team.ruTuesday, April 3, 12

×