Referencing a colour palette in a CSS file

Dades

Hey folks,

I've been trying to find a way of implementing something via CSS.

Basically I have a site that is going to be subject to multiple rebrandings via seperate CSS files. What I'm trying to do is keep the 'branding' stylesheet to an absolute minimum (there is another stylesheet that will be used in all versions).

What I really want is to reference a colour palette of, say, 5 colours which would then be picked up by classes within a stylesheet. That way I could do a basic 'rebrand' by changing only the palette colours within a very small file.

For example in the branding css I might have classes that set the fill for buttons, a hover colour for links, and border colours for boxes.

Is there a way of referring within each of these individual classes to a colour value referenced elsewhere? Even a class referenced elsewhere?

Thoughts or requests for clarification, welcome!

TrueDub

Have you thought about using something like SASS to control your CSS, allowing you to have mixins & conditionals?

Procasinator

If I understand your requirements correctly, it sounds like a CSS pre-processor like Sass or Less would be the beneficial to you.

This pre-processors extend CSS with variables, mixins and other goodies.

Graham

Definitely sounds like a job for a pre-processor, only just started playing around with them myself in the last couple of weeks.

Using LESS variables you can define things like:

  // LESS

@brandcolour: #4D926F;
@brandsecondarycolour: #4D926F;
@brandhighlightcolour: #4D926F;

Dades

I'm not familiar with Sass, Less or pre-processors ... but with those ideas in mind I'm off to see what they can offer me.

Anyone know if there's browser compatibility issues before get stuck in? Probably will need to support IE8.

TrueDub

Dades wrote: »

I'm not familiar with Sass, Less or pre-processors ... but with those ideas in mind I'm off to see what they can offer me.

Anyone know if there's browser compatibility issues before get stuck in? Probably will need to support IE8.

The pre-processors are just things to generate CSS, so there's no extra browser compatibility issues raised by using one.

You code your styling using the pre-processor syntax, then run the relevant processor, which produces the CSS that your website actually uses.

Dades

So I'm discovering, thanks.

Am trying to get something working with the less.js option at the moment.

Dades

Okay, I've got something working. Not sure if this is going to be worth implementing though.

While I can add a palette of colours to the top of my .less file, I can only refer to those variables within the .less file itself. What I was hoping for would be to be able to refer to them within my main CSS file, leaving only the colours defined in the .less file, and not have to add a bunch of CSS to that file itself.

That way as the site gets added to or restructured, I don't need to ever revisit a load of .less files to update/add to the classes they contain.

Still thinking through it so it might yet be useful!

Procasinator

Dades wrote: »

Okay, I've got something working. Not sure if this is going to be worth implementing though.

While I can add a palette of colours to the top of my .less file, I can only refer to those variables within the .less file itself. What I was hoping for would be to be able to refer to them within my main CSS file, leaving only the colours defined in the .less file, and not have to add a bunch of CSS to that file itself.

That way as the site gets added to or restructured, I don't need to ever revisit a load of .less files to update/add to the classes they contain.

Still thinking through it so it might yet be useful!

Just have a base.less (or whatever you want to name it) file that contains all your common CSS. Then, just use the @import directive when you need it.

Graham

ok, bare with me here. Still getting my head around this.

I have a less file called cust1.less that file contains all of the other less files I want to combine to make my cust1.css:

// Core variables and mixins
@import "cust1variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// CSS Reset
@import "reset.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

When I compile (or whatever the LESS term is) I end up with a cust1.css file that's a combination of all of the files imported in cust1.less

For the next customer, if the only thing that changes between customers is base colours, I copy the cust1.less and cust1variables.less and rename them to cust2.less and cust2variables.less, I then change the colours in the cust2variables.less file and produce a new cust2.css file for customer 2.

So you could have 10 core .less files which make up your layout and 2 .less files for each specific customer. If the layout.less file changes, that change trickles into all of your custX.css files.

CodeKit for Mac will monitor your .less folders for changes and automagically create the css for you when the .less files change

Procasinator

Graham wrote: »

ok, bare with me here. Still getting my head around this. [...]

Pretty much, though I'd try to simplify it further. Your reset, scaffolding, e.t.c. is probably the same for each site, so I'd combine these all into one simple import. I'd probably then just have the variables directly in cust1.less, followed by an import to common.less.

Should be a relatively short and to the point file, then.

Dades

Ah, okay so I've implemented what I think has been suggested...

I've essentially moved my CSS into a main .less file which in turn imports a small, palette.less file. Now rebranding can done from within the palette.less files, and the main file can be updated independently.

While I was hoping for a solution that didn't involve leaving the comfort of regular stylesheets, this does pretty much what I want!

So now all I need to do is figure out if .less files will throw the method we have (theme folders in VS) of determining what branding goes with which sub-domain.

Thanks all.

Graham

Procasinator wrote: »

Pretty much, though I'd try to simplify it further. Your reset, scaffolding, e.t.c. is probably the same for each site, so I'd combine these all into one simple import. I'd probably then just have the variables directly in cust1.less, followed by an import to common.less.

Should be a relatively short and to the point file, then.

Apologies, I should have mentioned my exercise was based in customising Bootstrap which does consist of many .less files.