Building Magento 2 Themes

- [Instructor] So welcome to our Magento 2 Theming 101 series, in which you will learn how to create and customize your own Magento theme. You see here the Magento Luma theme, which is the default Magento customized theme, which is enabled when you download Magento with sample data. In this video, we're going to explain to you the structure of a Magento 2 installation, and especially the important files and directories that you need to know about for theming.

So first let's have a look at the Magento Luma theme. You will find the Magento Luma theme in the Vendor folder. And actually the vendor folder contains all php libraries, and Magento modules, and themes that have been installed with Composer. And Composer is actually a package manager, as I say, themselves, if you want to learn more about it, you can have a look at the getcomposer.org. But now, let's get back to the Magento structure.

We scroll all the way down through the theme, and that's a theme-frontend-luma. So that's in the vendor Magento theme-frontend-luma that we are looking at now. The first folder is the etc folder, which stands for configuration, and there you see the view xml file. This view xml file contains definitions for images, like width and heights, or if you want to change width and heights for specific images like you see the cart page product thumbnail.

This is the file to be. If you scroll down, then we see definitions referring to the product page image gallery. And further down below, there is also definitions with regard to the js bundling, and we'll discuss js bundling in one of our next videos. So let's get back to the structure. The second folder is the internationalization folder, which contains the translation file.

In this case, the English translation, and it contains the translation string, and the translation itself. So here you can add the translation files for your own locale. Then in addition, you see different modules. These are the modules that Magento uses. And you see the original modules here in the vendor folder. Like module-deploy, and module-gift-messages.

But the css for all these modules is organized within the theme. So you see css was in the Magento_AdvancedCheckout for example. So, it's important to know that also modules form a part of a theme, and then the css, which is referring to it. But, these are not the only css which you will find. Because when you're going to do overrides, you'll also see that you can add layout files.

Like for example, in the Magento_Catalog, that you can also add template files, which would be in the templates folder. And you could add javaScript files, which would be in the web.js folder. And if you scroll below, you'll see a media preview image. This is actually the image that you will find in the backends. And it's important to notice that the preview image, this one should be in your theme, because if it's not, Magento will throw an error in the backends.

And then we have the web css folder, which contains general css, with regard to the layouts. You see here, pages, popups, email-variables, and you see a fonts folder. Magento Luma Themes uses icon fonts. So you could also add your custom fonts for example, in the fonts folder. And you see the base images like the logo, which it stands for G image.

In the root of the theme you will find the registration.php, which actually registers the theme within Magento, and you'll see it for the Magento Luma. We will discuss this in the next video, where we're actually going to create our own custom theme, and you will find an xml definition file, which actually shows the name of the theme, the parents of the theme, we'll also discuss that in our next video, that will be Theme Inheritance. And it also here defines the media preview image that we just saw here.

So that's basically the structure of a custom theme. Now we'll use the theme-frontend-luma here. So what other folders are important for theming? First of all we have the app design folder. And this is actually the place where we are going to create our own custom theme, and we're going to create it in the app design frontend folder. Another very important folder is the dev folder.

The dev tools folder contains, for example, the grunt directory, and we're going to use this when we are going to compile less with grunts. That will be the topic of one of our next videos. The very important folder that we have here also for theming, is the lib web folder, and then the lib web css folder. This is the Magento UI library. And it contains stalls for reusable components.

You'll find these in the web css lib, and we'll also discuss that in a later video. The lib web is an important directory to have a look at, because it's also actually is the frontend stack that Magento is using. So we will find all kind of different libraries, like jquery, and like knockoutjs. Some core libraries. So it's good to have a look at this directory too, to see, to have an overview of the frontend stack that you are using.

Another important folder is the pub folder, and that stands for public. The pub static folder is the folder where, in the end, all your frontend files will be generated. So if for example, you see here the css, you see styles. The styles that will show up in your browser, and that the browser will use. And the reason behind this is the main security. So you develop in for example, the app folder, or you app themes or modules in the vendor folder.

But the end result will be only published to the pub static folder, and the pub static folder should only be readable by the browser. In addition, we have in the root of the Magento 2 installation, we see some important files, that is the package.json.sample, and the Gruntfile.js.sample. These files can be used when you want to compile your css with grunts.

So these are the main files and directories that you need to know about when you're developing themes in Magento. We will discuss them more in detail in the next videos. So I hope you like this video. Thank you for watching, and see you in the next video.