Converting to a responsive template

I’ve been tasked with researching, designing, and developing a new responsive template(s) for my employer and I was wondering if anyone has taken a relatively large site (800-1000 pages) with about 10-15 different static templates and converted their site into a responsive site. I have a few questions:

Can you batch change templates from the static template to its responsive replacement?

How can I set up scss within percussion or can percussion even process sass?

I’ve never created a template from scratch so I’m not entirely sure on how to go about developing a responsive template from scratch.

Hi Andrew,

Two years ago when we switched to Percussion, I decided to migrate our website to a responsive template. At the time I chose Zurb’s Foundation but recently I’ve been switching our site to Twitter Bootstrap. I personally like Twitter Bootstrap better. When I converted out website we had roughly 1,500 pages. and I have roughly 20 templates.

I have not been able to find a way to batch change site code. I would be leery of using such thing if it was around because each template will vary just a little bit in responsive because some things you might not want to show at smaller screen sizes, etc.

From what I’ve seen Percussion does not read SCSS. I’ve installed Scout on my windows machine to process my scss into css.

I always start with developing the look outside of Percussion. Once I have the look down, i then start to move it into Percussion section by section making sure that it looks just like what I created outside of Percussion.

I totally agree with the Bootstrap suggestion. It is very helpful and it gives you so much more than just a responsive framework.

You just have to add the correct classes to the CM1 regions and then create your own media queries for the custom stuff.

Bootstrap seems to be the easiest way to go. I have nothing against Zurb. It’s a good framework. The problem lies in the way Percussion implements it. When I initially tried to use the responsive templates in percussion I discovered that the order in which Percussion loads assets in the document head renders the whole exercise futile. The site theme css is loaded before the framework css so one cannot override the framework css (kind of the whole point of using a framework) and if I remember correctly, the last css file to be loaded was a reset stylesheet.

I use bootstrap 3 Less source and compile in what I need from the framework. I then write less code to override what I want to change in the framework. I then create less code for the overall theme of the site. This has worked pretty well.

Templates are a chore if your design layout is at all complex. I try to leverage the perc-* regions as much as possible by adding IDs and Classes to what Percussion injects in to the markup. It’s not always possible but for the most part you can ignore all of the extra divs that get inserted. Most of the region classes (i.e. perc-vertical, perc-horizontal, etc) don’t have any styling that will cause you problems. You might want to take a look at the perc_decoration css file (/web_resources/cm/css/perc_decoration.css) if you are having any wierd layout issues.

Also keep in mind that Percussion loads the jQueryUI css file on every page and adds the .ui-helper-clearfix class from that file to all of the .perc-horizontal regions and some others. This is normally ok but there are some edge cases when it will bite you.

Good luck!

I’m still very very early into this project but I thank everyone for their responses. It’s provided much needed light into what this project entails with percussion.

If you ever need any help let me know. I just started launching our bootstrap theme to the public.

I’ll be glad to help as well if needed. @Matt, can you post a url to your site when you get it launched? Love to see it.

Since this will probably take me quiet some time to complete by myself does anyone have any vendors that they have worked with that could aid in developing responsive templates in percussion? I’ve been told to look into this to try and speed up the process.

We’ve always done everything in house. I do freelance work in the evening and weekends if I could help in any way I would be happy to.

Ah yes, the order in which CM1 loads the assets in the document head was a pain. My solution was to paste the entire Bootstrap CSS into my theme CSS at the top, that way the theme will override the Framework.

This also kills 2 birds with 1 stone. If the Framework CSS is pasted into the theme, versus being @included in the theme CSS, scripts like html5shiv.js and respond.js will process them (instead of skipping the @include).

This helps those of us who are required to support Internet Explorer 8.