Category Archives: Tutorial

How to Create a Recent/Popular Posts Section with Pagination Using Twitter Bootstrap + JavaScript

Posted by | Tutorial, Twitter Bootstrap | 2 Comments

Twitter Bootstrap Pagination

Twitter Bootstrap provides a nice design base for displaying a wide range of content, and we can use its styling in a more dynamic sense with the following tutorial. We’re going to focus on using a row with spans + JavaScript to create a functional recent/popular posts snippet. The real beauty of this is that it can also easily be combined with a CMS function like WordPress’s post query.

Read More

How to Create a WordPress Theme with Twitter Bootstrap

Posted by | Tutorial, Twitter Bootstrap, WordPress | 2 Comments

Bootstrap can be adapted towards a wide range of applications, for example, content management. WordPress’s complex but easy-to-use theme structure is a great platform for taking advantage of this. Since our primary focus will be on the versatility of Bootstrap as a framework, this tutorial may assume you’ve already some basic knowledge of theming for WordPress. Read More

How to Build a Modal Contact Form in Twitter Bootstrap with PHP + AJAX

Posted by | Tutorial, Twitter Bootstrap | 3 Comments

With the built-in styles provided to us by Twitter Bootstrap, designing a simple contact form becomes streamlined. When you’re looking to streamline your site even further, you might not even need a dedicated contact page if no other info would be found there. A modal box is a nice, unobtrusive alternative, and Bootstrap allows us to also create that with ease. Let’s take a look at how to put that together then add PHP & AJAX to make a no-refresh contact form come to life. Read More

How to Integrate Simple Parallax with Twitter Bootstrap

Posted by | Tutorial, Twitter Bootstrap | 15 Comments

Thanks to the flexibility of Twitter Bootstrap, you’re not in any way limited only to the framework’s default container and grid styles. It can actually be quite easy to introduce new layout options to your site without needing to worry about disrupting Bootstrap’s functionality. With this tutorial, we’ll learn how to do that by integrating a simple scrolling parallax effect to the page. Read More

How To Create Full Screen Background Images In WordPress

Posted by | Tutorial, Video, WordPress | One Comment

WordPress Background Manager

As the internet changes into a more fluid experience, with websites being accessed from tablets, smartphones, laptops, kiosks and even cars, a trend has started to emerge. In an era wherein “Intentional Layout” is dying off, designers must find new ways to provide visual interest. Commonly, this search has led to the use of images. Because, hey, images are interesting by their very nature. In this post, I will show you how to replace your current WordPress background tool with the incredible WordPress Background Manager plugin. Read More

How To Build A Responsive Lightbox Gallery With Twitter Bootstrap

Posted by | Tutorial, Twitter Bootstrap | 7 Comments

Integrating Twitter Bootstrap with PrettyPhoto


Images are a driving force of the web. Compelling images can bring visitors to your website, and exciting displays can keep them there. Over the past few months we have delved into the possibilities of Twitter Bootstrap. At times, however, Bootstrap alone does not contain every component that we may need for a project.

Today we will discover how to complement a Twitter Bootstrap-powered image gallery by implementing the PrettyPhoto lightbox plugin! The end result will be an excellent template to build out image galleries that are simple to put together and incredibly easy to manage. Read More

Responsive Web Design: Videos With FitVids

Posted by | Tutorial | No Comments

We have spent a lot of time covering ideas behind responsive web design. However, up until this point we have focused almost solely on the “Big Picture”. So today, let’s take some time and dive into an element that is essential when it comes to designing responsively. Video!

After all, it would be easy to say that people love watching videos online, so it only makes sense that we should design responsibly to meet our users where they are, on the devices they are using. So with that in mind, let’s take a look at FitVids.js by Chris Coyier and Paravel.

FitVids is a light weight responsive web design jQuery plugin that allows designers to not only design responsively for small screens, but also for large environments as well. It could make sense that using a tool like FitVids could allow you to embed several blog format videos into a page, and also create awesome full screen video backgrounds! Cool huh?!


If you would like to use FitVids within your own projects, it would be a good idea to check out the video above and follow along. However, if you are in a hurry then simply follow these steps.

Step 1: Download FitVids.js

Step 2: Include the plugin within your javascript (See Video for Example)

Step 3: Activate FitVids


<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

That’s it! Now you are up and running with FitVids and Videos placed within collapsing containers will bend to your will. So play around with it; I promise that you will find it capable of solving your problems and perhaps even providing a bit of inspiration! Just think of what you can create with a tool like FitVids in your pocket. So get back to designing your next cool site!

Start planning your project today. Get Started