Suit V2 Twilight
Suit is a responsive front-end framework for building Sonos websites, apps and prototypes. Built with HTML, CSS and JavaScript, you can go from zero to hero in a matter of minutes.
Need to upgrade from V1 to V2? We can help!
What comes with Suit?
Lots of responsive goodness! We can't list all of the tricks in our hat on a single page, but we can highlight some of our favorites!
The Grid
Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. Frankly, it's a little too easy. In no time, you'll be creating complex layouts like this.
12
6
6
6
6
4
4
8
4
3
9
4
3
3
6
Buttons
Clicking on stuff is awesome, so hook up your users with buttons to do stuff. There are some lightweight button styles for size, presentation, and color to make customizing your own button as easy as adding a class.
Navigation
People have to get around. Navigation styles in Suit include: a robust top bar with dropdowns; button search bars; a cool icon bar; a bitchin' off-canvas implementation; and a bunch of other navigational constructs.
Plugins
We've included a ton of JavaScript plugins: pop-up modals (Reveal); add a required validation for forms (Abide); create content tabs; alerts; and tons more.
This is a modal.
Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode
character icon and a class ofclose-reveal-modal. Clicking anywhere outside the modal will also dismiss it.
Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.
×This is a second modal.
See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.
×First panel content goes here...
Second panel content goes here...
Third panel content goes here...
This is a warning alert.
×