際際滷

際際滷Share a Scribd company logo

Best practice for magento theming by shrikant vaghela

V
vijaygolani

This document provides an agenda and guidelines for a Magento Meetup Ahmedabad event. The agenda includes best practices for building Magento 2 themes, customizing LESS files and mixins, custom and third party modules, XML files, wording customization, critical CSS path, icon fonts, and useful links. Guidelines suggest extending rather than overriding files, creating mixins and classes for repeated styles, customizing modules within their own scope, and using translation files rather than modifying templates for text changes.

1 of 17
Download to read offline
#MMAM D
#MMAM D Welcome Everyone To Magento Meetup Ahmedabad
#MMAM D Shrikant Vaghela Front End Developer Twitter: @shrikantvaghela Email: shrikant.vaghela@gmail.com
#MMAM D Agenda Best practice for building Magento 2 theme LESS files customization LESS mixins Custom module and Third Party Module .xml file customization Customizing wording CSS critical path IcoMoon Usefull Links
#MMAM D Best Practice LESS Files Customization While Creating custom theme always extend styling by adding _extend.less file Do not override complete _module.less file. Like if you want to customizing header and footer styling then you can extent in app/design/frontend/<Vendor>/<Vendor_theme>/Magento_Theme/web/css/source/ _extend.less You can also extend header and footer separate file files by using @import directive in _extend.less @import module/_header.less"; @import module/_footer.less";
#MMAM D Less Mixins Custom class and Mixins Do not repeat same type of styling. Create class or mixing and call it when required. Example: Mixin: @abs-no-display: { display: none;}; Use: .test { &:extend(.abs-no-display all); }
#MMAM D Custom class and Mixins Also we can convert browser based properties into mixing and user whenever required. For this we can extend lib/web/css/source/lib/_utilities.less In _utilities.less you can find properties for background gradient, visibility, arrow, placeholder, etc. Also provide support for vendor prefixes. But only provide support for webkit based borwsers like Chrome and Safari, Internet Explorer and Morzila Firefox. If you want to support for more browsers then you have to covert it from Autoprefixer. Previously There was support in Grunt Autoprefixer but now its depricated. https://autoprefixer.github.io/
#MMAM D Example: .example { transition: all .5s; background: linear-gradient(to bottom, white, black); } OutPut: .example { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); background: -o-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black); }
#MMAM D Custom Module and Third Party Module Custom Module If you are creating styling for Custom module then it must be add in within the module. app/code/Company/Module/view/frontend/web/css/source/_module.less Do not extend it into custom theme. Third Party Module When we use Third Party Module then we know that it will update from different source. In this case we can extend its styling into our custom theme. But we have to make sure that if remove Module for any reason we have to be remove the extended file too. app/design/frontend/<Vendor>/<Vendor_theme>/ABC_Module/web/css/source/_ext end.less
#MMAM D .xml Files Customization While Creating custom theme do not override complete file from parent. Create a new file with same name in your custom theme in respective module. Add below code: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page _configuration.xsd"> <body> </body> </page> And then you can start your customization.
#MMAM D Example: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page _configuration.xsd"> <body> <referenceBlock name="copyright" remove="true" /> <move element="top.links" destination="header-wrapper" after="top.search"/> <referenceContainer name="header.container"> <container name="header.content.wrapper" label="Header Content Wrapper" htmlTag="div" htmlClass="header-content-wrapper" /> </referenceContainer> </body> </page> If need to create a new block, create it via .xml with help of <container> and <block> do not extend phtml file for it which are already present in theme.
#MMAM D Customizing wordings If there is a requirement of change in any text in the theme then use translation file for it. Do not override file making this change. Example: Proceed to Checkout,Checkout Apply Discount Code,Got a Discount Code? "Enter your email address","Join our newsletter", module, Magento_Newsletter "Details","Description", module, Magento_Catalog "My Wish List","My Wishlist", module, Magento_Customer
#MMAM D Critical CSS path Critical CSS path provides a minified inline critical css in <head> section of the page. If critical css path enabled then web page will not be displayed until these files are loaded. You can enable it from Stores > Settings > Configuration > ADVANCED > Developer tab Or from CLI bin/magento config:set dev/css/use_css_critical_path 1 It should be located at app/design/frontend/<Vendor_name>/<Theme_name>/web/css/critical.css It improves the time of rendering pages. https://www.npmjs.com/package/penthouse
#MMAM D IcoMoon Better result than retina images Reduce speed of loading multiple images Takes a single http request Always includes all supported formats like .eot, .ttf, .woff, .woff2 and svg https://icomoon.io/ https://everythingfonts.com/ttf-to-woff2 Lets see the live demonstration How to generate icons form IcoMoon
#MMAM D Usefull Links for Front End Developers 1. https://lesstester.com/ 2. https://beautifier.io/ 3. https://autoprefixer.github.io/ 4. https://www.iconfinder.com/ 5. https://thenounproject.com/
#MMAM D General Practice Always Use Coding Standards while writing your code. https://devdocs.magento.com/guides/v2.3/coding-standards/bk-coding-standards. html Always validate your code https://beautifier.io/, https://validator.w3.org/ Learn Basic Php to understand code part. It will help you to move ahead and you will require less help from back-end developer. For Example, how to get attribute value, how to apply condition if required. Do not overload common javascript file.
#MMAM D Thank You All For Attending

