Web Frontend development: tools and good practices to (re)organize the chaos
-
Upload
matteo-papadopoulos -
Category
Software
-
view
196 -
download
0
description
Transcript of Web Frontend development: tools and good practices to (re)organize the chaos
![Page 1: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/1.jpg)
FRONTEND (re)organize the chaos
![Page 2: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/2.jpg)
FRONTEND (re)organize the chaos
Matteo Papadopoulos@spleenteo
@steffozStefano Verna
www.cantierecreativo.net
![Page 3: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/3.jpg)
![Page 4: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/4.jpg)
Asset Pipelinea.k.a. Sprockets
![Page 5: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/5.jpg)
“The new pipeline makes assets a first class citizen in the
Rails stack.”
Asset Pipeline
![Page 6: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/6.jpg)
Asset Pipeline
gem 'jquery-rails'!
//= require 'jquery'
![Page 7: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/7.jpg)
Asset Pipeline
2011Rails 3.1
![Page 8: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/8.jpg)
Asset Pipeline
2012
![Page 9: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/9.jpg)
Asset Pipeline
BowerFrontend package manager
![Page 10: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/10.jpg)
Asset Pipeline
+17.000packages
![Page 11: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/11.jpg)
Asset Pipeline
$ npm install -g bower$ bower init
![Page 12: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/12.jpg)
Asset Pipeline
{ "name": "my-project", "dependencies": { "jquery-ui": "~1.11.1", "jquery": "~2.1.1" }}
$ cat bower.json
![Page 13: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/13.jpg)
Asset Pipeline
$ tree bower_components -L 1
./bower_components"## jquery$## jquery-ui
![Page 14: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/14.jpg)
Asset Pipeline
So we need two package managers?
![Page 15: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/15.jpg)
Asset Pipeline
Rails AssetsFrictionless proxy between Bundler and Bower
![Page 16: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/16.jpg)
Asset Pipeline
source 'https://rubygems.org'source 'https://rails-assets.org'!
gem 'rails-assets-jquery-ui'
![Page 17: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/17.jpg)
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!
![Page 18: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/18.jpg)
Asset Pipeline
win-winthat was easy.
![Page 19: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/19.jpg)
Compass“A SASS Framework”
Asset Pipeline
![Page 20: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/20.jpg)
Compass
vendor prefixes typography vertical rhythm grid reset helper functions image-related features
Asset Pipeline
![Page 21: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/21.jpg)
Compass
Asset Pipeline
monolithic approach
![Page 22: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/22.jpg)
Compass soooo slow
Asset Pipeline
![Page 23: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/23.jpg)
Compass php syndrome
Asset Pipeline
![Page 24: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/24.jpg)
Compass
Asset Pipeline
box-shadow: 10px 10px 5px red;
![Page 25: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/25.jpg)
Compass
Asset Pipeline
+box-shadow(red 10px 10px 5px)
box-shadow: 10px 10px 5px red;
![Page 26: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/26.jpg)
Compass
vendor prefixes typography vertical rhythm grid reset helper functions image-related features
Asset Pipeline
![Page 27: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/27.jpg)
Compassvendor prefixes image-related features
Asset Pipeline
![Page 28: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/28.jpg)
Compass unix-like approach
Asset Pipeline
![Page 29: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/29.jpg)
Asset Pipeline
vendor prefixes
![Page 30: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/30.jpg)
Asset Pipeline
100% Sass mixin library
![Page 31: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/31.jpg)
Asset Pipeline
CSS post-processorAutoprefixer
gem 'autoprefixer-rails'
![Page 32: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/32.jpg)
Asset Pipeline
a { display: flex;}
> 1%last 2 versionsFirefox ESROpera 12.1
a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex}
![Page 33: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/33.jpg)
Compassvendor prefixes image-related features
Asset Pipeline
![Page 34: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/34.jpg)
Asset Pipeline
image-related features
sprites webfont high DPI images support lossless image compression …
![Page 35: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/35.jpg)
Asset Pipeline
task management tools
![Page 36: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/36.jpg)
Asset Pipeline
GRUNT GULP BROCCOLI
![Page 37: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/37.jpg)
Asset Pipeline
+3400tasks
mostly frontend-related
![Page 38: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/38.jpg)
Asset Pipeline
$ npm install -g grunt-cli
![Page 39: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/39.jpg)
Asset Pipeline
$ cat package.json{ "name": "my-project", "dependencies": { "grunt": "~1.11.1", "grunt-bemo": "~2.1.1", ... }}$ npm install
![Page 40: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/40.jpg)
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" } } });};
![Page 41: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/41.jpg)
Asset Pipeline
$ grunt bemo!
Running "bemo-sprites" task...!
Running "bemo-webfonts" task...
![Page 42: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/42.jpg)
Asset Pipeline
JS/Coffee code linter JS/Coffee code style checker Live reload SVG/PNG/JPG optimizer Inline assets Unused CSS removal ...
![Page 43: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/43.jpg)
Asset Pipeline
RecapUse Bower packages, not gems Rails Assets Replace Compass Bourbon/Autoprefixer Grunt/Gulp/Broccoli
![Page 44: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/44.jpg)
Writing Sass
![Page 45: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/45.jpg)
Writing Sass
$ 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
Rails conventions
![Page 46: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/46.jpg)
OOCSSObject-oriented CSS
Writing Sass
Organize the chaos v1 2012 - http://goo.gl/6ZRJm4
![Page 47: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/47.jpg)
OOCSS
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.
Writing Sass
![Page 48: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/48.jpg)
![Page 49: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/49.jpg)
![Page 50: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/50.jpg)
![Page 51: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/51.jpg)
Writing Sass
![Page 52: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/52.jpg)
![Page 53: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/53.jpg)
Writing Sass
media object
![Page 54: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/54.jpg)
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>
![Page 55: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/55.jpg)
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
![Page 56: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/56.jpg)
Writing Sass
Location indipendenceLet the context choose your positioning
Be fluid: always expand to take the full width of the container
![Page 57: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/57.jpg)
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
![Page 58: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/58.jpg)
Writing Sass
ID selectorsLimit reuse within the same page
Tag selectorsForce a semantic Carpet bombing
![Page 59: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/59.jpg)
.media display: table width: 100%!.media .img, .media .body display: table-cell vertical-align: top!.media .img padding-right: 10px
Writing Sass
Wait, what about descendent selectors?
![Page 60: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/60.jpg)
Writing Sass
Descendent selectorsCarpet bombing (again) Potential name clashing
![Page 61: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/61.jpg)
Writing Sass
Descendent selectorsDo not use them.
![Page 62: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/62.jpg)
Writing Sass
.media display: table width: 100%!
.media .img, .media .body display: table-cell vertical-align: top!
.media__img padding-right: 10px
![Page 63: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/63.jpg)
Writing Sass
.media display: table width: 100%!
.media__img, .media__body display: table-cell vertical-align: top!
.media__img padding-right: 10px
![Page 64: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/64.jpg)
BEM
Writing Sass
Block • Element • Modifier
![Page 65: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/65.jpg)
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
![Page 66: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/66.jpg)
Writing Sass
Block (CSS object).nav-bar.nav-bar__logo Block element
![Page 67: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/67.jpg)
Writing Sass
Block (CSS object).nav-bar.nav-bar__logo Block element
.nav-bar--primary Modifier
![Page 68: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/68.jpg)
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>
![Page 69: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/69.jpg)
Writing Sass
.nav-bar--primary__logo--dark
![Page 70: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/70.jpg)
Writing Sass
But it's verbose and ugly and...!CSS has limited character set. Deal with it.
![Page 71: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/71.jpg)
Writing Sass
Remember the pros!No more name clashing !
No more overrides !
Trivial to understand and maintain your codebase
![Page 72: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/72.jpg)
![Page 73: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/73.jpg)
Structure
Writing Sass
![Page 74: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/74.jpg)
Writing Sass
."## application.css.sass"## _base.css.sass"## _font-faces.css.sass"## blocks% "## _button.css.sass% "## _media.css.sass% $## ..."## functions% $## ..."## mixins% $## ...$## variables $## ...
Root file
![Page 75: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/75.jpg)
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/**/*'
![Page 76: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/76.jpg)
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"
."## application.css.sass"## _base.css.sass"## _font-faces.css.sass"## blocks% "## _button.css.sass% "## _media.css.sass% $## ..."## formats% "## _align.css.sass% "## _font-size.css.sass% $## ..."## functions% $## ..."## mixins% $## ...$## variables
![Page 77: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/77.jpg)
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/**/*'
![Page 78: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/78.jpg)
."## 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
![Page 79: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/79.jpg)
// 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
![Page 80: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/80.jpg)
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
![Page 81: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/81.jpg)
// 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!
![Page 82: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/82.jpg)
Writing Sass
one block per file
group blocks into subdirectories
![Page 83: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/83.jpg)
Asset Pipeline
RecapRails per-controller modularity is not scalable OCCSS is a better solution BEM How to structure our Rails stylesheets directory
![Page 84: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/84.jpg)
BEMO
Writing Sass
![Page 85: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/85.jpg)
Asset Pipeline
Bemohttp://github.com/stefanoverna/bemo
Project starter/Scaffolder Common BEM blocks library Grunt tasks for retina-ready sprites and web fonts
![Page 86: Web Frontend development: tools and good practices to (re)organize the chaos](https://reader033.fdocuments.in/reader033/viewer/2022051820/553b7f34550346f92f8b46e1/html5/thumbnails/86.jpg)
THANKS! question time
Matteo Papadopoulos@spleenteo
@steffozStefano Verna