How to layout HTML and CSS for templated layout

Question

A project I am working on needs to integrate a new feature using HTML5 and CSS. The requirement is that each individual user of the system can pick one of several pre-configured layouts to view content. So users might pick one of the following three layouts:

• Content is different based on the layout the user chooses. (e.g. D is in layout 1 but not in layout 3)
• Each content block will have its own css
• The css for each content block will be same regardless of position
• There may be more layouts in the future.

I have some ideas in mind and have found some ideas searching Google, but I can't seem to find the right things to ask Google to get where I need to be.

My Ideas:

• Have a style sheet for each layout and change the style sheet based on the users selection. Always include the styles for each content block on the page.
• Build the css for each user on the server and only send the css needed for that layout

Thanks!

Answer 1

It seems like you're asking more of a "best approach" question than a "how do I do it"

I would suggest making a container that will contain ALL of the blocks, then give the container a class name dependent on whatever layout the user wants. With CSS, you can "cascade" your "styles".

For example

<div class="layout-1">
    <div class="block-a">A</div>
    <div class="block-b">B</div>
    <div class="block-c">C</div>
    <div class="block-d">D</div>
    <div class="block-e">E</div>
    <div class="block-f">F</div>
    <div class="block-g">G</div>
</div>

Now, your CSS will contain the styles for all of the blocks individually:

.block-a {
    /*style*/
}
.block-b {
    /*style*/
}
...etc...

Then another section of the same CSS will have the layout dependent on the class name of the container:

.layout-1 .block-a {
    /*Block A's position*/
}
.layout-1 .block-b {
    /*Block B's position*/
}
...etc...
.layout-1 .block-e {
    display:none;
}

Then you would have your second layout:

.layout-2 .block-a {
    /*Block A's position*/
}
.layout-2 .block-b {
    /*Block B's position*/
}
...etc...
.layout-2 .block-e {
    display:block;
    /*Block E's position*/
}

So, when a user comes selects the layout, save the layout style and when you render it on a page, make sure the appropriate container class is set. Then it will show the appropriate layout. So, all you really need to save is the user's layout type, then when you pull the user's information, just use that information the update the class of the container.