Revised front-end architecture in Magento 2

Revised front end architecture in Magento

Study of Magento 2 architecture features

There are many changes in a front-end approach in comparison with Magento 1.n versions, for example, the inclusion of HTML5 and CSS3 newcomers, and, certainly, jQuery as a substitute for prototype.

Additionally, Magento now offers a new UI library, which uses a LESS pre-processor with a compiler. Other enhancements will allow you to better manage layout and file structure. We should also mention one of the most important aims of Magento 2 – the possibility to handle RWD out of the box. If you are still interested, read further to have a closer look of what Magento 2 offers.

Theme workflow

Magento presents several ways to create a new theme; however, the overall concept has not changed since 1.n versions. To launch a new theme, make use of the theme_root_dir/theme.xml file, or you can preview a placeholder image, set up the parent theme, and so on.

<themexmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
 <title>SaM</title>
  <version>1.0.0.0</version>
  <parent>Magento/blank</parent>
  <media>
    <preview_image>media/preview3.jpg</preview_image>
  </media>
</theme>

 

Magento 2 no longer uses the skin directory, so now it arranges all components directly under the app structure. Each component possesses a separate VIEW directory, where all files are saved (LESS files, JS, templates, etc.). Therefore, the Magento core is set individually from the visual content; in order to override the standard directory arrangement, you have to insert a module directory with different hierarchy.

Learn the next screenshot for an example of the new Magento architecture:

Revised Files Templates Catalog

If you want to alter anything in the 2columns-left.phtml file, then you have to follow folder hierarchy for this module (Magento_Theme in the screenshot). Interesting information about the theming inheritance: it was fully reworked in order to guarantee endless fallbacks. In addition, the app/design/frontend/base/default directory was excluded from Magento 2. Following the recommendations, it is better to fall back to a blank theme, which would be a starting notch.

Actually, such approach might not be a positive thing. If the development is vastly different from standard settings, then you can get a negative impact on the performance. But that is not relevant if your project needs modest alterations.

Layout Enchacement

You can benefit from the much-improved layout, as its files are divided into minor pieces from now on. For example, previously you used a layout handle, while today you have a separate file. Presumably, a simpler maintenance was the goal of this change.

Revised Layout View Page

 

With Magento 2, it is also simpler to resize product images directly from the layout. Just put the layout view.xml file under app/design/frontend/vendorName/newTheme/etc/ directoryto be able to apply the changes. On the other hand, there is a downside of this approach. Such way of resizing images is not convenient in most responsive design layouts. Before, it was possible to resize images from template files in order to serve out different sources for various end user profiles.

<viewxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd">
   <varsmodule="Magento_Catalog">
       <varname="product_small_img_sidebar_size">120</var>
       <varname="product_base_img_size">285</var>        
       <varname="product_base_img_icon_size">64</var>
       <varname="product_list_img_size">176</var>
       <varname="product_zoom_img_size">380</var>
       <varname="product_img_white_borders">1</var>
   </vars>
</view>

 

Another important step forward is that Magento 2 includes a container wrapper as the successor of a core/text_list block type, and now it is possible to serve attributes (like htmlId or htmlTag) straight from the layout files.

The next valuable feature is that you can verify XML files with the help of XML schemas for both separate and united layout files.

Magento 2 UI Library

As Magento uses own compiler to assemble CSS straight from PHP, LESS pre-processor is selected to develop UI library. At the same time, there is no reason in restricting yourself, because you can concentrate on simple CSS or SASS. However, it is supposed you use the standard pre-processor for a much faster workflow: you will be able to edit files while the system will busy itself with compiling. Magento UI library ensures you have a great number of CSS mixins and predefined variables so it will be less challenging for you.

In the next screenshots, you can see an example of how UI extending works. Firstly, you need to locate the Magento UI library (store_root_dir/lib/web/css/source/lib).

Revised Library Magento PHP

 

Then, we need to import UI lib to the standard LESS file, which is styles.less, for a new theme.

@import “source/lib/lib.less"

Next, if, for example, it is necessary to use own fonts in the standard @font-face mixin, find firstly this mixin in the store_root_dir/lib/web/css/source/lib/typography.less file. Open Sans is set as default, and we will change it with another font.

Check out the store_root_dir/lib/web/css/source/lib/typography.less file to locate the default mixin for @font-face. As you can see in the next screenshot, there are couple of important parameters–@family-name and @font-path.

.font-face(
   @family-name,
   @font-path,
   @font-weight: normal,
   @font-style: normal
){
   @font-face {
       font-family:@family-name;
       src:url('@{font-path}.eot');
       src:url('@{font-path}.eot?#iefix') format('embedded-opentype'),
       url('@{font-path}.woff') format('woff'),
       url('@{font-path}.ttf') format('truetype'),
       url('@{font-path}.svg#@{family-name}') format('svg');
       font-weight:@font-weight;
       font-style:@font-style;
   }
}

 

In order to expand the default typography.less file, copy it to the theme directory, and you will see something similar to the next image.

/* Magento/blank */

.magento-reset();   // Reset default styles with magento_reset

// Import theme vars overrides and mixins
@import "source/lib/lib.less"; // Import all lib files
@import "source/theme.less"; // import theme styles

@baseDir: "../"; //default

@import "source/typography.less"; // extending theme typography
@import "source/lib/responsive.less"; // extending responsive styles

 

Once you have finished, add a new font to the @font-face mixin, as it is shown below.

.font-face(
 @family-name: 'Lovelo Black',
 @font-path: '@{baseDir}fonts/lovelo_black/Lovelo_Black',
 @font-weight: 250,
 @font-style: normal
);

 

Magento UI library is an easily extensible part of Magento 2; however, you can find it more intricate than it is. This does not help when you need to create sophisticated individual responsive projects, which are certainly different from the standard layout. To give you an example of what we mean, think of three default variables, including @desktop, @tablet, and @mobile. In some regard, this may be considered too restricted, as there are many more scales. Nevertheless, do not forget that it is not prohibited to develop and extend the system. We may use a different CSS pre-processor to build own architecture.

We are also planning to cover the jQuery inclusion in Magento 2 in the nearest future.

So what is the result ?

We are sure that most changes definitely make this new platform much better. Thanks to the inclusion of numerous new technologies–RequireJS, PHP 5.5.n, Apache 2.2, and CSS3/HTML5 to name the least, Magento 2 offers an unparalleled experience when we speak about the front-end development.

If you want to know more about Magento, contact Sam Ecommerce Magento Development Team.

Comments (2):
Posted on Friday, December 04, 2015 by :
Nice Information, But i need to create my custom theme and where to add my custom css? Can you please help me for the same? Thanks
Posted on Monday, March 14, 2016 by :
Thanks for your question. We will answer it privately. Sam Ecommerce Magento Development Team.
Leave a comment:
*Your comment will be published after approval by site administrator.