Default Magento 2 themes
By default, Magento 2 comes with two different themes:
- Luma: Created with the purpose to initiate the understanding of Magento 2's theme structure. It's highly recommended not to use this as your production theme.
- Blank: Provides the basic theme structure, used as a boilerplate to develop new themes in Magento 2.
You can easily preview the Luma theme on the Magento demonstration site at http://demo2.aheadworks.com , provided by aheadWorks Company (http://www.aheadworks.com).
Magento Luma theme
The Luma theme implements responsive web design (RWD) as a good practice to use in theme development, and inherits code and layout from the Blank theme. The Magento 2 Blank theme, found in the vendor/magento/theme-frontend-blank folder, is the basic Magento theme and is declared as the parent theme of Luma. How is it possible? Logically, Magento has distinct folders for every theme, but Magento is very smart and reuses code. Magento takes advantage of theme inheritance. You will see more about theme inheritance in the next chapter.
The Luma theme is what you see when you install Magento 2. The homepage is based upon a one-column structure:
In the preceding screenshot, you can see that the Luma theme works with good design principles through a distinction between each section and product promotions used for content. The categories and the shopping cart icon are at the top of the page. Near the bottom, we have the Hot Sellers section, which provides some available products. Finally, the bottom of the page provides some additional information, such as an About us link.
Product pages display pictures of featured products in a two column layout:
On the product page, you can see options such as Compare Products and Wish List, a breadcrumb trail to where the page is located within your store's hierarchy, as well as photographs of the product, which can be enlarged:
The category page reverts to a two-column layout, presenting products as a grid by default. As is common across many Magento themes, you're able to view products in two distinct ways. The grid view displays the products in a grid:
The list view allows more information about the products to be displayed alongside the product photograph and other information shown in the grid view:
The Luma theme's style is based on the Magento user interface (UI) library and uses CSS3 media queries to work with screen width, adapting the layout according to the device that accesses it. In the next chapter, we will see how Magento's UI works.
Magento Blank theme
The Blank theme provides all the conceivable files that a Magento store requires to run without error, so that the new custom themes built will not cause errors if a file does not exist within it.
The Blank theme does not contain all of the CSS and images required to style your store, as you'll be doing this with our custom theme.
Tip
Don't change the Magento vendor package!
It is important that you do not edit any files in the vendor/magento package and that you do not attempt to create a custom theme in the vendor directory, as this will make fully upgrading Magento difficult. Make sure any custom themes you are working on are within their own design package; for example, your theme's files should be located in app/design/frontend/<Vendor>/.