Imagine recap-devhub
Download as PPTX, PDF1 like6,345 views
The document discusses Magento 2's front-end architecture and how to create themes. It covers Magento 2's goals of improving performance, making upgrades easier, and using high-quality code. It also discusses how consumers use multiple devices for purchases and how to get started with Magento 2 on GitHub. The document then provides instructions on how to create a theme by defining its configuration file and structure, working with CSS by extending and overriding styles, manipulating layout using XML, and overriding templates.
Imagine recap-devhub
- 1. Magento is an eBay Inc. company. © 2013 Magento, Inc. All rights reserved. Magento 2 Fronted Architecture
- 2. © 2013 Magento, Inc. Page | 2 Magento 2 Platform Goals Improve PerformanceEasier Upgrades High Quality Code Update TechnologyEngage with Community Streamline Customization
- 3. © 2013 Magento, Inc. Page | 3 Consumers take a multi-device path to purchase Source — Google Inc. 65% Start on a Smartphone 61% Continue on a PC/Laptop 4% Continue on a Tablet 25% Start on a PC/Laptop 11% Start on a Tablet 19% Continue on a Smartphone 5% Continue on a Tablet 10% Continue on a PC/Laptop
- 4. © 2013 Magento, Inc. Page | 4 Get Started github.com/magento/magento2
- 5. © 2013 Magento, Inc. Page | 5© 2013 Magento, Inc. Page | 5 2 How to Create a Theme
- 6. © 2013 Magento, Inc. Page | 6 Single Place Frontend Development This is where all the magic happens
- 7. © 2013 Magento, Inc. Page | 7 What Defines a Theme? Vendor name (brand name) Theme name Theme preview for admin panel Theme configuration file
- 8. © 2013 Magento, Inc. Page | 8 Theme Configuration File theme.xml Theme name Path to preview Path to parent theme
- 9. © 2013 Magento, Inc. Page | 9 Themes Relationships
- 10. © 2013 Magento, Inc. Page | 10 Multilevel Theme Inheritance VendorName/Imagine Module/view/frontend Magento/blank VendorName/NewYear VendorName/SeasonSales
- 11. © 2013 Magento, Inc. Page | 11 Apply Theme
- 12. © 2013 Magento, Inc. Page | 12© 2013 Magento, Inc. Page | 12 3 How to Work with CSS
- 13. © 2013 Magento, Inc. Page | 13 Blank Theme Features Modern Technologies Mobile First Responsive Design Built with Magento UI library Compiled with Built-in PHP LESS Compiler WCAG 2.0 AA Compliant
- 14. © 2013 Magento, Inc. Page | 14 Magento UI Library Documentation lib/web/css/docs
- 15. © 2013 Magento, Inc. Page | 15 Blank Theme Structure Modularized CSS: • Upgradability Magento 2 compiles CSS itself • Performance • Maintenance • No tools required • Anyone can edit styles quickly • LESS Source and CSS is always synchronized
- 16. © 2013 Magento, Inc. Page | 16 CSS Extension css/source/extend.less
- 17. © 2013 Magento, Inc. Page | 17 Blank Theme Structure
- 18. © 2013 Magento, Inc. Page | 18 NewYear Theme NewYear
- 19. © 2013 Magento, Inc. Page | 19 Blank Theme Structure Modularized CSS: • Upgradability Magento 2 compiles CSS itself • Performance • Maintenance • No tools required • Anyone can edit styles quickly • LESS Source and CSS is always synchronized
- 20. © 2013 Magento, Inc. Page | 20 NewYear Theme: Image fallback
- 21. © 2013 Magento, Inc. Page | 21© 2013 Magento, Inc. Page | 21 4 How to Work with XML Layout
- 22. © 2013 Magento, Inc. Page | 22 What is Layout? • Behavior of containers is predictable • A wireframe of a page can be represented by bare containers • With containers, there is no point to having nested elements in blocks
- 23. © 2013 Magento, Inc. Page | 23 Layout Extend Theme/view/frontend/layout
- 24. © 2013 Magento, Inc. Page | 24 Layout Extend
- 25. © 2013 Magento, Inc. Page | 25 Layout Override
- 26. © 2013 Magento, Inc. Page | 26 Layout Override
- 27. © 2013 Magento, Inc. Page | 27© 2013 Magento, Inc. Page | 27 5 How to Work with Templates
- 28. © 2013 Magento, Inc. Page | 28 Template Override
- 29. © 2013 Magento, Inc. Page | 29 Template Override
- 30. © 2013 Magento, Inc. Page | 30 Layout Extend Theme/view/frontend/layout
- 31. © 2013 Magento, Inc. Page | 31© 2013 Magento, Inc. Page | 31 6 Q&A
- 32. © 2013 Magento, Inc. Page | 32© 2013 Magento, Inc. Page | 32 7 Thank you!