I have a requirement that the user may choose different templates for his page say for example for user profile page, our web app should give multiple types of templates to show the profile, user might pick any one template. In future we may enhance the same feature by giving more freedom to user over templates, he can customise the template the way he wish to,
Example for customising a template is : he can move his profile pic from Left side to right side , he may change background colour etc.
What are the best possible approach for this kind of UI ? Do I need to keep meta data of whole page and then create it at client side ? Do I need to create the whole html at server side and just load it at client side ?
Are there any frameworks for JADE/Node.js for this kind of UI development ? I am totally new to this kind of development so suggest me the proper way.
You easily quite easily accomplish this as follows:
Present the user with a form and a select box (or alternative) listing the theming options. Save this to the database under their user, or alternatively if your app has no real backend to speak of then you could save it to local storage (though in this case the setting will probably be reset before too long on the user's end).
With JS, on page load, determine their chosen value (AJAX call or check local storage) and append a class to a wrapper around their profile page dynamically, e.g.
profile--colorful,profile--thin, etc.Style each profile differently in CSS using those classes.