Mais conteúdo relacionado
Semelhante a Evrone.ru / BEM for RoR (20)
Evrone.ru / BEM for RoR
- 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");
}
- 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
http://sass-lang.com/
/config/environment.rb
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
FireSass for Firebug
- 12. /APP/STYLESHEETS/IMPORT/
base.scss константы проекта
$layout-page-width: 1000px;
$layout-side-width: 240px;
$c-black: #333333;
$c-gray: #777777;
$c-light-gray: #999999;
$c-blue: #2266aa;
mixins.scss базовые миксины
@mixin g-line {
*zoom: 1;
@mixin opacity($value: 0.5) { _height: 0;
opacity: $value; &:after {
$value: $value * 100; content: " ";
filter: progid:DXImageTransform. display: block;
Microsoft.Alpha(opacity=#{$value}); clear: both;
} height: 0;
}
}
- 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');
...
} );
Notas do Editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n