Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Referencing a colour palette in a CSS file

  • 17-07-2013 11:32am
    #1
    Moderators, Society & Culture Moderators Posts: 25,558 Mod ✭✭✭✭


    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!


Comments

  • Moderators, Sports Moderators, Regional Abroad Moderators Posts: 2,660 Mod ✭✭✭✭TrueDub


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


  • Registered Users, Registered Users 2 Posts: 1,311 ✭✭✭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.


  • Moderators, Society & Culture Moderators Posts: 17,643 Mod ✭✭✭✭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;
    


  • Moderators, Society & Culture Moderators Posts: 25,558 Mod ✭✭✭✭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.


  • Moderators, Sports Moderators, Regional Abroad Moderators Posts: 2,660 Mod ✭✭✭✭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.


  • Advertisement
  • Moderators, Society & Culture Moderators Posts: 25,558 Mod ✭✭✭✭Dades


    So I'm discovering, thanks. :)

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


  • Moderators, Society & Culture Moderators Posts: 25,558 Mod ✭✭✭✭Dades


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

    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!


  • Registered Users, Registered Users 2 Posts: 1,311 ✭✭✭Procasinator


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

    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.


  • Moderators, Society & Culture Moderators Posts: 17,643 Mod ✭✭✭✭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


  • Registered Users, Registered Users 2 Posts: 1,311 ✭✭✭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.


  • Advertisement
  • Moderators, Society & Culture Moderators Posts: 25,558 Mod ✭✭✭✭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.


  • Moderators, Society & Culture Moderators Posts: 17,643 Mod ✭✭✭✭Graham


    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.


Advertisement