The basic goals for client libraries or clientlibs are,
- Store CSS/JS in small discrete fi les for easier development and maintenance.
- Manage 3rd party dependencies in an organized fashion.
- Minimize the number of client-side requests by concatenating CSS/JS into a minimal number of HTTP requests.
- Minify CSS/JS that is delivered to optimize speed/performance of a site.
LESS (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. It allows front-end developers to use variables, mixins, and nesting to ease the creation and maintenance of CSS.
Let's inspect the Dopetrope Client Library to see how LESS is used.
Open grid.less. Th is file includes the AEM Responsive Grid as part of the Dopetrope CSS Client Library. Note that we are able to defi ne the Phone and Tablet breakpoints here, as well as the number of columns available. The inclusion of AEM's grid.less is required to allows us to resize the components in Layout mode in the Sites editor.
When implementing the Style System, it is critical to have a standard pattern and organization for component front-end code.
The following is the pattern used in implementing the Dopetrope design:
- Tutorial Overview
- Part 0 - Setup
- Part 1 - AEM Core Components
- Part 2 - Preparing the Page Template
- Part 3 - Content-first Authoring
- Part 5 - Applying the Basic Dopetrope Style
- Part 6 - Applying the Teaser Component CSS-based Styles
- Part 8 - Exploration of How Other Components Were Styled