Skip navigation
Currently Being Moderated

How to approach a custom look and feel on a new CQ5 project

Apr 18, 2012 7:01 AM

Tags: #templates #html5 #css3

We are starting a new CQ5 project. The front-end developers are seasoned HTML/CSS/JavaScript programmers - their responsibility is to take a very forward looking design and convert that to HTML5/CSS3 markup (support for older browsers will be using graceful degradation techniques). The CQ developers will take that markup and convert it to CQ templates and components. We would like to support desktops as well as iPads for the initial release. What advise can the group give us on how to proceed with a custom look and feel? Specifics below:


  1. On standard HTML sites, our front-end development team uses the HTML5 Boilerplate as a starting point to code the front end. The boilerplate provides basic cross-browser compatibility, ability to use HTML5 markup using Modernizr and a host of other valuable features. One approach that we are thinking of is to start with the Boilerplate and break it up to provide basic structure for the CQ templates. Do you see any issues with building CQ templates from scratch this way? The alternate approach is to start with the geometrixx-outdoors example and retrofit it with good parts from the Boilerplate while giving it the look and feel we want. My questions is: do real projects take such an approach, i.e. starting with an existing CQ example? Which of the two approaches will end up with less work to provide a custom look? In the first approach, what's the risk of losing the knowledge that is embedded in the CQ samples?
  2. What is the approach taken by geometrixx-outdoors-mobile to adapt to mobile devices. Is it responsive design or a completely seperate template for each device? If we were to take the approach of designing our HTML and CSS from scratch, what considerations we would have to make for reusing the knowledge that is embedded in the geometrixx-outdoors-mobile templates?



Thanks in advance for yout time.




  • Currently Being Moderated
    Apr 18, 2012 8:12 AM   in reply to NareshJBhatia

    I like bootstrap as a base framework ( ). It lends itself very well to

    desktop and mobile apps with it's reflow capabilities and is easy to

    reuse in Adobe CQ.



    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 8:39 PM   in reply to NareshJBhatia

    If you have a look at geomtrixx in cq5.5, it seems it's based on 960gs. A good framework as well but not as feature rich as bootstrap

    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 6:17 AM   in reply to NareshJBhatia

    I am not sure if geometrixx is a good example to look at for this. is another upcoming sample (it was demonstrated

    at the conference and in demos) and uses yet another approach.


    I think the message from Adobe is really CQ can work in whatever way you

    would want it to work in regards to css.



    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points