AEM's Client Libraries provides a mechanism to organize and manage CSS and JavaScript files necessary for an AEM Sites implementation.

 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.

Organizing Client Libraries

Below is an example way to organize the top-level client library folders.

 

clientlibs--organization

Step by Step

We are going to be inspecting the L725 project client libraries.

 

  1. In a new tab navigate to CRXDE Lite (http://localhost:4502/crx/de/index.jsp) or navigated via Bookmarks.

     

  2. Expand the /apps/l725/clientlibs node.

     

    step-2

Dopetrope Client LIbrary

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.

 

  1. Expand clientlib-dopetrope. In order to make the maintenance of client libraries easier CSS and JS is broken out into multiple fi les.

     

  2. Double tap main.less to open. main.less  imports all of the different LESS files which makes up the Dopetrope styles.

     

  3. Expand the clientlib-dopetrope/css folder and open the variables.less file. One of the advantages of using LESS (instead of straight CSS) is that you can create variables and mixins to make it easier to maintain consistent brand styles.

     

  4. 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.

     

Component Styles

Each component has a dedicated folder to include any LESS to style the component. JavaScript that adds additional functionality/behavior to a component is also included in this folder.

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:

 

component_styles
  1. Expand /apps/l725/clientlibs/clientlib-dopetrope/components/title. Notice how the pattern has been applied to the Title component. Besides the default style for the Title component there are be 2 additional styles for the Site Title and SectionTitle.

     

  2. Expand title/styles folder and open site.less. Note that the styles are scoped by the .cmp-title--site  class at the start of the file.

     

  3. Open section.less. Note that the styles are scoped by the .cmp-title--section class at the start of the file.

     

In the next chapter we will configure the Title Component to use these styles.

 

Tutorial Table of Contents

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy