1.
FRONTEND
(re)organize the chaos

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

3.
Asset Pipeline
a.k.a. Sprockets

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

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

6.
Asset Pipeline
2011 Rails 3.1

7.
Asset Pipeline
2012

8.
Asset Pipeline
Bower
Frontend package manager

9.
Asset Pipeline
+17.000
packages

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

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

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

13.
Asset Pipeline
So we need two
package managers?

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

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

16.
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!

17.
Asset Pipeline
win-win
that was easy.

18.
Asset Pipeline
Compass
“A SASS Framework”

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

20.
Compass
Asset Pipeline
monolithic
approach

21.
Asset Pipeline
Compass soooo slow

22.
Asset Pipeline
Compass php syndrome

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

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

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

26.
Asset Pipeline
Compass vendor prefixes
image-related features

27.
Asset Pipeline
Compass unix-like approach

28.
Asset Pipeline
vendor prefixes

29.
Asset Pipeline
100% Sass mixin library

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

31.
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
}

32.
Asset Pipeline
Compass vendor prefixes
image-related features

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

34.
Asset Pipeline
task management tools

35.
Asset Pipeline
GRUNT GULP BROCCOLI

36.
Asset Pipeline
+3400
tasks
mostly frontend-related

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

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

39.
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"
}
}
});
};

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

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

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

43.
Writing Sass

44.
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

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

46.
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.

47.
Writing Sass

48.
Writing Sass
media object

49.
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>

50.
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

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

52.
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

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

54.
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?

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

56.
Writing Sass
Descendent
selectors
Do not use them.

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

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

59.
Writing Sass
BEM
Block • Element • Modifier

60.
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

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

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

63.
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>

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

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

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

67.
Writing Sass
Structure

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

69.
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/**/*'

70.
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"

71.
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/**/*'

72.
.
"## 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

73.
// 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

74.
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

75.
// 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!

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

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

78.
Writing Sass
BEMO

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

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