AD0-E720 practice question 9 of 10

An Adobe Commerce developer is customizing buttons for a custom theme that inherits Magento/blank theme and needs to override the default values. Where would the default values for the buttons be located?

Full set: 50 questions
Answer options
A: lib/web/css/source/lib/_buttons.less Correct answer
B: lib/web/less/source/lib/_buttons.less
C: lib/web/css/source/lib/_button.less
Correct Answer:
A. lib/web/css/source/lib/_buttons.less
Explanation

The Adobe Commerce UI library contains the core LESS files that define the default styling for frontend components. These library files are located in the lib/web/css/source/lib/ directory. The specific file that holds the default variables and mixins for button styling is buttons.less. To customize buttons, a developer would override the variables or extend the styles defined in this file within their custom theme, which inherits from a parent theme like Magento/blank.

Why Incorrect

B. lib/web/less/source/lib/buttons.less: This path is incorrect. The standard directory for source LESS files in the core library is lib/web/css/source/, not lib/web/less/source/.
C. lib/web/css/source/lib/button.less: This path is incorrect due to the filename. The correct file is named with a plural, buttons.less, as it contains styles for various button states and types.

References

1. Adobe Commerce Developer Documentation, Frontend Developer Guide > Magento UI library: "The Magento UI library source files are located in /lib/web/css/." This section establishes the root directory for the UI library files. The specific path to the source library components is lib/web/css/source/lib/. (Reference: Adobe Commerce DevDocs, Frontend Developer Guide, Magento UI library).

2. Adobe Commerce Developer Documentation, Frontend Developer Guide > CSS in Magento: This document describes the file structure for CSS and LESS files. It confirms that core, non-module-specific LESS files, such as the UI library, reside in lib/web/css. The file lib/web/css/source/lib/buttons.less is the source for button mixins and variables. (Reference: Adobe Commerce DevDocs, Frontend Developer Guide, Cascading style sheets (CSS), CSS file locations).

Scroll to Top