[ishkabible]

So a friend of mine, whom I introduced to programing, has a real knack for photography. He would like to make an online portfolio and so he contacted me about making a site. I explained my skills were limited but I could throw something nice together and show him how to maintain it. He picked out a CSS template and I showed him it was pretty easy to set something up that looked pretty good. He then asked how easy it would be to change between CSS templates if in the future he wanted a different one. I explained I wasn't sure but that there must be some ways to increase modularity between like templates. All the templates we looked at had many common elements and the content of these elements seemed as though it could be swapped out fairly easily.

what are your tips on increasing modularity between different CSS templates? what issues would one run into in switching between them?

[William_Wilson]

That's hard to say. Every CSS layout is based on classes and ids within the document. Using obvious naming conventions will help, but it is extremely unlikely you could just drop a CSS layout from another website into yours and expect it to render nicely. Especially when it comes to styles affecting sub styles when styled elements are contained in other styled elements.

Many pitfalls could occur if there are fixed width, height or offset values in the new layout which do not align with the current layout.

CSS based on tag names will for the most part transfer nicely.

Assuming the page layouts are very similar, it would be theoretically possible to simply change the id/class names in the new CSS file to match the old one.

[ishkabible]

it seems as though we can change between what we looked at fairly easily as they all follow the same naming conventions. they all appear to be fixed width however that hasn't created much of an issue yet. btw all of the CSS templates we looked at came from freecsstemplates.org. they are all very similar so it makes translation very easy.

I appears that if the content using the classes and ids can be swapped out with out any issues.

This post has been edited by ishkabible: 15 January 2012 - 01:24 PM

[xxxjj18]

Well, you could use a template system; this is what I do with PHP. However, if you are solely limited to HTML, this would not work.

But if you know a bit of PHP, you could look into a template system. All you would have to do is keep some global variables to be replaced in the template, like where the pictures would be displayed, for example.

This way, whilst switching between templates, you could keep the same content displayed, and only have to edit the design of the site; not the content.

[Shane Hudson]

All you need to do is make sure the html is semantic, then when it comes to changing the CSS, just change what is appropriate. For example #container might become #content.

[ishkabible]

@xxxjj18: I don't think I need a template engine; PHP isn't out of the question. In fact we are considering adding a way to post content using PHP but that would be later down the road. for now, just HTML and CSS.

@Shane Hudson: thanks, I'll have to look into that more