More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Front-end Rails-приложений приложений, основанный на БЭМ
Similar to Front-end Rails-приложений приложений, основанный на БЭМ (20)
More from Александр Ежов
More from Александр Ежов (20)
Recently uploaded
Recently uploaded (20)
Front-end Rails-приложений приложений, основанный на БЭМ
- 1. Front-end Rails-приложений основанный на БЭМ Дмитрий Карпунин, Evrone.com
- 2. Front-end Rails-приложений views helpers stylesheets images javascripts controllers locales
- 3. Семантическая вёрстка <body> <div id="header"> <ul id="main_menu"> <li class="menu_item">...</li> ... </ul> </div> <div id="content">...</div> <div id="footer">...</div> </body>
- 4. БЭМ — Блок, Элемент, Модификатор <div class="b-post b-post_favorite"> <div class="b-post__author"> <div class="avatar">...</div> ... </div> <div class="b-post__content"> <h3 class="title">...</h3> ... </div> </div>
- 5. Попробуем упростить <div class="b-post favorite"> <div class="author"> <div class="avatar">...</div> ... </div> ... <a class="g-iconed favorite">В избранное</a> </div> .g-iconed { padding-left: 20px; background: left center no-repeat; } .g-iconed.favorite { background-image: url("/images/icons/favorite.png"); }
- 6. Пользователь IE6 в шоке <div class="b-post favorite"> <div class="author"> <div class="avatar">...</div> ... </div> ... <a class="g-iconed favorite">В избранное</a> </div> .g-iconed { padding-left: 20px; background: left center no-repeat; } .g-iconed.favorite { background-image: url("/images/icons/favorite.png"); }
- 7. Статистика IE 6-8, РФ, liveinternet.ru
- 8. IE 6-8, Европа, gs.statcounter.com
- 9. БЭМ на практике C) .c-placeholder, .c-blue, .c-link, ... $c-placeholder, $c-blue, $c-link, ... G) 1) глобальные модификаторы: .g-line, .g-inline-block, .g-font_accident, ... g-line, inline-block, g-font_accident, ... 2) микроструктуры: .g-iconed.user, .g-thumb.size_50x50, ... g_thumb(@user.image.url(:medium), "50x50") L) .l-page, .l-profile, l-users-show, ... .l-page__footer, .l-profile__left-content, ... @import "blocks/users/b-friends"; B) .b-post, .b-post_favorite, .b-post__author, ... div_for(post, :class => "b-post") => #post_42
- 10. SASS Sass::Plugin.options[:template_location] = "./app/stylesheets" Sass::Plugin.options[:css_location] = "./public/stylesheets/compiled" if RAILS_ENV == "production" Sass::Plugin.options[:style] = :nested else Sass::Plugin.options[:style] = :expanded Sass::Plugin.options[:debug_info] = true end http://sass-lang.com/ /config/environment.rb FireSass for Firebug
- 12. /app/stylesheets/import/ base.scss константы проекта mixins.scss базовые миксины @mixin g-line { *zoom: 1; _height: 0; &:after { content: " "; display: block; clear: both; height: 0; } } @mixin opacity($value: 0.5) { opacity: $value; $value: $value * 100; filter: progid:DXImageTransform. Microsoft.Alpha(opacity=#{$value}); } $layout-page-width: 1000px; $layout-side-width: 240px; $c-black: #333333; $c-gray: #777777; $c-light-gray: #999999; $c-blue: #2266aa;
- 13. /app/stylesheets/global/ reset.scss fundamental.scss .g-line { @include g-line;} reserved.scss .bold { font-weight: bold;}.placeholder { color: $c-placeholder;}
- 14. /app/stylesheets/global/ structures.scss @import "include/base"; .g-iconed { padding-left: 20px; background: transparent 0 0 no-repeat;}@mixin _g-iconed_type($name) { .g-iconed.#{$name} { background-image: url("#{$icons-path}/#{$name}.png"); }}@include _g-iconed_type(user);@include _g- iconed_type(email); layout.scss all.scss
- 15. /app/views/users/show.haml - content_for :head, stylesheet_link_tag("compiled/layouts/l-users- show"); /app/stylesheets/layouts/l-users-show.scss @import "blocks/users/b-friends"; /app/stylesheets/blocks/users/b-friends.scss .b-friends { .title {...} .users-list {...} ... } /public/javascripts/users/b-friends.js $( function () { var jFriends = $('.b-friends'); ... } );
- 16. Вопросы? 0_O