● Built on HTML5 and CSS3 technologies● jQuery out of the box (w jQuery UI)

● Preprocessing language● LESS based Magento UI Library

● Out of the box Compiling engines

Hello, Magento 2!

StructureModule files

app/code/Magento/<module_name>/view/frontend/

Theme files

app/design/frontend/<vendor>/<theme_dir>/Magento_<Module_name>/layout

”Layouts” / “Templates” / “Web”

Static filesPub/static

Excluded from fallback mechanism

Files served from cache only

After new module has been installed, you need to clear “pub/static” folder

lib/webPart of the Magento Framework

Contains LESS UI library and Javascript files

Magento ModesDefault

NOT optimized for production, static view files are cached

DeveloperStatic view files are not cached; they are written to the pub/static directory every

time they’re called

ProductionStatic files are cached and served from cache only

Theme● Responsive Default theme

● No more “skin” folder● Infinite fallback mechanism

● Few files required for theme to work● Visual design editor

Create your theme

/app/design/frontend/<vendor>/<Theme_name>

Declare your theme/app/design/frontend/<vendor>/<Theme_name>/theme.xml

Register your theme/app/design/frontend/<vendor>/<Theme_name>/registration.php

Configure images

/app/design/frontend/<vendor>/<Theme_name>/view.xml

Create directories for static files(just like you did in “skin” folder in M1)

/app/design/frontend/<vendor>/<Theme_name>/web/

Working with templates●Root.phtml as root template for all pages in

applicationapp/code/Magento/Theme/view/base/templates/root.phtml

●E-mail templates inside Sales moduleapp/code/Magento/Sales/view/frontend/email

Overridingcode/Magento/Checkout/view/frontend/templates/cart.phtml

to

desing/frontend/<vendor>/<theme>/Magento_Checkout/templates/cart.phtml

Layouts●What was once called “handle”, is now separated

layout file●<container> , <referenceContainer>,

<referenceBlock>

<container name="container_name">...</container>

<referenceBlock name="block_name">...</referenceBlock>

<referenceContainer name="name">...</referenceContainer>

Extending vs overriding layoutscode/Magento/Checkout/view/frontend/layout/file.xml

to

<theme>/Magento_Checkout/layout/file.xml

vs

code/Magento/Checkout/view/frontend/layout/file.xml

to

<theme>/Magento_Checkout/layout/overide/<theme>/file.xml

CSS● LESS Preprocessor

● LESS UI Library● 2 compilation modes

Server-side Compilation● Default compilation mode

● ONLY option in production mode● Compilation is performed on the server, using LESS PHP Library

Client-side Compilation● Available in Default and developer modes

● Files are compiled in browser, using LESS.js

//@Magento_import● Magento-specific LESS directive

● files with the same name, from different locations can be included

● Must be commented out with two slashes //

Questions?

Thank you! :)