Soumettre la recherche
Mettre en ligne
Front-end Rails-приложений приложений, основанный на БЭМ
•
0 j'aime
•
149 vues
А
Александр Ежов
Suivre
Дмитрий Карпунин о Front-end Rails-приложений приложений.
Lire moins
Lire la suite
Données & analyses
Signaler
Partager
Signaler
Partager
1 sur 16
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
Rakesh Jha
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
Todd Anderson
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
jQuery Mobile with HTML5
jQuery Mobile with HTML5
madhurpgarg
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal Camp
Dipen Chaudhary
הרצאה מתוקשבת וורדפרס מתקדם
הרצאה מתוקשבת וורדפרס מתקדם
Shirly Kamusher
1111הרצאה וורדפרס מתקדם
1111הרצאה וורדפרס מתקדם
Shirly Kamusher
Rails3 asset-pipeline
Rails3 asset-pipeline
Damian Galarza
Recommandé
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
Rakesh Jha
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
Todd Anderson
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
jQuery Mobile with HTML5
jQuery Mobile with HTML5
madhurpgarg
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal Camp
Dipen Chaudhary
הרצאה מתוקשבת וורדפרס מתקדם
הרצאה מתוקשבת וורדפרס מתקדם
Shirly Kamusher
1111הרצאה וורדפרס מתקדם
1111הרצאה וורדפרס מתקדם
Shirly Kamusher
Rails3 asset-pipeline
Rails3 asset-pipeline
Damian Galarza
Responsive WordPress workflow
Responsive WordPress workflow
James Bundey
WebComponents or shadow side of the Doom
WebComponents or shadow side of the Doom
Grzegorz Wilczynski
Jasmine 2.0
Jasmine 2.0
Giorgio Natili
Fundamental JQuery
Fundamental JQuery
Achmad Solichin
Web components - An Introduction
Web components - An Introduction
cherukumilli2
Styling components with JavaScript
Styling components with JavaScript
bensmithett
Katrinaramos10x10
Katrinaramos10x10
katrinaramos
Tikal's Backbone_js introduction workshop
Tikal's Backbone_js introduction workshop
Tikal Knowledge
Responsive Web Design tehnike u WordPress-u
Responsive Web Design tehnike u WordPress-u
Igor Benić
Real World Web components
Real World Web components
Jarrod Overson
Admin footer
Admin footer
Dịch vụ sửa nhà
Introduction to WAI-ARIA
Introduction to WAI-ARIA
Interactive Accessibility
Maryam Ahmed 10x10
Maryam Ahmed 10x10
Maryam Ahmed
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Deepu S Nath
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Erik Isaksen
Semantic accessibility
Semantic accessibility
Ian Stuart
Magento20100807
Magento20100807
Hirokazu Nishi
06. session 06 css color_andlayoutpropeties
06. session 06 css color_andlayoutpropeties
Phúc Đỗ
Unlock the next era of UI design with Polymer
Unlock the next era of UI design with Polymer
Rob Dodson
Seo hints
Seo hints
AbidKhan237
Os Desafios Da EducaçãO De Jovens E Adultos Em Angola
Os Desafios Da EducaçãO De Jovens E Adultos Em Angola
Nelson Paulo
Delloite - прогноз развития ИТ - в 2011 году
Delloite - прогноз развития ИТ - в 2011 году
Victor Gridnev
Contenu connexe
Tendances
Responsive WordPress workflow
Responsive WordPress workflow
James Bundey
WebComponents or shadow side of the Doom
WebComponents or shadow side of the Doom
Grzegorz Wilczynski
Jasmine 2.0
Jasmine 2.0
Giorgio Natili
Fundamental JQuery
Fundamental JQuery
Achmad Solichin
Web components - An Introduction
Web components - An Introduction
cherukumilli2
Styling components with JavaScript
Styling components with JavaScript
bensmithett
Katrinaramos10x10
Katrinaramos10x10
katrinaramos
Tikal's Backbone_js introduction workshop
Tikal's Backbone_js introduction workshop
Tikal Knowledge
Responsive Web Design tehnike u WordPress-u
Responsive Web Design tehnike u WordPress-u
Igor Benić
Real World Web components
Real World Web components
Jarrod Overson
Admin footer
Admin footer
Dịch vụ sửa nhà
Introduction to WAI-ARIA
Introduction to WAI-ARIA
Interactive Accessibility
Maryam Ahmed 10x10
Maryam Ahmed 10x10
Maryam Ahmed
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Deepu S Nath
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Erik Isaksen
Semantic accessibility
Semantic accessibility
Ian Stuart
Magento20100807
Magento20100807
Hirokazu Nishi
06. session 06 css color_andlayoutpropeties
06. session 06 css color_andlayoutpropeties
Phúc Đỗ
Unlock the next era of UI design with Polymer
Unlock the next era of UI design with Polymer
Rob Dodson
Seo hints
Seo hints
AbidKhan237
Tendances
(20)
Responsive WordPress workflow
Responsive WordPress workflow
WebComponents or shadow side of the Doom
WebComponents or shadow side of the Doom
Jasmine 2.0
Jasmine 2.0
Fundamental JQuery
Fundamental JQuery
Web components - An Introduction
Web components - An Introduction
Styling components with JavaScript
Styling components with JavaScript
Katrinaramos10x10
Katrinaramos10x10
Tikal's Backbone_js introduction workshop
Tikal's Backbone_js introduction workshop
Responsive Web Design tehnike u WordPress-u
Responsive Web Design tehnike u WordPress-u
Real World Web components
Real World Web components
Admin footer
Admin footer
Introduction to WAI-ARIA
Introduction to WAI-ARIA
Maryam Ahmed 10x10
Maryam Ahmed 10x10
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Semantic accessibility
Semantic accessibility
Magento20100807
Magento20100807
06. session 06 css color_andlayoutpropeties
06. session 06 css color_andlayoutpropeties
Unlock the next era of UI design with Polymer
Unlock the next era of UI design with Polymer
Seo hints
Seo hints
En vedette
Os Desafios Da EducaçãO De Jovens E Adultos Em Angola
Os Desafios Da EducaçãO De Jovens E Adultos Em Angola
Nelson Paulo
Delloite - прогноз развития ИТ - в 2011 году
Delloite - прогноз развития ИТ - в 2011 году
Victor Gridnev
Dinero
Dinero
ribasxavie
Задачи органов государственной власти субъектов РФ по обеспечению перехода на...
Задачи органов государственной власти субъектов РФ по обеспечению перехода на...
Victor Gridnev
ELP_Logo_13_CMYK
ELP_Logo_13_CMYK
jacqssprat
Vereador Rezende - Indicações 06
Vereador Rezende - Indicações 06
Prestone
Mercadolize.Com
Mercadolize.Com
mercadolize
Paz ciudadana reinsercion carceles concesionadas y publicas
Paz ciudadana reinsercion carceles concesionadas y publicas
Francisco J. Estrada Vásquez
China in global music market
China in global music market
thomaskulbokas
презентация к заседанию Подкомиссии от 20 февраля 2014 года (про СМЭВ и прочее)
презентация к заседанию Подкомиссии от 20 февраля 2014 года (про СМЭВ и прочее)
Victor Gridnev
Fotos de Invierno
Fotos de Invierno
Juan Carlos Fernandez
A Bruxinha E O Pai Natal
A Bruxinha E O Pai Natal
Manuel Oliveira
Scanrajesh2
Scanrajesh2
Rajesh Baskar
eGov Plan 02 2009
eGov Plan 02 2009
Victor Gridnev
Beautiful cats
Beautiful cats
osvaldo.1
Presentación de Mario Waissbluth sobre Innovación y Capital Humano
Presentación de Mario Waissbluth sobre Innovación y Capital Humano
Francisco J. Estrada Vásquez
2009外文讲义4
2009外文讲义4
Deep Deep
Mama Mama02
Mama Mama02
Sara Hernandez
Презентация Ростелеком 17_03_2010
Презентация Ростелеком 17_03_2010
Victor Gridnev
En vedette
(19)
Os Desafios Da EducaçãO De Jovens E Adultos Em Angola
Os Desafios Da EducaçãO De Jovens E Adultos Em Angola
Delloite - прогноз развития ИТ - в 2011 году
Delloite - прогноз развития ИТ - в 2011 году
Dinero
Dinero
Задачи органов государственной власти субъектов РФ по обеспечению перехода на...
Задачи органов государственной власти субъектов РФ по обеспечению перехода на...
ELP_Logo_13_CMYK
ELP_Logo_13_CMYK
Vereador Rezende - Indicações 06
Vereador Rezende - Indicações 06
Mercadolize.Com
Mercadolize.Com
Paz ciudadana reinsercion carceles concesionadas y publicas
Paz ciudadana reinsercion carceles concesionadas y publicas
China in global music market
China in global music market
презентация к заседанию Подкомиссии от 20 февраля 2014 года (про СМЭВ и прочее)
презентация к заседанию Подкомиссии от 20 февраля 2014 года (про СМЭВ и прочее)
Fotos de Invierno
Fotos de Invierno
A Bruxinha E O Pai Natal
A Bruxinha E O Pai Natal
Scanrajesh2
Scanrajesh2
eGov Plan 02 2009
eGov Plan 02 2009
Beautiful cats
Beautiful cats
Presentación de Mario Waissbluth sobre Innovación y Capital Humano
Presentación de Mario Waissbluth sobre Innovación y Capital Humano
2009外文讲义4
2009外文讲义4
Mama Mama02
Mama Mama02
Презентация Ростелеком 17_03_2010
Презентация Ростелеком 17_03_2010
Similaire à Front-end Rails-приложений приложений, основанный на БЭМ
The Thinking behind BEM
The Thinking behind BEM
Varya Stepanova
Seo Cheat Sheet
Seo Cheat Sheet
Anchal Thakur
Seo cheat-sheet
Seo cheat-sheet
Elena Michelle
Templates81 special document
Templates81 special document
Lan Nguyen
Templates81 special document
Templates81 special document
Lan Nguyen
Moz SEO Web cheat sheet 2016
Moz SEO Web cheat sheet 2016
Nirav Patel
Seo cheat-sheet
Seo cheat-sheet
Tiago Gonçalves MA - Msc
The Web Developer's SEO Cheat Sheet
The Web Developer's SEO Cheat Sheet
Shubham Kumar Singh
Seo cheat sheet
Seo cheat sheet
Sampath Liyanage
Seo cheat sheet
Seo cheat sheet
Rohan Jha
Seo cheat-sheet
Seo cheat-sheet
Harpreet Kaur
Seo onpage for Developer
Seo onpage for Developer
Dương Trần Danh
SharePointfest Denver - A jQuery Primer for SharePoint
SharePointfest Denver - A jQuery Primer for SharePoint
Marc D Anderson
integrasi template admin lte terbaru dengan laravel 7
integrasi template admin lte terbaru dengan laravel 7
Adi Nata
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue router
Katy Slemon
HTML and CSS crash course!
HTML and CSS crash course!
Ana Cidre
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan
Jquery tutorial
Jquery tutorial
Bui Kiet
Introduction to CSS Architecture and a little SASS
Introduction to CSS Architecture and a little SASS
Roman Kuba
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
Jesse James Arnold
Similaire à Front-end Rails-приложений приложений, основанный на БЭМ
(20)
The Thinking behind BEM
The Thinking behind BEM
Seo Cheat Sheet
Seo Cheat Sheet
Seo cheat-sheet
Seo cheat-sheet
Templates81 special document
Templates81 special document
Templates81 special document
Templates81 special document
Moz SEO Web cheat sheet 2016
Moz SEO Web cheat sheet 2016
Seo cheat-sheet
Seo cheat-sheet
The Web Developer's SEO Cheat Sheet
The Web Developer's SEO Cheat Sheet
Seo cheat sheet
Seo cheat sheet
Seo cheat sheet
Seo cheat sheet
Seo cheat-sheet
Seo cheat-sheet
Seo onpage for Developer
Seo onpage for Developer
SharePointfest Denver - A jQuery Primer for SharePoint
SharePointfest Denver - A jQuery Primer for SharePoint
integrasi template admin lte terbaru dengan laravel 7
integrasi template admin lte terbaru dengan laravel 7
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue router
HTML and CSS crash course!
HTML and CSS crash course!
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Jquery tutorial
Jquery tutorial
Introduction to CSS Architecture and a little SASS
Introduction to CSS Architecture and a little SASS
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
Plus de Александр Ежов
Кеширование данных в БД
Кеширование данных в БД
Александр Ежов
Борьба с багами: RailsClub на DevConf 2015
Борьба с багами: RailsClub на DevConf 2015
Александр Ежов
Rails 5: awesome features and breaking changes
Rails 5: awesome features and breaking changes
Александр Ежов
Big Data и Ruby
Big Data и Ruby
Александр Ежов
Abstract machines for great good
Abstract machines for great good
Александр Ежов
Rubt on Rails: 1000 запросов в секунду
Rubt on Rails: 1000 запросов в секунду
Александр Ежов
Liquor, Liquid и другие безопасные языки разметки в RoR
Liquor, Liquid и другие безопасные языки разметки в RoR
Александр Ежов
Vim or die
Vim or die
Александр Ежов
Capistrano Rails
Capistrano Rails
Александр Ежов
Умное кэширование в Rails
Умное кэширование в Rails
Александр Ежов
Sphinx как база данных
Sphinx как база данных
Александр Ежов
Emacs и Rails
Emacs и Rails
Александр Ежов
Антикризисная презентация
Антикризисная презентация
Александр Ежов
Eventmachine: структура evented-приложений
Eventmachine: структура evented-приложений
Александр Ежов
Дэдлоки
Дэдлоки
Александр Ежов
Обзорное сравнение серверов приложений для Rails
Обзорное сравнение серверов приложений для Rails
Александр Ежов
Приложения в плагинах
Приложения в плагинах
Александр Ежов
Использования PgQ и Londste в rails-приложении
Использования PgQ и Londste в rails-приложении
Александр Ежов
Масштабирование в Rails
Масштабирование в Rails
Александр Ежов
Интернационализация и локализация Ruby on Rails. gem russian
Интернационализация и локализация Ruby on Rails. gem russian
Александр Ежов
Plus de Александр Ежов
(20)
Кеширование данных в БД
Кеширование данных в БД
Борьба с багами: RailsClub на DevConf 2015
Борьба с багами: RailsClub на DevConf 2015
Rails 5: awesome features and breaking changes
Rails 5: awesome features and breaking changes
Big Data и Ruby
Big Data и Ruby
Abstract machines for great good
Abstract machines for great good
Rubt on Rails: 1000 запросов в секунду
Rubt on Rails: 1000 запросов в секунду
Liquor, Liquid и другие безопасные языки разметки в RoR
Liquor, Liquid и другие безопасные языки разметки в RoR
Vim or die
Vim or die
Capistrano Rails
Capistrano Rails
Умное кэширование в Rails
Умное кэширование в Rails
Sphinx как база данных
Sphinx как база данных
Emacs и Rails
Emacs и Rails
Антикризисная презентация
Антикризисная презентация
Eventmachine: структура evented-приложений
Eventmachine: структура evented-приложений
Дэдлоки
Дэдлоки
Обзорное сравнение серверов приложений для Rails
Обзорное сравнение серверов приложений для Rails
Приложения в плагинах
Приложения в плагинах
Использования PgQ и Londste в rails-приложении
Использования PgQ и Londste в rails-приложении
Масштабирование в Rails
Масштабирование в Rails
Интернационализация и локализация Ruby on Rails. gem russian
Интернационализация и локализация Ruby on Rails. gem russian
Dernier
Call Girls Indiranagar Just Call 👗 7737669865 👗 Top Class Call Girl Service B...
Call Girls Indiranagar Just Call 👗 7737669865 👗 Top Class Call Girl Service B...
amitlee9823
BPAC WITH UFSBI GENERAL PRESENTATION 18_05_2017-1.pptx
BPAC WITH UFSBI GENERAL PRESENTATION 18_05_2017-1.pptx
MohammedJunaid861692
Delhi Call Girls CP 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls CP 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
shivangimorya083
Midocean dropshipping via API with DroFx
Midocean dropshipping via API with DroFx
olyaivanovalion
Log Analysis using OSSEC sasoasasasas.pptx
Log Analysis using OSSEC sasoasasasas.pptx
JohnnyPlasten
Determinants of health, dimensions of health, positive health and spectrum of...
Determinants of health, dimensions of health, positive health and spectrum of...
shambhavirathore45
Accredited-Transport-Cooperatives-Jan-2021-Web.pdf
Accredited-Transport-Cooperatives-Jan-2021-Web.pdf
adriantubila
Sampling (random) method and Non random.ppt
Sampling (random) method and Non random.ppt
Dr. Soumendra Kumar Patra
Invezz.com - Grow your wealth with trading signals
Invezz.com - Grow your wealth with trading signals
Invezz1
Vip Model Call Girls (Delhi) Karol Bagh 9711199171✔️Body to body massage wit...
Vip Model Call Girls (Delhi) Karol Bagh 9711199171✔️Body to body massage wit...
shivangimorya083
Smarteg dropshipping via API with DroFx.pptx
Smarteg dropshipping via API with DroFx.pptx
olyaivanovalion
Chintamani Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore ...
Chintamani Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore ...
amitlee9823
Introduction-to-Machine-Learning (1).pptx
Introduction-to-Machine-Learning (1).pptx
firstjob4
Week-01-2.ppt BBB human Computer interaction
Week-01-2.ppt BBB human Computer interaction
fulawalesam
Halmar dropshipping via API with DroFx
Halmar dropshipping via API with DroFx
olyaivanovalion
Zuja dropshipping via API with DroFx.pptx
Zuja dropshipping via API with DroFx.pptx
olyaivanovalion
VidaXL dropshipping via API with DroFx.pptx
VidaXL dropshipping via API with DroFx.pptx
olyaivanovalion
Call Girls in Sarai Kale Khan Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts S...
Call Girls in Sarai Kale Khan Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts S...
Delhi Call girls
FESE Capital Markets Fact Sheet 2024 Q1.pdf
FESE Capital Markets Fact Sheet 2024 Q1.pdf
MarinCaroMartnezBerg
Mature dropshipping via API with DroFx.pptx
Mature dropshipping via API with DroFx.pptx
olyaivanovalion
Dernier
(20)
Call Girls Indiranagar Just Call 👗 7737669865 👗 Top Class Call Girl Service B...
Call Girls Indiranagar Just Call 👗 7737669865 👗 Top Class Call Girl Service B...
BPAC WITH UFSBI GENERAL PRESENTATION 18_05_2017-1.pptx
BPAC WITH UFSBI GENERAL PRESENTATION 18_05_2017-1.pptx
Delhi Call Girls CP 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Delhi Call Girls CP 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Call
Midocean dropshipping via API with DroFx
Midocean dropshipping via API with DroFx
Log Analysis using OSSEC sasoasasasas.pptx
Log Analysis using OSSEC sasoasasasas.pptx
Determinants of health, dimensions of health, positive health and spectrum of...
Determinants of health, dimensions of health, positive health and spectrum of...
Accredited-Transport-Cooperatives-Jan-2021-Web.pdf
Accredited-Transport-Cooperatives-Jan-2021-Web.pdf
Sampling (random) method and Non random.ppt
Sampling (random) method and Non random.ppt
Invezz.com - Grow your wealth with trading signals
Invezz.com - Grow your wealth with trading signals
Vip Model Call Girls (Delhi) Karol Bagh 9711199171✔️Body to body massage wit...
Vip Model Call Girls (Delhi) Karol Bagh 9711199171✔️Body to body massage wit...
Smarteg dropshipping via API with DroFx.pptx
Smarteg dropshipping via API with DroFx.pptx
Chintamani Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore ...
Chintamani Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore ...
Introduction-to-Machine-Learning (1).pptx
Introduction-to-Machine-Learning (1).pptx
Week-01-2.ppt BBB human Computer interaction
Week-01-2.ppt BBB human Computer interaction
Halmar dropshipping via API with DroFx
Halmar dropshipping via API with DroFx
Zuja dropshipping via API with DroFx.pptx
Zuja dropshipping via API with DroFx.pptx
VidaXL dropshipping via API with DroFx.pptx
VidaXL dropshipping via API with DroFx.pptx
Call Girls in Sarai Kale Khan Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts S...
Call Girls in Sarai Kale Khan Delhi 💯 Call Us 🔝9205541914 🔝( Delhi) Escorts S...
FESE Capital Markets Fact Sheet 2024 Q1.pdf
FESE Capital Markets Fact Sheet 2024 Q1.pdf
Mature dropshipping via API with DroFx.pptx
Mature dropshipping via API with DroFx.pptx
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
11.
Структура стилей /app/stylesheets/ import/ *.scss global/ *.scss layouts/ l-*.scss blocks/ [%C%/[%A%/]]b-*.scss
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
Télécharger maintenant