Upgrade from Suit V1 to Suit V2
We have a few steps you'll need to take to make your transition a bit easier.
Welcome!
If you're reading this page, you're probably wondering how to upgrade to Suit V2 and possibly what the differences are between the two versions. So, without further unnecessary text...
New URL structure
In Suit V1, we asked you to point to Suit with a couple of URLs in your layout template. For CSS, we asked you to to add this piece of code in the <head>.
<!--[if IE 9]><link rel="stylesheet" href="//static.sonos.com/v1/styles/min/ie/suit.css"><![endif]-->
<!--[if gt IE 9]><!--><link rel="stylesheet" href="//static.sonos.com/v1/styles/min/suit.css"><!--<![endif]-->To use Suit V2 at version 2.5.8, please change the urls to the following:
<!--[if IE 9]><link rel="stylesheet" href="//static.sonos.com/v2/live/styles/min/ie/suit.css"><![endif]-->
<!--[if gt IE 9]><!--><link rel="stylesheet" href="//static.sonos.com/v2/live/styles/min/suit.css"><!--<![endif]-->Starting at version 2.7.0, suit updated its visual appearance to focus on a black and white color palette. This change also included a new URL structure. To use this updated version, please change the urls to the following:
<!--[if IE 9]><link rel="stylesheet" href="//suit.sonos.com/2.7.25/styles/min/ie/suit.css"><![endif]-->
<!--[if gt IE 9]><!--><link rel="stylesheet" href="//suit.sonos.com/2.7.25/styles/min/suit.css"><!--<![endif]-->You'll notice that our directory structure is reorganized a bit. If you want to point to the stage urls for V2 (beta code), you would use something like:
<link rel="stylesheet" href="//suit.sonos.com/latest-rc/styles/min/suit.css">The JavaScript code for Suit has also changed URLs, though in a similar way. You can find the JS at:
<script src="//suit.sonos.com/2.7.25/scripts/min/suit.js"></script>Or for stage:
<script src="//suit.sonos.com/latest-rc/scripts/min/suit.js"></script>New Fonts
The primary driver for Suit V2 was the necessity of moving from SonosHandbookPro to Helvetica Neue as our primary typeface. In order to facilitate that, we have signed a contract with Fonts.com that will allow us to use their infrastructure and hard work for serving our fonts. They also support features like Dynamic Subsetting for Asian languages if we ever decide to move to a webfont for China (right now we depend on an elaborate system font stack). Without dynamic subsetting, using a webfont for China would be unrealistic as Chinese can have over 3,000 glyphs.
I say all this to say that in order to take advantage of the new font support, Suit V2 requires an additional CSS call in the head of your layout template. Please add the following:
<link rel="stylesheet" href="//fast.fonts.net/cssapi/f0598f02-6b8c-4ebc-8e0b-da61573232cf.css">Header sizes, paragraph size and other typographical elements have been sized and styled to reflect brand guidelines as much as possible. You shouldn't be overriding these styles at all, unless you absolutely need to. If you feel like something needs to be changed, contact team members on the Slack Channel #suit.
Congratulations!
You should now be pointed to Suit V2. There will probably be more problems to solve. Maybe you wrote CSS against V1 that doesn't work so well with V2. Maybe you need to write your HTML to be more compliant with with the new .section support. Maybe the button colors you were using have been removed.
There will be issues. Contact us if you need help.