Evrone.ru / BEM for RoR
Upcoming SlideShare
Loading in...5
×
 

Evrone.ru / BEM for RoR

on

  • 1,950 views

 

Statistics

Views

Total Views
1,950
Slideshare-icon Views on SlideShare
1,850
Embed Views
100

Actions

Likes
4
Downloads
7
Comments
2

3 Embeds 100

https://twitter.com 94
http://evrone.ru 5
http://gazeta.yandex.ru 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Evrone.ru / BEM for RoR Evrone.ru / BEM for RoR Presentation Transcript

  • Front-end Rails-приложений основанный на БЭМ Дмитрий Карпунин, Evrone.com
  • FRONT-END RAILS-ПРИЛОЖЕНИЙ views helpers stylesheets images javascripts controllers locales
  • СЕМАНТИЧЕСКАЯ ВЁРСТКА<body> <div id="header"> <ul id="main_menu"> <li class="menu_item">...</li> ... </ul> </div> <div id="content">...</div> <div id="footer">...</div></body>
  • БЭМ — БЛОК, ЭЛЕМЕНТ, МОДИФИКАТОР<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>
  • ПОПРОБУЕМ УПРОСТИТЬ<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");}
  • ПОЛЬЗОВАТЕЛЬ 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");}
  • СТАТИСТИКА IE 6-8, РФ, LIVEINTERNET.RU
  • IE 6-8, ЕВРОПА, GS.STATCOUNTER.COM
  • БЭМ НА ПРАКТИКЕ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
  • SASS http://sass-lang.com/ /config/environment.rbSass::Plugin.options[:template_location] = "./app/stylesheets"Sass::Plugin.options[:css_location] = "./public/stylesheets/compiled"if RAILS_ENV == "production" Sass::Plugin.options[:style] = :nestedelse Sass::Plugin.options[:style] = :expanded Sass::Plugin.options[:debug_info] = trueend FireSass for Firebug
  • СТРУКТУРА СТИЛЕЙ/app/stylesheets/ import/ *.scss global/ *.scss layouts/ l-*.scss blocks/ [%C%/[%A%/]]b-*.scss
  • /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; } }
  • /APP/STYLESHEETS/GLOBAL/reset.scssfundamental.scss.g-line { @include g-line;}reserved.scss.bold { font-weight: bold;}.placeholder { color: $c-placeholder;}
  • /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.scssall.scss
  • /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); ...} );
  • ВОПРОСЫ? 0_O