Reputation: 91
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:
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:
Thanks!
Upvotes: 0
Views: 85
Reputation: 5985
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.
Upvotes: 2