The document discusses organizing frontend assets in Rails applications. It recommends using Bower for frontend packages instead of gems. Rails Assets provides a bridge between Bower and Bundler. Autoprefixer can be used instead of Compass to add vendor prefixes. Grunt or Gulp can be used for task automation. Sass and BEM methodology are recommended for writing scalable, maintainable CSS code. Key aspects include separating concerns, naming conventions, and modular file structure.

1. FRONTEND
(re)organize the chaos

2. FRONTEND
(re)organize the chaos
Matteo Papadopoulos
@spleenteo
Stefano Verna
@steffoz
www.cantierecreativo.net

4. Asset Pipeline
a.k.a. Sprockets

5. Asset Pipeline
“The new pipeline makes
assets a first class citizen in the
Rails stack.”

6. Asset Pipeline
gem 'jquery-rails'
!
//= require 'jquery'

7. Asset Pipeline
2011 Rails 3.1

8. Asset Pipeline
2012

9. Asset Pipeline
Bower
Frontend package manager

10. Asset Pipeline
+17.000
packages

11. Asset Pipeline
$ npm install -g bower
$ bower init

12. Asset Pipeline
$ cat bower.json
{
"name": "my-project",
"dependencies": {
"jquery-ui": "~1.11.1",
"jquery": "~2.1.1"
}
}

13. Asset Pipeline
$ tree bower_components -L 1
./bower_components
"## jquery
$## jquery-ui

14. Asset Pipeline
So we need two
package managers?

15. Asset Pipeline
Rails Assets
Frictionless proxy between Bundler and Bower

16. Asset Pipeline
source 'https://rubygems.org'
source 'https://rails-assets.org'
!
gem 'rails-assets-jquery-ui'

17. Asset Pipeline
Bundler Rails Assets Bower
do you have
rails-assets-jquery-ui?
do you have
jquery-ui?
sure thing,
take it!
here's the gem!

18. Asset Pipeline
win-win
that was easy.

19. Asset Pipeline
Compass
“A SASS Framework”

20. Compass
Asset Pipeline
vendor prefixes
typography
vertical rhythm
grid
reset
helper functions
image-related features

21. Compass
Asset Pipeline
monolithic
approach

22. Asset Pipeline
Compass soooo slow

23. Asset Pipeline
Compass php syndrome

24. Compass
Asset Pipeline
box-shadow: 10px 10px 5px red;

25. Compass
Asset Pipeline
box-shadow: 10px 10px 5px red;
+box-shadow(red 10px 10px 5px)

26. Compass
Asset Pipeline
vendor prefixes
typography
vertical rhythm
grid
reset
helper functions
image-related features

27. Asset Pipeline
Compass vendor prefixes
image-related features

28. Asset Pipeline
Compass unix-like approach

29. Asset Pipeline
vendor prefixes

30. Asset Pipeline
100% Sass mixin library

31. Asset Pipeline
Autoprefixer
CSS post-processor
gem 'autoprefixer-rails'

32. Asset Pipeline
a {
display: flex;
}
> 1%
last 2 versions
Firefox ESR
Opera 12.1
a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}

33. Asset Pipeline
Compass vendor prefixes
image-related features

34. Asset Pipeline
image-related features
sprites
webfont
high DPI images support
lossless image compression
…

35. Asset Pipeline
task management tools

36. Asset Pipeline
GRUNT GULP BROCCOLI

37. Asset Pipeline
+3400
tasks
mostly frontend-related

38. Asset Pipeline
$ npm install -g grunt-cli

39. Asset Pipeline
$ cat package.json
{
"name": "my-project",
"dependencies": {
"grunt": "~1.11.1",
"grunt-bemo": "~2.1.1",
...
}
}
$ npm install

40. Asset Pipeline
# Gruntfile.js
!
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-bemo');
!
grunt.initConfig({
bemo: {
webfonts: {
src: "app/assets/fonts/svg",
fontDest: "app/assets/fonts",
sassDest: "app/assets/stylesheets/_icon-glyphs.css.scss"
},
sprites: {
src: "app/assets/images/sprites",
imageDest: "app/assets/images/sprites-{{density}}.png",
sassDest: "app/assets/stylesheets/_sprites.css.scss"
}
}
});
};