More Related Content

Best practice for magento theming by shrikant vaghela

  • 3. #MMAM D Shrikant Vaghela Front End Developer Twitter: @shrikantvaghela Email: shrikant.vaghela@gmail.com
  • 4. #MMAM D Agenda Best practice for building Magento 2 theme LESS files customization LESS mixins Custom module and Third Party Module .xml file customization Customizing wording CSS critical path IcoMoon Usefull Links
  • 5. #MMAM D Best Practice LESS Files Customization While Creating custom theme always extend styling by adding _extend.less file Do not override complete _module.less file. Like if you want to customizing header and footer styling then you can extent in app/design/frontend/<Vendor>/<Vendor_theme>/Magento_Theme/web/css/source/ _extend.less You can also extend header and footer separate file files by using @import directive in _extend.less @import module/_header.less"; @import module/_footer.less";
  • 6. #MMAM D Less Mixins Custom class and Mixins Do not repeat same type of styling. Create class or mixing and call it when required. Example: Mixin: @abs-no-display: { display: none;}; Use: .test { &:extend(.abs-no-display all); }
  • 7. #MMAM D Custom class and Mixins Also we can convert browser based properties into mixing and user whenever required. For this we can extend lib/web/css/source/lib/_utilities.less In _utilities.less you can find properties for background gradient, visibility, arrow, placeholder, etc. Also provide support for vendor prefixes. But only provide support for webkit based borwsers like Chrome and Safari, Internet Explorer and Morzila Firefox. If you want to support for more browsers then you have to covert it from Autoprefixer. Previously There was support in Grunt Autoprefixer but now its depricated. https://autoprefixer.github.io/
  • 8. #MMAM D Example: .example { transition: all .5s; background: linear-gradient(to bottom, white, black); } OutPut: .example { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); background: -o-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black); }
  • 9. #MMAM D Custom Module and Third Party Module Custom Module If you are creating styling for Custom module then it must be add in within the module. app/code/Company/Module/view/frontend/web/css/source/_module.less Do not extend it into custom theme. Third Party Module When we use Third Party Module then we know that it will update from different source. In this case we can extend its styling into our custom theme. But we have to make sure that if remove Module for any reason we have to be remove the extended file too. app/design/frontend/<Vendor>/<Vendor_theme>/ABC_Module/web/css/source/_ext end.less
  • 10. #MMAM D .xml Files Customization While Creating custom theme do not override complete file from parent. Create a new file with same name in your custom theme in respective module. Add below code: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page _configuration.xsd"> <body> </body> </page> And then you can start your customization.
  • 11. #MMAM D Example: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page _configuration.xsd"> <body> <referenceBlock name="copyright" remove="true" /> <move element="top.links" destination="header-wrapper" after="top.search"/> <referenceContainer name="header.container"> <container name="header.content.wrapper" label="Header Content Wrapper" htmlTag="div" htmlClass="header-content-wrapper" /> </referenceContainer> </body> </page> If need to create a new block, create it via .xml with help of <container> and <block> do not extend phtml file for it which are already present in theme.
  • 12. #MMAM D Customizing wordings If there is a requirement of change in any text in the theme then use translation file for it. Do not override file making this change. Example: Proceed to Checkout,Checkout Apply Discount Code,Got a Discount Code? "Enter your email address","Join our newsletter", module, Magento_Newsletter "Details","Description", module, Magento_Catalog "My Wish List","My Wishlist", module, Magento_Customer
  • 13. #MMAM D Critical CSS path Critical CSS path provides a minified inline critical css in <head> section of the page. If critical css path enabled then web page will not be displayed until these files are loaded. You can enable it from Stores > Settings > Configuration > ADVANCED > Developer tab Or from CLI bin/magento config:set dev/css/use_css_critical_path 1 It should be located at app/design/frontend/<Vendor_name>/<Theme_name>/web/css/critical.css It improves the time of rendering pages. https://www.npmjs.com/package/penthouse
  • 14. #MMAM D IcoMoon Better result than retina images Reduce speed of loading multiple images Takes a single http request Always includes all supported formats like .eot, .ttf, .woff, .woff2 and svg https://icomoon.io/ https://everythingfonts.com/ttf-to-woff2 Lets see the live demonstration How to generate icons form IcoMoon
  • 15. #MMAM D Usefull Links for Front End Developers 1. https://lesstester.com/ 2. https://beautifier.io/ 3. https://autoprefixer.github.io/ 4. https://www.iconfinder.com/ 5. https://thenounproject.com/
  • 16. #MMAM D General Practice Always Use Coding Standards while writing your code. https://devdocs.magento.com/guides/v2.3/coding-standards/bk-coding-standards. html Always validate your code https://beautifier.io/, https://validator.w3.org/ Learn Basic Php to understand code part. It will help you to move ahead and you will require less help from back-end developer. For Example, how to get attribute value, how to apply condition if required. Do not overload common javascript file.