Magento 2 Theming

Compared to its predecessor, Magento 1.x, Magento 2 comes with a changed and improved frontend approach. There are important improvements and changes to the file structure as well as Magento 2 introduces a brand new UI library heavily based on a LESS preprocessor with a built in compiler. Updated technology Magento 2 features an updated […]

By Alyssa Schaad

magento2-theming

Compared to its predecessor, Magento 1.x, Magento 2 comes with a changed and improved frontend approach. There are important improvements and changes to the file structure as well as Magento 2 introduces a brand new UI library heavily based on a LESS preprocessor with a built in compiler.

Updated technology

Magento 2 features an updated technology stack, including HTML5, CSS3 and the latest versions of PHP. Having these new technologies offers developers a better starting point for their Magento implementation.

HTML5

Magento 2 has adopted HTML5 for all of the templates in Magento 2.x. To make them consistent, the templates have been completely refactored. A new theme called Luma has been implemented with these changes and the previous themes have been removed.

CSS3

CSS is widely used on almost all web pages. Magento 2 is based on the latest standard, CSS3, which provides developers a more well-defined starting point for frontend projects. Magento 2 uses LESS, a CSS preprocessor, to address several frontend development requirements (see the section below about CSS preprocessor).

PHP

Magento 2 supports PHP 5.5, with PHP 5.4.11 as the minimum requirement. PHP is a widely-used open source general-purpose scripting language that is suited for web development and can be embedded into HTML. As a result, code runs quickly and the overall performance is improved in Magento 2.

Frontend development

CSS Preprocessor

CSS preprocessing extends the CSS language, which adds features that makes CSS more maintainable while using and creating a theme. Magento 2 supports a CSS preprocessor (LESS) right out of the box, making it possible for front end developers to use the extended CSS language directly in Magento code. Magento 2 is not limited to LESS only, developers can choose to use Sass/Compass or, of course, pure CSS if they wish. CSS preprocessing makes it possible for developers and designers to reuse properties in their CSS files, for example, you can create a variable for the color blue and use that variable throughout the code, and if the designers want to change that color blue, they would only need to change it once instead of throughout the entire CSS file.

Key advantages:

  • Using LESS helps users to custom theme quicker and easier
  • The CSS Preprocessor, LESS, and the CSS URL resolver help improve performance, it speeds up page load and makes the system search engine friendly

Blank Theme

Magento 2 has included a blank theme which is a great starting point for new theme development. There are no customizations but contains plenty examples for frontend developers. Developers start with a stripped down version of the theme then add the features and customizations that they need or want.

Key advantages:

  • Clean and minimal
  • Full responsive design
  • Common for CE and EE
  • Responsive tables
  • No default CMS content

Magento UI Library

The Magento UI library is a flexible modular Magento frontend library that is designed to benefit Magento theme developers. The library is a set of generic web components and Magento 2 specific patterns. The Magento UI Library included common components such as tables, typography and forms. It provides the ability to customize almost every element visible on the front end.

Key advantages:

  • Built on LESS preprocessor
  • Customizable
  • Easy to maintain
  • Responsive

Visual Design editor

The Visual Design editor is an easy to use “drag and drop” interface for editing Magento layouts. With using the Visual Design editor, modifying containers and blocks is possible without much technical experience.

Layout Improvements

Containers

Magento 2 has introduced containers in addition to blocks in layout files. Containers are a new logic to set up a structure to organize blocks and define sections of a layout. Containers are used a lot by the Visual Design editor to move blocks around.

Magento 2 is an extensively improved system when it comes to frontend development, compared to its predecessor. We can’t wait to start working with it for clients!

Support Operations Manager