Magento2 what's new in theming. comparison of magento2 theming with magento1

1. Magento2
What’s New in Theming
Waruna Perera
Senior Front End Software Engineer

2. Agenda
 New folder structure
 Less instead of Sass
 Layouts
 UI Components / JS
 Creating a New Theme

3. Magento1 theme folders

4. 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>

5. Magento2 theme folders

6. Pub/static

7. 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

8. Magento/test/theme.xml

9. Magento/test/etc/view.xml

10. Extending Layouts
 Unlike templates or images, layout can not be overridden, but only extended
 Layouts are called in order of:
I. Current them layouts
II. Ancestor theme layouts
III. Module layout for frontend area
IV. Module layout for base area

11. 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/

12. /Magento_Theme/layout/default_head_blocks.xml

13.  Css/js with module files

14. 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

15. Less compile methods
1. 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

16. Less compile methods
Stores > Configuration > ADVANCED > Developer.

17. 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

18. 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

19. Magento UI library

20. 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.

21. 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 - appcodeMagentoThemeviewfrontendlayoutdefault_head_blocks.xml
• requirejs-config.js - app/code/{Namespace}/{Module}/view/{area}/requirejs-config.js

22. Env.php

23. Creating a new theme

24. Thank you!!