How to design an UI framework for multiple web applications with the same layout?

Question

I'm trying to design an ui framework for multiple web applications but having trouble designing the infrastructure for our situation:

• 7 (or more) separated web applications build with asp.net mvc
• Some web applications on internal servers, some hosted
• All with the same basic css/images/javascript (shared components each application can use)
• Every application has some unique css and javascript
• Every application has its own TFS branch and solution
• Every application has its own release management (monthly/yearly/etc.)

What I want to achieve:

• Fix UI bugs once and not for all applications
• Consistent UI for all applications
• Don't bother the other developers with UI stuff

What would be a smart infrastructure?

Answer 1

We ended up using NuGet to distribute the css/js/images to all the different projects. The global ui has its own team project with automated nuget package creation to our internal nuget server.

Answer 2

In my experience the difficulty in sharing non-compiled code between web projects is mostly a source control one. We use an internal NuGet server to share compiled code, but this doesn't work very well for non-compiled code. For this stuff (HTML, sripts, content) I find it's easiest to keep all common components of the framework in a single hierarchy that can be stored as an independent project or submodule in whatever source control system you use, e.g.

/myframework/scripts
/myframework/styles
/myframework/images

If "myframework" is managed as a submodule, you should be able to maintain it independently of the projects you include it in. This is straightforward with git and svn.

Your application-specific scripts and content can be kept in whatever normal hierarchy you like as usual, e.g.

/scripts
/styles
/images

You might also look at how popular front-end frameworks are set up in their default configuration. For example, Zurb Foundation provides a set of scripts, styles and content templates. Everything is stored under folders Content and Javascripts by default, and they counsel that you don't change their style sheet but rather override styles in a separate style sheet for anything custom. This keeps you safe from changes to the shared framework. Applying a similar policy to your own internal framework seems sensible.