Join Enno Stuurman for an in-depth discussion in this video Understanding CSS in Magento themes, part of Building Magento 2 Themes.
- [Instructor] In this, and in the next videos,…we're going to change the look and feel…of our Magento 2 web shop.…So we're going to look at the CSS in Magento 2.…But before we are going to change,…we first going to have a look at the structure,…and the way in which Magento 2 compiles its CSS.…So what styles do we have in the…default Magento 2 installation?…Besides the calendar CSS, more important we have…the styles-m, which stands for styles mobile,…and we have the styles-l which stands for styles large…and those are the styles that apply to screens…with a min width of 768 pixels.…
So how is the, are the styles built up…in the Magento 2 web shop?…In our custom theme, we haven't had yet edit or changed…any CSS, so you won't find any CSS files there.…Instead, we have to look at the parent theme,…which is the theme front end blank.…And it is in front end blank, in the web CSS folder,…here we see our styles-m and styles-l.…But it's not CSS, actually it is less.…
And less is a CSS pre processor.…If you're not familiar with it,…
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