1

The problem

I need to redesign CSS structure of an existing web application. It supports "branding" — it's got 5 different look-and-feels. Each user has one assigned brand, based on the company they work for.

Currently we have a bunch of complicated CSS files that have long since broken out of control. A typical web page includes 4 style sheets, templating system decides which ones. This means a page reload is needed to switch brands.

A new CSS system should:

  1. Be based on CSS scripting, preferably LESS, or SaSS.
  2. Use only one style sheet in the target environment.
  3. Allow brands to be e̲a̲s̲i̲l̲y̲ switched without page reloading.

My idea

With the help of CSS scripting, define general and brand-based rules:

p {
    /* general settings */
}

#brand1 p {
    /* include/redefine general settings, add some for brand1 */
}

#brand2 p {
    /* include/redefine general settings, add some for brand2 */
}

Create an outer <div> for the whole body and switch its id with JavaScript to brand1, brand2, etc. This way I don't need to script CSS in any way, just switch the "context" of all elements with one line of JavaScript.

I'm a CSS beginner, so I'd like to avoid going for something totally wrong. Please comment.

2
  • 5
    You don't need a div, just change body class Mar 3, 2013 at 12:15
  • I endorse your approach 100%.. as a matter of fact that's exactly what we did when we localised the Amazon Kindle Touch app store for different countries.. so kudos for your CSS instinct ;)
    – abbood
    Mar 3, 2013 at 13:37

5 Answers 5

2

I do this way:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>            
    </head>
    <body>
        <div class="wrap">
            <div class="side">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#" class="active">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div class="main">
                <h1>Welcome</h1>
                <h2>A Paragraph</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </p>
                <h2>A List</h2>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                    </li>
                    <li>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS

body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}

Theming

Now our work would be identifying the themable components. Here, with the base layout, we can theme only the colours and list styles of the unordered list. Lets get those styles alone first. Being a beginner's tutorial, lets concentrate only on the foreground and background colours and not layouts.

Lets name the first class as .light and the CSS for the same would be:

.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}

JavaScript

And now for the code to change, we need to add three links or buttons, which handle the theme change. So, in the HTML, let's add these three links:


HTML

<div class="wrap themelinks">
    <h4>Change Themes:</h4>
    <a href="" class="theme">No Theme</a>
    <a href="light" class="theme">Light</a>
    <a href="grayscale" class="theme">Grayscale</a>
</div>

CSS

.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks .theme:hover {background: #f90; color: #fff;}

jQuery

$(document).ready(function(){
    $(".theme").click(function(){
        var theClass = $(this).attr("href");
        $("body").removeAttr("class").addClass(theClass);
        return false;
    });
});

Demo

You can check out the working demo in jsBin.

2
  • 1
    Thank you, excellent answer, much more than I was looking for. I don't understand what's the big deal with closing the question, but since I got nice answers, I don't care.
    – MaDa
    Mar 5, 2013 at 23:00
  • @MaDa There were already few close votes, and it suggested me to close the question. So, I gave my vote. Then I felt, it would be good to help by answering with what I know. So, I answered and it was helpful for you. Got it? Mar 6, 2013 at 2:27
1

Create a single, unbranded stylesheet, that defines the general layout of the page, then define brand-specific rules that vary depending on the class of the <body> element, for example:

/* Layout area */
#header {
    height: 50px;
    margin: 0.2em; }

etc...

/* Brand A rules */
.brandA #header {
    background-image: url("brandALogo.png"); }
.brandA #footer {
    background-color: purple; }

/* Brand B rules */
.brandB #header {
    background-image: url("brandBLogo.png"); }
.brandB #footer {
    background-color: orange; }

...so you don't need to redefine anything.

Then with a simple script client change the class attribute of <body> to "brandA" or "brandB" as appropriate.

I advise against using the id attribute because as the identity attribute it should be static and unchanging in the document.

2
  • Id is singleton, but you can manipulate IDs however you want, since they are treated as just another attribute in DOM, which is structural api for html.
    – Rastko
    Mar 3, 2013 at 12:32
  • I was thinking about preferring class selector over an id selector, but the former is less specific and may lose to other id-based rules. Is switching id value for some specially designated element really such a bad idea?
    – MaDa
    Mar 3, 2013 at 23:40
1

I would do it this way for one element:

div {
    /* general settings */
}

div.band1 {
    /* include general settings, add some for brand1 */

    /* redefine general settings, add some for brand1 */
    font-weight: bold !important;
}

div.band2 {
    /* ... */
}

for more elements (demo):

h1{
  font-weight: bold;
  color:green;
}
.band1 h1{
  background-color:red;
  color: white;
}
.band2 h1{
 background-color:yellow;
}
.band1 .head2{
  background-color:red;
}
.band2 .head2{
 background-color:yellow;
}
.band1 #text{
  background-color:red;
}
.band2 #text{
 background-color:yellow;
}
1
  • Correct me if I'm wrong, but this way I need to tag absolutely every brand-dependent element with a particular CSS class... Not much difference in CSS, but a burden in HTML generation.
    – MaDa
    Mar 3, 2013 at 23:10
0

Define layout independently, then define all the stuff that has same, let's say shape and overall UX... and then for the final touch use deeper selectors, like this:

Each brand's page's styling should have one more outer selector, for instance id that is connected to outer wrapper of the page, so for starting thing outer wrapper (or the body, altoho I do not recommend this) should be id="default"... default should have no reference in css whatsoever, then every other brand should be selected in css for body to have id="brand1" or "brand2" etc.

On Interaction whic changes the brand you just do this:

$(wrapper selector).attr('id', 'brandX');

What happends is - css rerenders the page accommodating other selectors that are deeper due added one more outer DOM container and thus more important then default ones.

Changing selectors this way gives you the ability to fine tune your page how ever you like, assuming that css3 and any DOM manipulation js engine is in your full expertise :D

-1

you can also load the css dynamically (if you want to generate it based on some parameters, for example). do it with this line of code:

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

another advantage is that the user doesn't need to download all the style sheets of all the brands he doesn't want

1
  • minified stylesheet containing all the stylesheets has advantage over adding one more http request to call one more stylesheet, and also if he already has one loaded there is no guarantee that all styels will be rendered right... also, there is no real smooth skin switching.
    – Rastko
    Mar 3, 2013 at 12:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.