Responsive HTML 5 and better looks

[animeshmanglik]

Using twiiter Bootstrap 2 , made changes to the overall look of the Pubby, it now incorporates a Responsive Design and makes the whole look appear much cleaner and visually appealing. The Velocity Macros have been updated to include the new CSS files and the structure has been modified. The whole structure has been made responsive and can now be viewed in Tablets, Mobile. A link to the main image being displayed is provided. Do check out the screenshots.

[cygri]

This looks very nice, it's a huge improvement over Pubby's current rather dated look, and being mobile ready is increasingly important. Boostrap is an excellent choice here I think.

For the public record, I'll paste some comments here that I already sent earlier over email.

1. The "New look to Table" screenshot seems to indicate that you always break property prefixed names into two lines, like:

   rdfs: label

   That's a bad idea in my opinion, and should be reverted to the old behavior where the entire name appears in a single line: rdfs:label.

2. The screenshots should really not be in the main directory, but underneath /doc, and they should be integrated into the /doc/index.html documentation, perhaps in a new "screenshots" section, so that they show off the new look!

3. ~~This may be a matter of taste, but the look of normal tables and metadata tables is quite different now. It would be better if they were more similar. (I definitely prefer the look of your normal tables!)~~ The metadata feature has a few other problems as well and may need a bigger overhaul, so don't worry about this.

4. Another matter of taste: I find the look a bit "monochrome" with only white, black and blue. A few dashes of color here and there might make it look even more appealing :-)

Images:

[cygri]

I've created a new branch, feature-bootstrap, pulled your changes into it (8f73e6758ea1a1f740ab4546caa4a6ee5142bd4c, squashed into a single cleaned-up commit), merged them with other recent developments from the master branch (65030722be588e26e974dd67bc48bbea70634a9b), and finally did some major changes to the layout on top of your changes (d18180256c5367f3921d4fb43261112c86d1a260).

Your work inspired me to take a closer look at Bootstrap, and to have a go at improving the layout in various ways. I'm quite pleased with the result!

This still needs a bit of work. Most importantly, the layout for the metadata tables is currently broken. I've also only done some very minor testing on mobile, so the CSS may need some fine-tuning again to be up to par with your version in mobile usability.

@animeshmanglik, I would appreciate if you could checkout the feature-bootstrap branch and give it a try. Do you see any problems? Any ideas for improvements? What do you think of the direction that the design has taken?

[cygri]

Metadata tables now also have the new layout, as good as it's possible without making deeper changes in the metadata code.