41. Asset Pipeline
$ grunt bemo
!
Running "bemo-sprites" task
...
!
Running "bemo-webfonts" task
...

42. Asset Pipeline
JS/Coffee code linter
JS/Coffee code style checker
Live reload
SVG/PNG/JPG optimizer
Inline assets
Unused CSS removal
...

43. Asset Pipeline
Recap
Use Bower packages, not gems
Rails Assets
Replace Compass
Bourbon/Autoprefixer
Grunt/Gulp/Broccoli

44. Writing Sass

45. Writing Sass
Rails conventions
$ rails generate controller books
create app/controllers/books_controller.rb
invoke erb
create app/views/books
invoke helper
create app/helpers/books_helper.rb
invoke assets
invoke coffee
create app/assets/javascripts/books.js.coffee
invoke scss
create app/assets/stylesheets/books.css.scss

46. Writing Sass
OOCSS
Object-oriented CSS
Organize the chaos v1 2012 - http://goo.gl/6ZRJm4

47. OOCSS
Writing Sass
A CSS “object” is a repeating
visual pattern, that can be
abstracted into an independent
snippet of HTML, CSS, and
possibly JavaScript. That
object can then be reused
throughout a site.

51. Writing Sass

53. Writing Sass
media object

54. Writing Sass
.media
display: table
width: 100%
!
.media .img, .media .body
display: table-cell
vertical-align: top
!
.media .img
padding-right: 10px
<div class="media">
!
<div class="img">
<img src="..." />
</div>
!
<div class="body">
...
</div>
!
</div>

55. Writing Sass
No margins, no positioning,
100% width
.media
display: table
width: 100%
!
.media .img, .media .body
display: table-cell
vertical-align: top
!
.media .img
padding-right: 10px

56. Writing Sass
Location
indipendence
Let the context choose your positioning
Be fluid: always expand to take the full
width of the container

57. Writing Sass
Just class selectors?
.media
display: table
width: 100%
!
.media .img, .media .body
display: table-cell
vertical-align: top
!
.media .img
padding-right: 10px

58. Writing Sass
ID selectors
Limit reuse within the same page
Tag selectors
Force a semantic
Carpet bombing

59. Writing Sass
.media
display: table
width: 100%
!
.media .img, .media .body
display: table-cell
vertical-align: top
!
.media .img
padding-right: 10px
Wait, what about
descendent selectors?

60. Writing Sass
Descendent
selectors
Carpet bombing (again)
Potential name clashing

61. Writing Sass
Descendent
selectors
Do not use them.

62. Writing Sass
.media
display: table
width: 100%
!
.media .img, .media .body
display: table-cell
vertical-align: top
!
.media__img
padding-right: 10px

63. Writing Sass
.media
display: table
width: 100%
!
.media__img, .media__body
display: table-cell
vertical-align: top
!
.media__img
padding-right: 10px

64. Writing Sass
BEM
Block • Element • Modifier

65. Writing Sass
.media
display: table
width: 100%
!
.media__img, .media__body
display: table-cell
vertical-align: top
!
.media__img
padding-right: 10px
Block (CSS object)
Block element

66. Writing Sass
.nav-bar Block (CSS object)
.nav-bar__logo Block element

67. Writing Sass
.nav-bar Block (CSS object)
.nav-bar__logo Block element
.nav-bar--primary Modifier

68. Writing Sass
.media
// ....
!
.media--rev
direction: rtl
text-align: left
!
.media__img
padding-right: 0px
padding-left: 10px
<div class="media media--rev">
!
<div class="media__img">
<img src="..." />
</div>
!
<div class="media__body">
...
</div>
!
</div>

69. Writing Sass
.nav-bar--primary__logo--dark

70. Writing Sass
But it's verbose and
ugly and...!
CSS has limited character set.
Deal with it.

71. Writing Sass
Remember the pros!
No more name clashing
!
No more overrides
!
Trivial to understand and maintain your
codebase

73. Writing Sass
Structure

74. Writing Sass
.
"## application.css.sass
"## _base.css.sass
"## _font-faces.css.sass
"## blocks
% "## _button.css.sass
% "## _media.css.sass
% $## ...
"## functions
% $## ...
"## mixins
% $## ...
$## variables
$## ...
Root file

