Advertisement
Complete Websites

Building a Responsive Layout With Skeleton: jQuery Plugins

by

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.

Related Posts
  • Web Design
    CMS
    Adding a Twitter Timeline to a Tumblr ThemeTumblr 28 retina
    Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter timeline into our theme; a slightly more complex process since Twitter updated their API to v1.1.Read More…
  • Web Design
    CMS
    Tumblr Appearance Options: Boolean OptionsTumblr 23 retina
    In this episode of Tumblr Theming 101 we'll add some Boolean Appearance Options to our theme. This will allow users, through checkboxes, to enable or disable certain features.Read More…
  • Web Design
    CMS
    Adding Media Queries to Our Tumblr ThemeTumblr 18 retina
    In this video, we'll be rounding off our responsive CSS by adding some Media Queries. We'll be talking about defensive coding, being sure that we make allowances for various usage scenarios, such as unusually long blog titles.Read More…
  • Web Design
    CMS
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…