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.
For this tutorial, we’ll look at building a completely functional login + registration system with a design based off of Twitter Bootstrap. The login form will pop out as a dropdown from the navbar and maintain responsiveness when scaled down. Setting up with SQL + PHP is easy. Let’s take a look at how it all works!
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
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
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
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
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
Today’s post is all about enabling a very cool web design technique natively in a Twitter Bootstrap layout. We will be integrating a jQuery-based smooth scrolling effect that works responsively. Read More
We’ve said it before, responsive web design does not only have to be about viewing a large scale site conveniently on a small device. Responsive web design should also be about designing responsibly as well. With each HTTP Request we make while loading a web page, the harder the server has to work, and the longer the web page takes to load. Read More
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 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!
