Мастер-класс наоборот: вы пишете БЭМ-проект, а мы...
-
Upload
yandex -
Category
Technology
-
view
569 -
download
7
description
Transcript of Мастер-класс наоборот: вы пишете БЭМ-проект, а мы...
- 1. - : -, , BEMup -, 6 2014
2. [email protected]@dabelitskygithub.com/dab 3. [email protected]@sipayrtgithub.com/sipayrt 4. ?5 5. ?5 6. ? 5 7. ? JavaScript + BEM5 8. ? JavaScript + BEM -5 9. !?6 10. ? 11. ?8 12. ? 8 13. ? , 8 14. ? , , 8 15. ? bem.info bit.ly/1hMHNB2 -bit.ly/1hMCKk59 16. bem.info bit.ly/1eAsQBo bit.ly/1m8ijzQ10 17. do-it-yourself-workshop11 18. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshop11 19. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshopcd do-it-yourself-workshop11 20. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshopcd do-it-yourself-workshopnpm i11 21. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshopcd do-it-yourself-workshopnpm inode bfs-workshop.js11 22. #112 23. #1github.com/bem/generator-bem-stub12 24. #1github.com/bem/generator-bem-stub$ sudo npm install -g generator-bem-stub12 25. #1github.com/bem/generator-bem-stub$ sudo npm install -g generator-bem-stubnode bfs-workshop.js verify12 26. #213 27. #2node bfs-workshop.js13 28. #2node bfs-workshop.jsyo bem-stub13 29. #2node bfs-workshop.jsyo bem-stubnode bfs-workshop.js verify13 30. #314 31. #3$ export PATH=./node_modules/.bin:$PATH14 32. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/14 33. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/$ bem make14 34. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/$ bem make$ bem server14 35. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/$ bem make$ bem serverlocalhost:8080/desktop.bundles/index/14 36. #315 37. #3 BEMJSON - bit.ly/1kXNzCg15 38. #3 BEMJSON - bit.ly/1kXNzCg'block' - 15 39. #3 BEMJSON - bit.ly/1kXNzCg'block' - 'elem' - 15 40. #3 BEMJSON - bit.ly/1kXNzCg'block' - 'elem' - 'mods' - 15 41. #3 BEMJSON - bit.ly/1kXNzCg'block' - 'elem' - 'mods' - 'elemMods' - 15 42. #316 43. #3'mix' - 16 44. #3'mix' - 'tag' - HTML- 16 45. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 16 46. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 'cls' - 16 47. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 'cls' - 'bem' - - HTML- class16 48. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 'cls' - 'bem' - - HTML- class16 49. BEMHTML 50. 18 51. 18 { } 52. 18 { }.island__header { display: inline-block; } 53. 18 { }.island__header { display: inline-block; }block('island').elem('header')(tag()('a')) 54. BEMJSON 19 55. BEMHTML 20 56. HTML21 57. BEMHTML. 22 58. BEMHTML. 23 59. BEMHTML. 23default 60. BEMHTML. 23default tag HTML 61. BEMHTML. 23default tag HTML js js 62. BEMHTML. 23default tag HTML js js bem - 63. BEMHTML. 23default tag HTML js js bem -cls 64. BEMHTML. 23default tag HTML js js bem -cls mix - DOM- 65. BEMHTML. 23default tag HTML js js bem -cls mix - DOM-attrs HTML- 66. BEMHTML. 23default tag HTML js js bem -cls mix - DOM-attrs HTML- 67. BEMHTML. 23default tag HTML js js bem -cls mix - DOM-attrs HTML- 68. BEMHTML 24 bit.ly/bemhtmlref 69. . 25 70. ymru.bem.info/tools/bem/modules/github.com/ymaps/modules26 71. bem-components27 72. bem-components OpenSource27 73. bem-components OpenSource19 27 74. bem-components OpenSource19 27 75. bem-components OpenSource19 27 76. bem-components OpenSource19 ru.bem.info/libs/bem-components/v2/27 77. i-bem.js?28 78. i-bem.js?28, 79. i-bem.js?28, i-bem JavaScript 80. i-bem.js?28, i-bem JavaScriptjQuery API 81. i-bem.js?29 82. i-bem.js?29 83. i-bem.js?29 84. i-bem.js?29 85. js-{!!!!!block: 'form',!!!!!js: true!}30 86.
31 js- 87.
32 js- 88.
33 js- 89.
34 js- 90.