blog, Uncategorized, Website Design

VinSolutions Websites and Bootstrap

vinsolutions iconIf you’ve read any of my past posts, you’ll know it’s been a lot of work moving 2 automotive websites from another cms to VinSolutions.  Today I was, again, re-creating some pages from the old site to get them up on the new one.  While re-editing the class references I had either an ah ha or a duh moment.

Why not use Bootstrap?  Then if/when there is a change in the future everything will just copy and paste over nicely.  And (hopefully) when they finally release their 360 platform, the code should be responsive and just work.

Plus, because so many websites use Bootstrap, if the call is done through the CDN there should be a speed benefit as it is probably cached in the viewers browser anyway.

Even though doing css and js calls in the middle of the body code isn’t best practice – there is no other choice.  Unless of course I put in a trouble ticket and have support add the code to the head of the site.  (Note: I have not tested this and don’t know what all it might “break” on the website.)

So blah blah blah . . . does it work?

Short answer is: Yes!  But not every feature. 🙁

Here is what I did for my test:

  1. add the call to the css from the CDN to the very top of the custom html.
  2. create the custom html for the custom page
  3. add the call to the js from the CDN at the very bottom of the custom html.

So basically it would look like this:

<!– BEGIN CUSTOM CONTENT –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>

<div class=”whatever”>
<p>Other junk goes here</p>
</div>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
<!– END CUSTOM CONTENT –>

At this point I started testing the different CSS and Components that are available.  Note: I haven’t tested everything yet and hope to test a form page soon (look back).  Anyway, here’s what I found:

  • Panels – don’t work.  This one really bummed me out.
  • List groups using the <ul> tag were indented on the page.  This may not be the case for all Vin sites.  I found some code in a custom css file (used by Vin) that created this issue.
  • .container has padding on the left but none on the right.
  • .container-fluid pads nicely on both left and right so it looks good on the page.
  • most of the table features work, however this is hit or miss.

It appears that this may be the solution to faster creation of custom pages that should be able to move from CMS to CMS and remain responsive.

You can see an example of a working page on VinSolutions using Bootstrap at: http://labadietoyota.com/custom/2014-toyota-avalon-vs-ford-taurus

Next test . . . forms!

One comment

Comments are closed.