DevDocs

Magento 2.3 Cloud 2 months ago

Frontend Developer Guide

Setup
Expand
Frontend Developer Guide Edit this page on GitHub

Introduction Give us feedback

Introduction
Development ON THIS PAGE
Conventional notations used in this
Guide This document provides instructions for creating and installing custom storefront themes for a Introduction
Magento application. It describes Magento’s content rendering process and explains the view layer of Frontend development
Testing prerequisites
Magento cache overview the system to the extent required to build a theme efficiently. The document also walks through
everyday frontend developer’s tasks.
Functional
Theme Areasbest practices
development
Developing the view part of a custom module and customizing the Magento Admin panel design is out

Themes
of the scope of this guide.
Tutorials

Frontend developers can use this guide to create custom themes to tailor the Magento storefront for a
Layout
specific customer.

Templates
You can apply these levels of customization to your site, where the levels require different development
skills:
Cascading style sheets ﴾CSS﴿
You can make relatively simple changes to your site using cascading style sheets ﴾CSS﴿ to change
Quick start guide to styles colors and the look‐and‐feel of various interface components, replacing images, and other
relatively cosmetic changes. For more advanced styling, familiarity with LESS ﴾Leaner Style
How to Make Your Theme Sheets﴿ and XML ﴾Extensible Markup Language﴿ is helpful.
Responsive and Mobile
No structural changes are made to pages—you accept the structure of the site provided by
Translations default by modules you load on to your site.

Tools This can be a good starting point for a site as it requires the least effort and knowledge.

A small step beyond changing CSS and images on your site is to make changes to the HTML
generated by existing modules.

This requires rudimentary PHP skills to adjust PHTML template files.

Although PHP coding is involved, this is typically copying and pasting small fragments of PHP
code from existing template files into a new template file with differently structured HTML.

This can be useful if the existing HTML generated does not have sufficient CSS class names or
HTML elements to achieve the presentation change you would like to achieve.

The next level of sophistication is to make structural changes to your site by moving functionality
between places on a page or to completely different pages.

This is achieved using the Magento layout engine. No PHP coding is required to make layout
changes, but the layout engine is moderately sophisticated.

Finally, you can develop new modules to add new custom functionality to your site or to extend
the functionality provided by existing Magento or third party modules.

This third level of customization is not addressed in this guide.

See the Developer Guide for details on how to develop new modules.

This requires PHP programming knowledge in addition to knowledge of all of the preceding
areas.

There have been some inquiries about the status of the Visual Design Editor ﴾VDE﴿, which is
currently part of the Magento development code base. The VDE enables assigning and
unassigning themes, editing theme CSS and JS files, changing page layouts, and managing
blocks and their positions on pages in a WYSIWYG mode. We’d like to clarify that to meet
higher priority objectives, the VDE will not be part of the initial Magento release. Future
plans for the VDE will be communicated at a later point in time. You are welcome to continue
to provide input on the VDE, but please note that we will not be actively reviewing or
actioning these comments in the near term.

Frontend development prerequisites

To implement what is discussed in this guide, you need a working Magento installation and the
following browser versions installed on your device:

Storefront and Admin:

Internet Explorer 11 or later, Microsoft Edge, latest–1

Firefox latest, latest–1 ﴾any operating system﴿

Chrome latest, latest–1 ﴾any operating system﴿

Safari latest, latest–1 ﴾Mac OS only﴿

Safari Mobile for iPad 2, iPad Mini, iPad with Retina Display ﴾iOS 7 or later﴿, for desktop storefront

Safari Mobile for iPhone 4 or later; iOS 7 or later, for mobile storefront

Chrome for mobile latest–1 ﴾Android 4 or later﴿ for mobile storefront

Here, latest–1 means one major version earlier than the latest released version.

To use this guide, you must be familiar with:

CSS, CSS 3, and LESS

HTML and HTML 5

XML

JavaScript

PHTML, PHP ﴾Basic﴿

Responsive Web Design ﴾RWD﴿

Related topics:
Themes

Magento UI library

Cascading style sheets ﴾CSS﴿

JavaScript coding standard

Responsive web design

Translations

Did you find what you were looking for?

Yes No

Become a Contributor Glossary Privacy Policy Terms of Service License/Trademark FAQ Release Notes Third‐Party Licenses

© 2019 Magento. All rights reserved.