Book Image

Mastering Adobe Commerce Frontend

By : Jakub Winkler
Book Image

Mastering Adobe Commerce Frontend

By: Jakub Winkler

Overview of this book

Navigating the frontend realm of the Adobe Commerce platform can often feel like a labyrinth, given its multifaceted systems and intricate layering. This book demystifies Adobe Commerce frontend development, guiding you through its paths with clarity and precision. You'll learn how to set up your local environment, paving the way for a smooth development experience and navigate the platform's theming ecosystem, exploring layout XML systems and the power of templates. As you progress through the book, you'll leverage an array of JavaScript libraries and frameworks that Adobe Commerce boasts of, with special emphasis on RequireJS, jQuery, Knockout.JS, and UI Components. Additionally, you'll gain an understanding of the intricacies of Adobe Commerce CMS, explore frontend-related configurations in the admin panel, and unlock the secrets of frontend optimization. Practical exercises provided in the book will enable you to create top-notch Adobe Commerce sites that are functional, optimized, user-centric, and a step ahead in the ever-evolving frontend landscape.
Table of Contents (18 chapters)

Working with themes

In this chapter, so far, you’ve learned the following:

  • You know where to put LESS/CSS files inside your theme and theme-related folders.
  • LESS and CSS files follow the same logic as templates when it comes to the fallback feature. Files located in your theme take the highest priority.
  • You know how to work with LESS files preprocessing and compile them into CSS files for both the server and the client side.

As always, there are two ways for us to be able to customize a theme and its styles. One is to extend parents styles and the other one is to override them.

Extending parent styles

I’ll start by explaining how this process is done first. Once I do it, I’ll tell you why, in my opinion, it is not recommended. It is time to focus on how to work with the themes using all the tools we have and some additional features that are in the AC framework. We start by looking into the styles-l.less file of the Blank theme. You...