Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Magento2 what's new in theming

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

  • Login to see the comments

Magento2 what's new in theming

  1. 1. Magento2 What’s New in Theming Waruna Perera Senior Front End Software Engineer
  2. 2. Agenda  New folder structure  Less instead of Sass  Layouts  UI Components / JS  Creating a New Theme
  3. 3. Magento1 theme folders
  4. 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. 5. Magento2 theme folders
  6. 6. Pub/static
  7. 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. 8. Magento/test/theme.xml
  9. 9. Magento/test/etc/view.xml
  10. 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. 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. 12. /Magento_Theme/layout/default_head_blocks.xml
  13. 13.  Css/js with module files
  14. 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. 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. 16. Less compile methods Stores > Configuration > ADVANCED > Developer.
  17. 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. 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. 19. Magento UI library
  20. 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. 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. 22. Env.php
  23. 23. Creating a new theme
  24. 24. Thank you!!