Suche senden
Hochladen
Evrone.ru / BEM for RoR
•
Als KEY, PDF herunterladen
•
4 gefällt mir
•
1,996 views
Dmitry KODer
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 16
Jetzt herunterladen
Empfohlen
Componentization css angular
Componentization css angular
David Amend
Php if
Php if
nurhardianti98
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Chih-cheng Wang
WordPress Theme Design and Development Workshop - Day 3
WordPress Theme Design and Development Workshop - Day 3
Mizanur Rahaman Mizan
Sencha Touch
Sencha Touch
Craig Walker
Auto tools
Auto tools
祺 周
Capybara
Capybara
Flavian Missi
7 reasons why developers should love Joomla!
7 reasons why developers should love Joomla!
Bartłomiej Krztuk
Empfohlen
Componentization css angular
Componentization css angular
David Amend
Php if
Php if
nurhardianti98
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Chih-cheng Wang
WordPress Theme Design and Development Workshop - Day 3
WordPress Theme Design and Development Workshop - Day 3
Mizanur Rahaman Mizan
Sencha Touch
Sencha Touch
Craig Walker
Auto tools
Auto tools
祺 周
Capybara
Capybara
Flavian Missi
7 reasons why developers should love Joomla!
7 reasons why developers should love Joomla!
Bartłomiej Krztuk
Erik mogensen stowe
Erik mogensen stowe
Erik Mogensen
PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)
TaiShunHuang
Legend ortauzunluk
Legend ortauzunluk
feneralper
Binary Studio Academy 2016: Laravel Routing
Binary Studio Academy 2016: Laravel Routing
Binary Studio
Beyond Posts & Pages - Structured Content in WordPress
Beyond Posts & Pages - Structured Content in WordPress
John Eckman
J queryui
J queryui
Inbal Geffen
webstudy jquery
webstudy jquery
Seungho Han
18. images in symfony 4
18. images in symfony 4
Razvan Raducanu, PhD
A casa atividades arasaac
A casa atividades arasaac
Madalena Charruadas
Ahmad faizun
Ahmad faizun
RomaDhoni6
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
adhocgraFX
TICT #13
TICT #13
azman_awan9
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Sebastian Pożoga
TICT #11
TICT #11
azman_awan9
Work and play with SASS & Compass
Work and play with SASS & Compass
Andreas Dantz
Javascript application
Javascript application
Martin Sendra
Little Brown Bat by Elaine
Little Brown Bat by Elaine
Mr.Morton 's Class
2 Graph Theory
2 Graph Theory
Maksim Tsvetovat
Make your own wp cli command in 10min
Make your own wp cli command in 10min
Ivelina Dimova
Drupal sins 2016 10-06
Drupal sins 2016 10-06
Aaron Crosman
CSS3 Takes on the World
CSS3 Takes on the World
Jonathan Snook
Rapid Prototyping
Rapid Prototyping
Even Wu
Weitere ähnliche Inhalte
Was ist angesagt?
Erik mogensen stowe
Erik mogensen stowe
Erik Mogensen
PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)
TaiShunHuang
Legend ortauzunluk
Legend ortauzunluk
feneralper
Binary Studio Academy 2016: Laravel Routing
Binary Studio Academy 2016: Laravel Routing
Binary Studio
Beyond Posts & Pages - Structured Content in WordPress
Beyond Posts & Pages - Structured Content in WordPress
John Eckman
J queryui
J queryui
Inbal Geffen
webstudy jquery
webstudy jquery
Seungho Han
18. images in symfony 4
18. images in symfony 4
Razvan Raducanu, PhD
A casa atividades arasaac
A casa atividades arasaac
Madalena Charruadas
Ahmad faizun
Ahmad faizun
RomaDhoni6
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
adhocgraFX
TICT #13
TICT #13
azman_awan9
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Sebastian Pożoga
TICT #11
TICT #11
azman_awan9
Work and play with SASS & Compass
Work and play with SASS & Compass
Andreas Dantz
Javascript application
Javascript application
Martin Sendra
Little Brown Bat by Elaine
Little Brown Bat by Elaine
Mr.Morton 's Class
2 Graph Theory
2 Graph Theory
Maksim Tsvetovat
Make your own wp cli command in 10min
Make your own wp cli command in 10min
Ivelina Dimova
Drupal sins 2016 10-06
Drupal sins 2016 10-06
Aaron Crosman
Was ist angesagt?
(20)
Erik mogensen stowe
Erik mogensen stowe
PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)
Legend ortauzunluk
Legend ortauzunluk
Binary Studio Academy 2016: Laravel Routing
Binary Studio Academy 2016: Laravel Routing
Beyond Posts & Pages - Structured Content in WordPress
Beyond Posts & Pages - Structured Content in WordPress
J queryui
J queryui
webstudy jquery
webstudy jquery
18. images in symfony 4
18. images in symfony 4
A casa atividades arasaac
A casa atividades arasaac
Ahmad faizun
Ahmad faizun
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
TICT #13
TICT #13
Game jump: frontend introduction #1
Game jump: frontend introduction #1
TICT #11
TICT #11
Work and play with SASS & Compass
Work and play with SASS & Compass
Javascript application
Javascript application
Little Brown Bat by Elaine
Little Brown Bat by Elaine
2 Graph Theory
2 Graph Theory
Make your own wp cli command in 10min
Make your own wp cli command in 10min
Drupal sins 2016 10-06
Drupal sins 2016 10-06
Ähnlich wie Evrone.ru / BEM for RoR
CSS3 Takes on the World
CSS3 Takes on the World
Jonathan Snook
Rapid Prototyping
Rapid Prototyping
Even Wu
Svcc 2013-d3
Svcc 2013-d3
Oswald Campesato
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
Oswald Campesato
Styling components with JavaScript
Styling components with JavaScript
bensmithett
A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019
Matt Raible
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
Death of a Themer
Death of a Themer
James Panton
Django at the Disco
Django at the Disco
Richard Leland
Django at the Disco
Django at the Disco
Richard Leland
Django at the Disco
Django at the Disco
Richard Leland
Django at the Disco
Django at the Disco
Richard Leland
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Mei-yu Chen
WordPress Admin UI - Future Proofing Your Admin Pages
WordPress Admin UI - Future Proofing Your Admin Pages
Brandon Dove
Django at the Disco
Django at the Disco
Richard Leland
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
Matteo Papadopoulos
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet
QConSP 2015 - Dicas de Performance para Aplicações Web
QConSP 2015 - Dicas de Performance para Aplicações Web
Fabio Akita
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
Test upload
Test upload
Darrell Lawson Jr.
Ähnlich wie Evrone.ru / BEM for RoR
(20)
CSS3 Takes on the World
CSS3 Takes on the World
Rapid Prototyping
Rapid Prototyping
Svcc 2013-d3
Svcc 2013-d3
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
Styling components with JavaScript
Styling components with JavaScript
A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Death of a Themer
Death of a Themer
Django at the Disco
Django at the Disco
Django at the Disco
Django at the Disco
Django at the Disco
Django at the Disco
Django at the Disco
Django at the Disco
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
WordPress Admin UI - Future Proofing Your Admin Pages
WordPress Admin UI - Future Proofing Your Admin Pages
Django at the Disco
Django at the Disco
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
QConSP 2015 - Dicas de Performance para Aplicações Web
QConSP 2015 - Dicas de Performance para Aplicações Web
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
Test upload
Test upload
Kürzlich hochgeladen
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Kürzlich hochgeladen
(20)
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Evrone.ru / BEM for RoR
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
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
11.
СТРУКТУРА СТИЛЕЙ /app/stylesheets/
import/ *.scss global/ *.scss layouts/ l-*.scss blocks/ [%C%/[%A%/]]b-*.scss
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; } }
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
Hinweis der Redaktion
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Jetzt herunterladen