Modern tools for Magento development Part 2

In the web industry there are a lot of tools available to make a developers life easier. Because this ecosystem moves so fast - and it's hard to keep track of everything - I thought it would be a good idea to do a roundup of tools I personally use for Magento development. These slides cover Sass, Compass, Bundler and a method to compartmentalise styling for large websites.

Transcript

1. MagentoWA meetup - 26 August Erfan Imani - @erfanimani Modern tools for Magento development Part 2
2. Sass • CSS pre-processor • Compiles to CSS “Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.” - compass-style.org
3. Two syntaxes • Sass (.sass) • Sassy Css (.scss)
4. VS http://thesassway.com/editorial/sass-vs-scss-which- syntax-is-better .wrapper { margin-left: auto; margin-right: auto; max-width: $site-width; } .wrapper margin-left: auto margin-right: auto max-width: $site-width
5. Usage sass styles.scss > styles.css
6. Usage sass styles.scss > styles.css --watch
7. Compass • Framework for Sass • Allows you to manage settings for a project (config.rb) • Library of handy mixins
8. Config.rb • Cache busting • Control CSS output style • Paths and URL’s • Include functionality from Ruby Gems
9. Usage compass compile project/
10. Usage compass watch project/
11. Bundler • Dependency manager for Ruby Gems
12. Bundler • Dependency manager for Ruby Gems ◦ Gemfile ◦ Gemfile.lock ◦ .bundle/config
13. Bundler • Dependency manager for Ruby Gems ◦ Gemfile ◦ Gemfile.lock ◦ .bundle/config ▪ bundle install --path vendor
14. Integration with Magento • config.rb goes somewhere in theme’s skin folder ◦ skin/frontend/rwd/default/. . . • You tell config.rb where to put generated CSS
15. Folder structure - skin/frontend/{package}/default/ - img/ - js/ - scss/ - _catalog.scss - _grid.scss - styles.scss - css/ - styles.css - config.rb
16. What if you need “homepage.css” ? - skin/frontend/{package}/default/ - scss/ - _catalog.scss - _grid.scss - homepage.scss - styles.scss - css/ - homepage.css - styles.css - config.rb
17. We can do better • Why? ◦ Importing partials - which produce output - might cause certain CSS rules to be included twice on the page ◦ This can become difficult to scale for large projects ▪ The more pages, the longer compilation time ▪ Difficult to manage partials
18. Multiple themes • Overwrite templates • Overwrite any asset in skin folder
19. Multiple themes • Overwrite templates • Overwrite any asset in skin folder Using themes keeps the default theme relevant and clean in terms of CSS/JS and template files
20. Compass and multiple themes • We want to have access to our main theme’s Sass so we can use its variables and mixins
21. Compass and multiple themes • We want to have access to our main theme’s Sass so we can use its variables and mixins • add_import_path ◦ add_import_path "../default/scss"
23. - default/ - img/ - scss/ - components/ - styles.scss - landingpage/ - scss/ - _landingpage.scss - styles.scss
24. - default/ - img/ - scss/ - components/ - styles.scss - landingpage/ - scss/ - _landingpage.scss - styles.scss @include “styles”; @include “landingpage”;
25. - default/ - img/ - scss/ - components/ - styles.scss - landingpage/ - scss/ - _landingpage.scss - styles.scss @include “styles”; @include “landingpage”; @import loop!
26. - default/ - img/ - scss/ - components/ - _styles.default.scss - styles.scss - @include “styles.default”; - landingpage/ - scss/ - _landingpage.scss - styles.scss @include “styles.default”; @include “landingpage”;
27. Thanks!