75. Writing Sass
.
"## application.css.sass
"## _base.css.sass
"## _font-faces.css.sass
"## blocks
% "## _button.css.sass
% "## _media.css.sass
% $## ...
"## functions
% $## ...
"## mixins
% $## ...
$## variables
$## ...
// Silent code
@import 'functions/**/*'
@import 'variables/**/*'
@import 'bourbon'
@import 'mixins/**/*'
!
// Font faces
@import 'font-faces'
!
// Base
@import 'normalize-scss'
@import 'base'
!
// Blocks
@import 'blocks/**/*'

76. Writing Sass
// Silent code
@import 'functions/**/*'
@import 'variables/**/*'
@import 'bourbon'
@import 'mixins/**/*'
!
// Font faces
@import 'font-faces'
!
// Base
@import 'normalize-scss'
@import 'base'
!
// Blocks
@import 'blocks/**/*'
gem "sass-globbing"

77. Writing Sass
.
"## application.css.sass
"## _base.css.sass
"## _font-faces.css.sass
"## blocks
% "## _button.css.sass
% "## _media.css.sass
% $## ...
"## functions
% $## ...
"## mixins
% $## ...
$## variables
$## ...
// Silent code
@import 'functions/**/*'
@import 'variables/**/*'
@import 'bourbon'
@import 'mixins/**/*'
!
// Font faces
@import 'font-faces'
!
// Base
@import 'normalize-scss'
@import 'base'
!
// Blocks
@import 'blocks/**/*'

78. .
"## application.css.sass
"## _base.css.sass
"## _font-faces.css.sass
"## blocks
% "## _button.css.sass
% "## _media.css.sass
% $## ...
"## functions
% $## ...
"## mixins
% $## ...
$## variables
$## ...
// Silent code
@import 'functions/**/*'
@import 'variables/**/*'
@import 'bourbon'
@import 'mixins/**/*'
!
// Font faces
@import 'font-faces'
!
// Base
@import 'normalize-scss'
@import 'base'
!
// Formats
@import 'formats/**/*'
!
// Blocks
@import 'blocks/**/*'
Writing Sass
Configuration
functions
mixins

79. // Silent code
@import 'functions/**/*'
@import 'variables/**/*'
@import 'bourbon'
@import 'mixins/**/*'
!
// Font faces
@import 'font-faces'
!
// Base
@import 'normalize-scss'
@import 'base'
!
// Formats
@import 'formats/**/*'
!
// Blocks
@import 'blocks/**/*'
Writing Sass
.
"## application.css.sass
"## _base.css.sass
"## _font-faces.css.sass
"## blocks
% "## _button.css.sass
% "## _media.css.sass
% $## ...
"## functions
% $## ...
"## mixins
% $## ...
$## variables
$## ...
Default styling,
Basefile

80. Writing Sass
html, body
!
a
!
ul, ol, blockquote
!
li
!
h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dd,
p, figure, pre, table, fieldset, hr, form
!
input, textarea
!
input[type="submit"], button

81. // Silent code
@import 'functions/**/*'
@import 'variables/**/*'
@import 'bourbon'
@import 'mixins/**/*'
!
// Font faces
@import 'font-faces'
!
// Base
@import 'normalize-scss'
@import 'base'
!
// Blocks
@import 'blocks/**/*'
Writing Sass
.
"## application.css.sass
"## _base.css.sass
"## _font-faces.css.sass
"## blocks
% "## _button.css.sass
% "## _media.css.sass
% $## ...
"## functions
% $## ...
"## mixins
% $## ...
$## variables
$## ... 99% of the
code is here!

82. Writing Sass
one block per file
group blocks into
subdirectories

83. Asset Pipeline
Recap
Rails per-controller modularity is not
scalable
OCCSS is a better solution
BEM
How to structure our Rails stylesheets
directory

84. Writing Sass
BEMO

85. Asset Pipeline
Bemo
http://github.com/stefanoverna/bemo
Project starter/Scaffolder
Common BEM blocks library
Grunt tasks for retina-ready sprites and
web fonts

86. THANKS!
question time
Matteo Papadopoulos
@spleenteo
Stefano Verna
@steffoz