Magento2What’s New in

Theming

Waruna Perera Senior Front End Software Engineer

Agenda

New folder structure Less instead of Sass Layouts UI Components / JS Creating a New Theme

Magento1 theme folders

New Folder Structure

No skin folder New Pub Folder All static files are published in Pub folder Front End themes are located under app/design/frontend/<Vendor>/ Magento default themes can be found under vendor/magento/theme-frontend-<theme_code>

Magento2 theme folders

Pub/static

Theme Inheritance

Static view files - css/js/fonts/images Dynamic view files – less/templates/layouts

Theme Files

Guarantees that if a view file is not found in the current theme, the system searches in the ancestor themes, module view files or library.

Parent theme is defined in the child theme theme.xml file Static files can be overridden by adding a file with the same name on

relevant location .less (even though they are not static files) files are also overridden

by a file with same name

Magento/test/theme.xml

Magento/test/etc/view.xml

Extending Layouts Unlike templates or images, layout can not be overridden, but only

extended Layouts are called in order of:

I. Current them layoutsII. Ancestor theme layoutsIII. Module layout for frontend areaIV. Module layout for base area

Include css files /Magento_Theme/layout/default_head_blocks.xml If the system does not find the included CSS files, it searches for the

same file names with a .less extension.

CSS files locations Css files are located at :

/module_name/web/css/ /web/css/

/Magento_Theme/layout/default_head_blocks.xml

Css/js with module files

Css pre-processor Sass on magento1.9. Less on magento 2 Less files are stored in web/css/source folder

Why Less? Not Sass? Sass is widely used than less Sass needs ruby to compilation Less can be compiled with less resources- grunt, less.js

Less compile methods1. Server-side LESS compilation.

default compilation mode compilation is performed on the server, using the LESS PHP library

2. Client-side LESS compilation. compilation is performed on the browser using less.js library Used on development mode

Less compile methodsStores > Configuration > ADVANCED > Developer.

Less compile with grunt

In server-side compilation mode, you can use the Grunt JavaScript task runner.

Need node.js installed Install Grunt CLI Install Grunt in your Magento directory Install (or refresh) the node.js project dependency for your Magento

instance Add your theme to Grunt configuration -

dev/tools/grunt/configs/themes.js

Magento UI library Flexible LESS-based frontend library designed to assist Magento theme

developers. It employs a set of mixins for base elements to ease frontend theme

development and customization. Located at lib/web/css

Action-toolbar, breadcrumbs, buttons, drop-downs, forms, icons, layout, loaders, messages, pagination, popups

Inbuilt components

Magento UI library

Less Mixins You can use a mixin with default variables values, or you can redefine

them when calling a mixin. Variables starting with _@ are private variables within a mixin.

Require js Including javascript on header can slow down page loading speed Magento2 uses Require js library to overcome this problem RequireJS improves the perceived page load time because it allows

JavaScript to load in the background It enables asynchronous javaScript loading. RequireJS improves the speed and quality of your code by breaking

large application into smaller manageable code RequireJS loads plain JavaScript files as well as more defined modules RequireJS only loads the JS script that the page needs.

• require.js - app\code\Magento\Theme\view\frontend\layout\default_head_blocks.xml• requirejs-config.js - app/code/{Namespace}/{Module}/view/{area}/requirejs-config.js

Env.php

Creating a new theme

Thank you!!