List of Awesome Bootstrap Plugins

Posted on Tue, October 08, 2013 in User Interface, Web Design by Kevin Carpenter

It seems like everyday that i stumble across a new useful plugin that enhances the web project that i am currently working on. However, what use are plugins if they are difficult to work with or do not directly fit into to your existing websites' templates or framework? To ease the pain, i have put together a few plugins that all play nicely with Twitter's Bootstrap foundation for seamless transition into your website.


A combobox plugin that works with twitter bootstrap. Transforms a select box into a autoselecting combobox, pretty neat. Link: ...

Read More

Which Graphics File Format Do I Save As?

Posted on Tue, September 24, 2013 in Web Design by Kevin Carpenter

The difference in image types is the result of the need for compression. By default, most images have a fairly large file size, which is not conducive to web use. The most commonly compressed image file types are .jpg, .gif and .png. This quick tip article will supply you with a basic rundown of the various image types while avoiding the massive amount of details regarding the technical processes of compression.

For most readers, you are here for a quick answer as to what format you should save your image as, here is a quick rundown before we go into a little more depth:

  • If the images...

Read More

Gesture Recognition: A Hands-On Example With HammerJS

Posted on Tue, August 27, 2013 in Web Design by Kevin Carpenter

In this article, you’ll learn how to create web experiences with touch gestures using simple and easy HTML, CSS and a little bit of jQuery.

I Googled to find a few different frameworks from jQuery mobile to Wipetouch as well as several others. All the frameworks I tried were either too complex to use or not very responsive on mobile browsers which completely defeats the purpose.

Finally, I tried another framework called HammerJS, and this worked the way I wanted. It was simple, easy to use and the swipe gesture is very responsive for platforms in iOS and Android alike.

Note: the demo...

Read More

CSS 3D Transitions: An Introduction

Posted on Tue, August 13, 2013 in Web Design by Kevin Carpenter

On the web there are already several solutions for 3D capability: Flash; three.js in <canvas>; and, eventually, WebGL. Also, front-end developers have our own three-dimensional tool: CSS 3-D transforms.


Just like the 2d transition module released by Apple in Safari, 3D transitions initially were only supported by Safari. Since the release all of the major browsers, and IE10, everything either partially or fully supports 3D transitions. Take a look at the most up-to-date compatibility chart.

Please keep in mind that you still need to use Modernizr to ensure that you are...

Read More

IE Background Images

Posted on Tue, July 30, 2013 in Web Design by Kevin Carpenter


A very handy CSS property is the “background-size” property. For background images, and images we need to cover an entire div we can simply apply “background-size: cover;” or “background-size: 100% 100%;”. Doing so stretches the background image to the entire width and height of it’s containing div. But that’s not it. I wish that was the case, according to W3c the background-size property is only supported in the following browsers: IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.  Although our hate for IE as developers grows with every project we complete, it’s...

Read More

Vertical Accordion Menu

Posted on Wed, June 05, 2013 in Greatest Hits, User Interface, Web Design by Kevin Carpenter

Vertical menu’s have recently become the newest rave in the Web industry. They are responsive, save space, and look great on any device.

Let’s get things started by putting in place our HTML and add the underlying structure to the menu:

Vertical Navigation Menu: CSS3 Coded

<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a></li>
li class="item2"><a href="#">Videos <span>147</span></a></li>
li class="item3"><a href="#">Galleries <span>340</span></a></li>
li class="item4"><a href="#">Podcasts <span>222</span></a></li>
li class="item5"><...

Read More

Hover Animations

Posted on Fri, May 31, 2013 in Web Design by Kevin Carpenter

With the addition of CSS3 transitions and keyframe animations it can be easy to overdo animations on your website. However, adding certain effects to main content areas can greatly enhance the experience your visitors receive.

A popular trend on the web these days are “content boxes”. These were first found on a lot of sports and news sites mainly, but have since made their way to every category of web pages. Plain, generic content boxes are effective in dividing areas of content, but can be boring if there is nothing present to visually please the user.

So lets spice those generic...

Read More

Email Inputs

Posted on Fri, May 10, 2013 in User Interface, Web Design by Kevin Carpenter

When we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. This makes us that much closer to built-in form validation and we don't have to write JavaScript validators. We can’t 100% rely on this just yet, for browser support reasons. In older browsers that do not comply with the “email” type, they’ll simply fall back to a regular textbox. Please note that all current browsers are a bit picky when it comes to which elements and attributes they do and do not support. For example, Opera supports...

Read More

Using The < nav > Element in HTML5

Posted on Wed, May 08, 2013 in User Interface, Web Design by Kevin Carpenter

With the addition of the nav element in HTML5 there is much confusion as to when to use it. The HTML5 specification definition is the following:

"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav...

Read More

Quick Tip: HTML 5 Cheat Sheet

Posted on Tue, December 11, 2012 in by Kevin Carpenter

There is a very handy HTML 5 cheat sheet available for download. It's a printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4. Definitely worth a download and a print! Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final recommendation status. Link: HTML 5 Cheat Sheet

Read More

Tell Us About Your Project

Invalid phone number