Advertisement

Building a Responsive Layout With Skeleton: jQuery Plugins

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

This post is part of a series called Build a Responsive Layout With Skeleton.
Building a Responsive Layout With Skeleton: Navigation
Building a Responsive Layout With Skeleton: Finishing Off

Our responsive layout is coming on in leaps and bounds, so let's crank it up even further! Today we'll look at various jQuery plugins which we'll use to pull Twitter and Flickr feeds into our page, plus a responsive slider plugin for our features area at the top.

Note: It's worth mentioning that some of the jQuery plugins mentioned in this tutorial may be out of date (for example, Twitter have made changes to their API which prevent Tweet! from working). Feel free to try alternatives and share your thoughts in the comments!


Preparing the Footer

Before we start implementing various jQuery toys, let's first tidy up our footer area. We'll tackle the diagonal line styling behind the h4 elements, place our secondary logo, add the generic dummy content and finish styling the lists.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Implementing Tweet! and Flickrush

Having dealt with most of the styling, we can now grab the Twitter and Flickr jQuery plugins which will pull feeds into our document. As we're starting to add quite a lot of code to the foot of our page, we'll make a point of compiling that all into a single .js file.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Implementing Flexslider

Last, but not least, the responsive slider plugin. We'll be using the hugely capable Flexslider plugin (recently acquired by WooThemes) and implementing it to show off a few PhotoDune images.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Additional Resources

Some useful links to further build on what's been covered in these videos.

Images courtesy of PhotoDune.

Advertisement