Created

Oct 21, 2013

The Power of LESS – Part II

Posted by Ugo Cei

In the previous article in this series we introduced the LESS compiler for CSS stylesheets, showed its syntax and demonstrated its benefits in terms of increased readability and maintanability of stylesheets. In this second part, we are going to show how LESS can be used in a CQ project to style components. In order to be able to follow this article, you should be familiar with the creation and usage of Client Libraries in CQ.

In the example that follows, we are going to create a custom Title component that will be styled using LESS.

First, we need to create a component. For simplicity, we will create it in the Geometrixx Outdoors demo application, but it would work the same anywhere. Start by creating a component called less-title under /apps/geometrixx-outdoors/components and set its parent type (sling:resourceSuperType property) to foundation/components/title. Add it to the Geometrixx Outdoors group and set its allowed parent to */parsys so that it can be listed in the Sidekick and added to a page.

Modify the contents of the less-title.jsp file as follows:

<%@page session="false"%><%@ include file="/libs/foundation/global.jsp" %><%
%><%@ page contentType="text/html; charset=utf-8" import="
    info.geometrixx.commons.util.GeoHelper"
%><%

final String title = GeoHelper.getTitle(resource, currentPage);

%>
<cq:includeClientLib categories="cq.demo.title"/>
<h1><cq:text value="<%= title %>" /></h1>

Now create a new node of type cq:ClientLibraryFolder under the component node and call it clientlibs. Add to it a multi-valued String property named categories with a value of cq.demo.title.

Under the clientlibs node, create a file named css.txt with the following content:

#base=.
title.less

At the same level, create a file called title.less with content similar to the following:

div.less-title {
    h1 {
        color: red;
    }
}

file

At the end, the structure of your component should look like the one above. Now you can drop a new instance of the component from the Sidekick into any page (rememeber to enable it in Design mode first) and it should look as follows:

file

Congratulations, you have just created your first component that uses LESS for styling!

COMMENTS

  • By catering jakarta selatan - 8:45 PM on Jun 08, 2014   Reply
    i really to say nice tools from adobe. i like it.
    • By mansion88 - 10:35 AM on Jul 25, 2014   Reply
      But as revealed by the M88 strategic Frenchman, he does not want to buy more defensive midfielder Jack Wilshere had ... because. It sounds ridiculous because this old Wilshere playing in a position where she M88. Through observation, he noticed Wenger Wilshere likely dispute, recovered the ball and defensive support - these factors enough to set the stage for success in his new role M88. During the tour this summer, Wenger will start implementing this new test and strange.
      • By Coach Outlet Online - 7:19 AM on Aug 09, 2014   Reply
        http://www.coachoutletstoreinuk.com Coach Outlet Online
        http://www.coachfactoryoutletanus.com Coach Outlet
        http://www.coachoutletonlineunsius.com Coach Factory Outlet
        http://www.coachoutletonlinetur.com Coach Outlet Online
        http://www.coachfactoryoutletnbsa.com Coach Outlet Store
        http://www.coachfactoryoutletuisa.com Coach Outlet Store Online
        http://www.coachoutletstorenie.com Coach Outlet
        http://www.coachfactorystoreuin.com Coach Factory Online
        http://www.coachfactoryoutletreba.com Coach Factory Outlet
        http://www.coachfactoryoutletonlinesius.com Coach Factory Outlet
        http://www.coachoutletonlinetnse.com Coach Outlet
        http://www.coachoutletnoia.com Coach Outlet Store Online
        http://www.chaneloutletinus.com Chanel Outlet Online
        http://www.louisvuittonoutletina.com Louis Vuitton Outlet
        http://www.louisvuittonoutletine.com Louis Vuitton Handbags
        http://www.guccibeltsoutletbcus.com Gucci Belt
        http://www.guccibelststco.com Gucci Belts

        ADD A COMMENT