Magento 2 Frontend

Magento 2 comes with a distinctive set of improved frontend approaches compared to its predecessor Magento 1.X, today we will look under the hood of Magento 2.0 frontend engine. And describe the most interesting parts in details.

The big difference is that frontend is now updated with newer technologies such as HTML5, CSS3 and jQuery. There are also significant changes/improvements to overall layout manipulation, file structure and a brand new introduction to Magento UI library heavily based on LESS preprocessor with built in compiler.

One of the main goals besides performance and scalability was to serve RWD out of the box. In this article I’ll try to cover some of the main differences, dive into development and demonstrate some practical examples.

Magento UI library

The Magento UI library is a flexible LESS-based frontend library designed to assist Magento theme developers. It employs a set of mixins for base elements to ease frontend theme development and customization.

Components provided by the UI library

The Magento UI library provides the ability to customize and reuse the following user interface elements and properties:

• actions-toolbar
• breadcrumbs
• buttons
• drop-downs
• forms
• icons
• layout
• loaders
• messages
• pagination
• popups
• ratings
• sections
• tabs and accordions
• tables
• tooltips
• typography
• list of theme variables

The following illustration shows a storefront product page containing some of the preceding elements:

Mixin location

You can find the Magento UI library under lib/web/css. Library source .less files are stored under thesource directory, each file contains mixins for configuring a certain element, and in most cases the element coincides with the file name:

lib/web
    ├── css/
    │    ├── docs/ (Library documentation)
    │    ├── source/
    │    │    ├── lib/ (Library source files)
    |    |    |    ├── variables/ (Predefined variables for each mixin)
    │    │    │    ├── _actions-toolbar.less
    │    │    │    ├── _breadcrumbs.less
    │    │    │    ├── _buttons.less
    │    │    │    ├── _dropdowns.less
    │    │    │    ├── _forms.less
    |    |    |    ├── _grids.less
    │    │    │    ├── _icons.less
    │    │    │    ├── _layout.less
    │    │    │    ├── _lib.less
    │    │    │    ├── _loaders.less
    │    │    │    ├── _messages.less
    │    │    │    ├── _navigation.less
    │    │    │    ├── _pages.less
    │    │    │    ├── _popups.less
    │    │    │    ├── _rating.less
    │    │    │    ├── _resets.less
    │    │    │    ├── _responsive.less
    │    │    │    ├── _sections.less
    │    │    │    ├── _tables.less
    │    │    │    ├── _tooltips.less
    │    │    │    ├── _typography.less
    │    │    │    ├── _utilities.less
    │    │    │    └── _variables.less
    │    │    └── _extend.less
    │    │    └── _theme.less
    │    │    └── _variables.less
    │    └── styles.less
    ├── fonts/
    │    └── Blank-Theme-Icons/ (Library custom icons font)
    ├── images/
    │    └── blank-theme-icons.png (Library icons sprite)
    └── jquery/ (Library javascript files)

Predefined variables

If your theme inherits from any Magento out-of-the-box theme, for example Blank, you can easily customize any element of a store page without changing any CSS code or templates. Customization can be performed by simply changing in your theme the values of the predefined variables used in the UI library or parent theme mixins.

The complete list of these variables and their default values are stored inlib/web/css/source/lib/variables. This directory contains a set of files, corresponding to the set of UI library elements, and each of the files lists element-specific variables. For example,lib/web/css/source/lib/variables/_breadcrumbs.less contains variables used in the breadcrumbs() mixin.

To change the default library variables values, specify the new values for the required variables in the<theme_dir>/web/css/source/_theme.less file.

Please mind, that your <theme_dir>/web/css/source/_theme.less file overrides _theme.less of the parent theme (if your theme has a parent). So if you want to inherit the parent theme’s variable values additionally to your changes, add the content of parent’s _theme.less to your file as well.

The following figure shows the product page shown earlier in this topic, after a custom theme was applied. The theme customized Blank by redefining variables only.

Using mixins

You can use a mixin with default variables values, or you can redefine them when calling a mixin. The following paragraphs describe the both ways to call a mixin.

