Wednesday 1 February 2012

Responsive Umbraco & Bootstrap site - Whitecapltd.com

Just thought I'd drop a post up here about using my experience using Twitter bootstrap, and Umbraco CMS to put together a website for Whitecap Associates - Yacht brokerage, management and build Whitecapltd.com, the idea being to create a responsive website with CMS, that will expand as and when the company require.

It was more complicated than I thought it would be, but after we at Noko incorporated the Zurb Foundation grid system into bootstrap, it all began to take shape. After realising that the best way to style the pages is to add a additional stylesheet, as a final layer of css levels, to overwrite and update the default values, it turned out ok.

Still have a few items that need a good polish, ie. a current state on the navigation, and a few minor tweaks here and there, overall though I'm pleased with the results.

Just grab the side of your browser and squash it narrow to see the mobile device view. www.whitecapltd.com

4 comments:

Unknown said...

hello . we're thinking about going down the same route but we have a difficult deadline to account for. I was wondering how long it took you start to finish to implement this website? What level of exposure did you have to Umbraco before starting? Prior exposure to the Twitter bootstrap framework?

Also, you mentioned that you implemented Foundation.. this framework competes directly with Twitter Bootsrapp framework. did you decide against Twitter at the end?

Your input is much appreciated!

Unknown said...

Hi Diego, sorry for the delay.

We actually ditched the Foundation framework completely in the end and opted to use the Twitter bootstrap.

It took longer than we thought in total, although the basic setup is fast and its easy to use, it worked really well on the responsive sizing, and after this initial attempt I am now considering a refresh with the latest version of Bootstrap as there have been a number of improvements since.

Just seen that you can set up an Boostrapped version of Umbraco site using Web Matrix 2 and will be using this as my next project starting point.

Unknown said...

Umbraco exposure was very limited to start with. And no prior exposure to Twitter bootstrap.

Unknown said...

Hi Becky,

How did you deal with Bootstrap collapse in Umbraco? When I place the HTML for Bootstrap collapse (accordion) in the Master template, I get the yellow screen of death. I don't know if it is the data-parent or data-toggle associated with the links or what. Anybody? Thanks so much!!