Advertisement
HTML/CSS

Foundation for Beginners: Joyride, Interchange, Tables and Panels

by

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.

1

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.

2

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>
3

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.

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>
5

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.

4

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.

Related Posts
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 3Indexeddb retina preview
    Welcome to the final part of my IndexedDB series. When I began this series my intent was to explain a technology that is not always the most... friendly one to work with. In fact, when I first tried working with IndexedDB, last year, my initial reaction was somewhat negative ("Somewhat negative" much like the Universe is "somewhat old."). It's been a long journey, but I finally feel somewhat comfortable working with IndexedDB and I respect what it allows. It is still a technology that can't be used everywhere (it sadly missed being added to iOS7), but I truly believe it is a technology folks can learn and make use of today. In this final article, we're going to demonstrate some additional concepts that build upon the "full" demo we built in the last article. To be clear, you must be caught up on the series or this entry will be difficult to follow, so you may also want to check out part one.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…
  • Code
    HTML & CSS
    Pure: What, Why, & How?Pure retina preview
    This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I'll guide you through the creation of a simple page in order to highlight how you can use some of the library's components.Read More…
  • Code
    Plugins
    Creating Responsive Pricing Table Plugin for WordPressPricing table plugin
    Pricing tables are a key component of your business that promotes your products and helps users choose between different services you have. Most modern commercial WordPress themes provide built in Pricing Tables. There are also plenty of free and commercial pricing table plugins for WordPress. This tutorial is intended to provide knowledge to WordPress developers on creating a plugin from scratch which enables customization in different projects. Every web design is trying to accomplish responsive features which enable better look and feel on any kind of device. The pricing tables created with this plugin will work on all kinds of devices such as mobiles and tablets as well. So let's get started.Read More…