More Related Content
Similar to Imagine recap-devhub
Similar to Imagine recap-devhub (20)
More from Magento Dev (17)
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
- 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
- 10. © 2013 Magento, Inc. Page | 10
Multilevel Theme Inheritance
VendorName/Imagine
Module/view/frontend Magento/blank
VendorName/NewYear VendorName/SeasonSales
- 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
- 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
- 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
- 27. © 2013 Magento, Inc. Page | 27© 2013 Magento, Inc. Page | 27
5 How to Work with Templates
- 30. © 2013 Magento, Inc. Page | 30
Layout Extend
Theme/view/frontend/layout
- 32. © 2013 Magento, Inc. Page | 32© 2013 Magento, Inc. Page | 32
7 Thank you!