To use a mixin with default values, call the mixin without specifying any parameters. For example:

.breadcrumbs {
    .breadcrumbs();
}

To call a mixin with parameter values different from default, set these values when calling the mixin, like in the following example:

.example-button {
    .button(
        @_button-padding: @button-padding,
        @_button-color: #fff,
        @_button-color-hover: #ccc
    );
}

Variables starting with @_ are private mixin variables used only in this mixin. Variables starting with @(without the underscore) are global, and are listed in lib/web/css/source/lib/variables/.

UI library documentation

You can find detailed information about the Magento UI library in the documentation provided together with the code:

• lib/web/css/docs/source/README.md: describes the Magento UI library structure, naming conventions, and code style.
• lib/web/css/docs: contains a set of .html files with detailed information about the library mixins. Each file is named after the mixin it describes, and contains detailed mixin description and navigation controls to access documentation for other mixins. The documentation is available in a convenient HTML view in the following location in your Magento installation:pub/static/frontend/Magento/blank/en_US/css/docs/index.html

In continuation of the article, I would like to describe you the new theme structure of the Magento 2 platform.

Magento 2 theme structure

Magento 2 theme structure has undergone significant changes:

The whole theme is now organized relatively to “app/design”. The “skin” folder no longer exists. Also, there is a new approach for modules customization: now in the folder with the theme, each module unit will have its own _ catalog with its representation, it will contain templates, JS and CSS/LESS. It is very user-friendly and pragmatic approach. We got a comfortable structure, where everything is sorted in very convenient way.

i18n

This folder contains the .csv translation files.

theme.xml

It is used to initialize the theme. The theme name, theme version, theme parent template, theme preview image should be defined there. By the way, now Magento 2 supports multiple theme inheritance.

composer.json

Magento 2 themes are organized as composer packages.

In order to transform your own theme into a composer package, you will need to add the composer.json configuration file in the theme folder, and also need to register your package at https://packagist.org

Layout updates/improvements

When it comes down to layout manipulation there are some really cool and interesting new improvements.

Before diving into practical examples it’s important to mention that layout files are now divided into smaller parts. Practically explained — what once was a layout handle now is a separate file.
Probably the intention was to simplify the maintenance.

Magento 2 introduces the whole new concept for product/media image resizing actions right from the layout. Layout file view.xml is responsible and it needs to be placed underapp/design/frontend/vendorName/newTheme/etc/ directory. Here is an example of resizing product catalog images in action.

<view xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd”>
<vars module=”Magento_Catalog”>
<var name=”product_small_image_sidebar_size”>100</var>
<var name=”product_base_image_size”>275</var>
<var name=”product_base_image_icon_size”>48</var>
<var name=”product_list_image_size”>166</var>
<var name=”product_zoom_image_size”>370</var>
<var name=”product_image_white_borders”>0</var>
</vars>
</view>

Although I presume that the main goal was to simplify actual resizing process for developers, it will certainly fail under majority of responsive design situations. For example, we don’t want to serve big images for smartphone users on edge connection. Resizing from template files offered a better way to serve out multiple sources for different end user profiles. Right now inspecting a blank theme I only see a situation with just scaling images down in html.

One of the great and more than welcome changes is an introduction of a container wrapper, successor to a core/text_list block type which served the role of a structural block in the previous versions of the system. What is really interesting is a possibility to pass attributes like htmlTag,htmlClass, htmlId directly from layout files.

My personal favorite is move method introduction. It’s a sort of refined action methodset/unsetChild but now the process is much more intuitive. For example, if we need to insert source block1 into destination block2 this is the way how we can do it:

It automatically makes source block1 a child of a destination block 2.

It’s important to mention that Magento 2 offers a system validation for XML files using xml schemas for individual and merged layout files.

The Magento 2 frontend system was significantly improved, now it is more technologically advanced and much easier to work with. Unfortunately, it is impossible to cover all changes and innovations of Magento 2 in one article.In future articles Magesolution will certainly pursue the matter, and we will go into more detail of the Magento 2 technology world.

Source : magento.com