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!

@BDawg Popular Modern browsers that support html5 (IE, Firefox, Chrome, Safari) — Nformer
– Nformer, Commented Oct 26, 2015 at 13:58
@Ionut this is not a cms problem, rather each user using the system will choose the layout they want to see and can change it at anytime. I will update post — Nformer
– Nformer, Commented Oct 26, 2015 at 14:00
This question is either too broad, opinion based or invites discussion and so is off-topic for Stack Overflow — Paulie_D
– Paulie_D, Commented Oct 26, 2015 at 14:28

ntgCleaner · Accepted Answer · 2015-10-26 14:02:33Z

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.

Collectives™ on Stack Overflow

How to layout HTML and CSS for templated layout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related