Imagine recap-devhub

Magento is an eBay Inc. company. © 2013 Magento, Inc. All rights reserved.

Magento 2 Fronted Architecture

© 2013 Magento, Inc. Page | 2

Magento 2 Platform Goals

Improve PerformanceEasier Upgrades High Quality Code

Update TechnologyEngage with Community Streamline Customization


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


Get Started

github.com/magento/magento2

© 2013 Magento, Inc. Page | 5© 2013 Magento, Inc. Page | 5

2 How to Create a Theme


Single Place Frontend Development

This is where all the magic happens


What Defines a Theme?

Vendor name (brand name)

Theme name

Theme preview for admin panel

Theme configuration file


Theme Configuration File

theme.xmlTheme name

Path to preview

Path to parent theme


Themes Relationships


Multilevel Theme Inheritance

VendorName/Imagine

Module/view/frontend Magento/blank

VendorName/NewYear VendorName/SeasonSales


Apply Theme


3 How to Work with CSS


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


Magento UI Library Documentation

lib/web/css/docs


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


CSS Extension

css/source/extend.less


NewYear Theme

NewYear



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


NewYear Theme: Image fallback


4 How to Work with XML Layout


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


Layout Extend

Theme/view/frontend/layout


Layout Extend


Layout Override


5 How to Work with Templates


Template Override


Layout Extend

Theme/view/frontend/layout


6 Q&A


7 Thank you!

Imagine recap-devhub

Engineering

Transcript of Imagine recap-devhub