Nächste SlideShare
Web Frontend development: tools and good practices to (re)organize the chaos
- 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
Als Erste(r) kommentieren