CODEWITHSUNDEEP
htmlcss
Flavius Frantz
Flavius Frantz

Reputation: 230

Smart coding and "abstract" thinking to simplify template variations

I have this base HTML/CSS template out of which I will do a lot of child websites that will use different colours and image variations for stuff like <h> tags, background color, etc etc.

I am looking for approaches to modify the base theme and make it so that in order to create child templates with color variations I will modify a single line of code (something like .this-smart-class{color: #mycolorcodehere) and voila, all the elements using that color change.

I am already cooking a method to do this myself, but I am a beginner/intermediate in front end development and I would be curious of different approaches to do this. I am looking to use only CSS for this, maybe some jQuery but only if proves to make it a lot practical.

To better understand the question have a look at the screenshot: variations of the same layout.

If you find this question to "unspecific" please ask me before voting down or closing it and I will break it in multiple questions, but I think good answers may come out of this, I might not use the proper terms to be as specific as I want as I am not experienced enough.

enter image description here

Upvotes: 2

Views: 126

Answers (2)

MattP
MattP

Reputation: 2863

I tend to use a number of generic classes which I can apply to any number of elements.

For example:

.smalltext { font-size: 0.8em }
.bold { font-weight: bold }
.clear { clear: both }
.highlight { background-color: #999999 }

I have mentioned this before and some people were critical of it but it works for me.

Then I can say:

<div id="footer" class="smalltext"></div>
<div id="box-header" class="highlight bold"></div>

Upvotes: 1

Seimen
Seimen

Reputation: 7250

It would probably be best to use a CSS preprocessor (I prefer LESS). You can make different color configuration files like for example "color-config-red.less" and "color-config-violet.less" where you define your different colors in variables like @background-color etc. and reuse them over the whole project. With that set up you can simply include the different color configurations for different websites while having the same layout.

Upvotes: 2

Related Questions