Join Enno Stuurman for an in-depth discussion in this video Installing Grunt for compiling Magento CSS, part of Building Magento 2 Themes.
- [Narrator] So in a previous video,…we compiled less to CSS,…using the default Less PHP processor,…and actually Magento uses the Oyejorge Less PHP library.…We did it in combination with the,…as Magento calls itself,…the simple way to change CSS.…Simple because you actually add an extend.less…or a theme.less to your theme,…and you simply add the styles that change…and these styles are all of course on top…of the existing styles,…and on top also means that you create…extra of an unnecessary style declarations.…
These are all added to the final result,…and that could lead to performance issues in your browser,…and even in older Internet Explorer versions.…This will actually cause problems because…you might get too many lines in your CSS.…So, this is a simple way,…simple if you just want to make a few changes,…but it's not the preferable way.…Another reason why the less.php default is not…preferable is because we actually miss source maps.…
And source maps, you can look it up for your own browser…how to activate these.…
Learn how to create and customize Magento 2 themes. Instructor Enno Stuurman begins the course by taking a look at the default Luma theme. After he goes over the structure of Luma, he helps you use that knowledge to build your own unique theme. Enno discusses page layouts in Magento themes, overriding and extending Magento theme CSS, deploying Magento 2 themes to production, and more. Throughout the course, he covers Knockout.js, Grunt, and other tools you need to master Magento theming.
- Creating custom Magento themes
- Changing the theme logo and favicon
- Moving elements inside a theme layout
- Customizing a product page
- Understanding CSS in Magento themes
- Changing your theme style with overrides