You're reading from Mastering Adobe Commerce Frontend Build optimized, user-centric e-commerce sites with tailored theme design and enhanced interactivity

Product type Paperback

Published in Mar 2024

Publisher Packt

ISBN-13 9781837637072

Length 402 pages

Edition 1st Edition

Languages

JavaScript

Tools

Adobe Commerce

Concepts

CMS

Author (1):

Jakub Winkler

View More author details

Table of Contents (18) Chapters

Preface

1. Chapter 1: Setting Up the Local Environment FREE CHAPTER

2. Chapter 2: Installing the Magento/Adobe Commerce Application

3. Chapter 3: Introduction to Adobe Commerce Theming

4. Chapter 4: The Layout System

5. Chapter 5: Working with Templates

6. Chapter 6: Styling an Adobe Commerce Theme

7. Chapter 7: Customizing Emails

8. Chapter 8: Introduction to JavaScript Libraries and Frameworks

9. Chapter 9: RequireJS and jQuery

10. Chapter 10: Knockout.js and UI Components

11. Chapter 11: Commonly Used Libraries Bundled with Adobe Commerce

12. Chapter 12: Storefront-Related Configuration in the Admin Panel

13. Chapter 13: Working with Magento CMS

14. Chapter 14: Frontend Optimization Techniques

15. Chapter 15: Common Tools that Help with Local Development

16. Index

Why subscribe?

17. Other Books You May Enjoy

Technical requirements

In Chapter 6, you can find all the exercises, answers, and code in the Chapter 6 folder on the GitHub page here: https://github.com/PacktPublishing/Mastering-Adobe-Commerce-Frontend.

My objective for this chapter is to guide you through the process of customizing the visual appearance of an AC theme. This will involve working extensively with CSS, utilizing Grunt for task automation, and understanding AC-specific styling practices.

In order to proceed with this chapter, the requirements are as follows:

AC/Magento Open Source working environment: I’ve covered this in previous chapters. If you want to follow the code in this chapter, make sure your local store copy runs without issues.
AC theme: Make sure you have at least one AC theme installed and configured for customization if you haven’t done this already.
Grunt installation: Grunt is a key tool for automating CSS-related tasks in AC. Ensure that you have Grunt installed...