Magento 2 has definitely come out with an improved frontend. The up and coming technologies like HTML, CSS3 and JQuery have been utilized in creating the frontend for Magento2. Few elements like the layout, and file structure have been refurbished for Magento 2. All new Magento UI library has been incorporated for the functioning of this new version.
Incorporating New Theme
Let's say you want to create a new theme. You will require the theme_root_dir/theme.xml file to initiate your new theme. Apart from initializing the theme, you will also need to include the placeholder image, declare which version of the theme you are incorporating etc. below is the code that explains what all needs to be included in the initiation process. This will seem almost similar to how it works for Magento.
- You will see that the new version does not include the skin directory. Instead, all the different files and folders of the theme are located within the app structure
- There is a module specific view directory which includes JS, CSS, template and layout files that are specific to the particular module in concern. This way finding the files is easy
You can declare the theme as you used to do it in Magento's original version. In this new version the path app/design/frontend/base/default directory is not included which means the blank theme would be your starting point. This structure is suitable for minimal customizations or modifications. It is possible to cause custom development using this structure, but chances are it might affect the overall performance of your store.
In this new version, layout files are further divided into smaller parts in order to ease out maintenance. In the previous version, there were different handles for the layout which have been transformed into individual files in this version.
In this new version, it is easier to resize the images for the different devices. The layout file view.xml placed in the following path app/design/frontend/vendorName/newTheme/etc/ is responsible for resizing. Here's an example code written to resize images
Though this has been created with the aim of simplifying the whole image resizing process for the developers, this might not work well with the responsive themes. It was easier and more flexible to resize the images using template files.
With this new version, a container wrapper has been introduced which allows you to pass the attributes like htmlTag, htmlClass and htmlID directly using the layout files. Even the move method introduced with this new version is interesting!if you want to move block 1 into block 2, the new version automatically sets block 1 the child and block 2 the destination of the child. It also includes system validation for the xml files, which includes both individual and merged layout files present within the structure.