Let’s further add to our Foundation arsenal by looking at the Joyride plugin, which helps guide users through your sites. We’ll also look at pricing tables, standard tables and interchange; a novel responsive image tool. We’ll cover the implementation of these features with a simple template which you can download and play with.
We’ll begin with the most straight-forward of the features we’ll cover in this tutorial.
Panels
Adding a class of “panel” to almost any element will turn it into a lightly coloured block. Not just any type of block though, as these panels use border-box styles, so the padding is incorporated into the width of the object. This is a very handy approach as it gives you far more intuitive control over element dimensions.
<div class="large-6 columns"><div class="panel"><p id="firstStop">We have a simple selection of hosting packages for you to choose from, these will work fantastically for any company. With ultra fast mySQL database connections, content management systems really fly. Add to this 24/7 customer support and 99.9% uptime and you've got a great hosting package.</p></div></div>
To illustrate this point I have created a two column layout using an image and the panel, perfectly aligned.
Pricing Tables
One of the primary reasons to own/build a website is in order to sell something. Owing to this, pricing tables are commonplace on the interwebs and have been for years, so of course Foundation have this area covered. Each table is actually an unordered list, with list items and a few well-placed classes.
<ul class="pricing-table"><li class="title">Startup</li><li class="price">$9.95</li><li class="description">An awesome package to get any company onto their feet. With instant setup and magic money making plugins.</li><li class="bullet-item">1 Database</li><li class="bullet-item">5GB Storage</li><li class="bullet-item">20 Users</li><li class="cta-button"><a class="button round" href="#">Buy Now</a></li></ul>
The ul tag itself has a class of “pricing-table”, whilst within you have the option of using “title”, “price”, “description”, “bullet-item” and “cta-button”. The only additional customization needed is your content. You may want to line a bunch of these next to one another to create more of a pricing comparison table.
Standard Tables
Pricing tables are great, but every now and then you’ll need an actual html table for displaying data. Setting these up in Foundation is really easy because there is no real setup at all. Just add your table markup as normal and its styles will be taken care of. The only thing you may want to do is add column widths to even out your columns.
<table><thead><tr><th width="200">Startup</th><th width="200">Enterprise</th><th width="200">Global Corporation</th></tr></thead><tbody><tr><td>1 Database</td><td>5 Database</td><td>10 Database</td></tr><!--more rows--><tr><td>No Backups</td><td>50GB Backups</td><td>100GB Backups</td></tr></tbody></table>
Interchange
Although all images in Foundation are fluid by default, sometimes you’ll run into issues – the whole subject of images in RWD is ongoing.
And let me add, I think it's cray-cray that anyone in our industry can talk about *only images* for over an hour. #RWD
— Dave Rupert (@davatron5000) May 14, 2013
One such issue arises when you have text in an image. Recently Zurb added a new plugin called “Interchange”; its job is simple – replace the image of your choice with a different one when the screen size reaches a certain point. It works by adding a special attribute, namely “data-interchange”. This is used to house the options for the image source changes.
<img src="small.jpg" data-interchange="[smallest.jpg, (default)], [smallest.jpg, (screen and (max-width: 568px))], [small.jpg, (small)], [med.jpg, (medium)], [large.jpg, (large)]">
Here I’m making use of many of the options available in the attribute. There are quite a few parameters, for example you can optionally set a custom point to switch the image.
This isn’t the most performant plugin as changes can take one or two seconds, hopefully Zurb will address this in the future. One of the major benefits of this plugin is the load time it saves on mobile devices. Rather than load a massive jpeg on a 3G connection, you can load a smaller optimized version of the same image, freeing up bandwidth to load the rest of the page.
Joyride
In every part of this series so far we have covered a JavaScript plugin available in Foundation, but in this case we’ll cover two.
In some situations it’s useful to take your users on a magical mystery tour of your user interface. Google, for example, do this when launching new features in many of their applications. By guiding your users from step to step you can explain what each part does and where it leads. Joyride covers this by using a list which couples each list item, holding your tour stop, with an element on the page. This list can be either an ordered list, or an unorderd list, but must have both the “joyride-list” class and the “data-joyride” attribute.
<ol class="joyride-list" data-joyride><li data-id="firstStop" data-text="Go"><p>Let's get started, here we have an intro.</p></li><li data-id="numero1" data-class="custom so-awesome" data-text="Next"><h4>First Stop</h4><p>Here we use the new interchange function to change images based on screen size.</p></li><li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade"><h4>Second Stop</h4><p>We are using pricing tables here to display a list of services from a hosting company.</p></li><li data-id="numero3" data-button="Next" data-options="tipLocation:top;tipAnimation:fade"><h4>Third Stop</h4><p>This is just a link but it opens a modal with a standard table inside, exciting eh?</p></li><li data-button="End"><h4>End Of The Line</h4><p>Our tour ends here, please remember to take all your belongings with you on your way to the exit.</p></li></ol>
Each list item needs its own “data-id” which must match the element id its coupled with. If the first stop on your tour is an h2 tag then your data-id could be ” data-id=”title” “. Your h2 would need an id of “title”. Easy.
Aside from this basic setup you’ll want to add a “next” button so users can navigate easily from one stop to the next. These are added by attaching another attribute to the list item; “data=text”. In the example above I’ve used “Go” to get started and “next” to continue.
There are a fair few options for joyride and some can be added directly to each list item. Above I have used data-options="tipLocation:top;tipAnimation:fade" and as you might have guessed this assigns the tour stop to the top of the coupled element, fading it in. There are many more parameters which you can pass in on JavaScript initialization. You could also make use of the cookies plugin, or if your users are logged in save an option to only show the tour once.
Useful Tool
Sadly, one thing Foundation doesn’t include (yet) is a testimonial plugin/feature. These can really come in handy. Quovolver can remedy this with a simple setup and flexible markup. Add the script in your footer, throw in some markup and you’re away.
Coming Up Next
In the next part of our examination of Zurb Foundation we’ll talk about Magellan, which creates sticky navigation. We’ll look at visibility classes, right-to-left support, keystrokes, thumbnails, flex video and the ins and outs of zepto. I’ll explain the use cases of these features and how best to implement them in your projects.