Responsive Design Template2

A solid starting point for front-end developers building responsive websites. Built by Kevin Thornbloom. Resize this page for a demo.

Why is it awesome?

  1. Add viewport aware, infinite level nav dropdowns with an unordered list.
  2. Automatically creates off-canvas mobile nav for small screens
  3. Includes Font Awesome 4
  4. Ready for many various responsive element types
  5. The mobile navigation animation uses CSS3 so it's silky smooth.
  6. Unlike other templates/boilerplates, it doesn't force you to use any particular layout method besides an unordered list for the navigation. Code how you want to!
  7. FREE for personal, professional, or other projects. Just don't attempt to resell this as-is

How do I use it?

  1. Download the files from Github
  2. Use the given structure in index.html, but besides that- go nuts!
  3. Use a class of "content" for the container holding your main content to take advantage of pre-written CSS hooks

Examples of responsive elements


Page Images

I personally use classes of ".float-right" and ".float-left" for my page images. These will be placed as they're named, but will resize down smaller if needed.

Fix Big Fat Tables

This template inludes code to watch out for tables that are breaking your layout. If one is found, it will be replaced with a button to view the table in a new tab. Just add a class of "rwd-table" to the tables you'd like to apply this to.

HeresAReallyLongTableCellTitle Table Test Table Test Table Test Table Test
Table Test Table Test Table Test Table Test Table Test
Table Test Table Test Table Test Table Test Table Test
Table Test Table Test Table Test Table Test Table Test

Embedded Content? Yes Please.

Create a div with a class of "responsive-iframe-container" and place your iframe embedded maps, videos, etc within.

Need Responsive jQuery Tools?

I've got several free ones here: kthornbloom.com