Responsive Design Template

I built this tool for my own front-end development projects. My goal was to include everything I need, and strip out anything I don't. This provides a lightweight starting point for web development.
- Kevin Thornbloom

Why is it awesome?

  1. Add nested UL's to create viewport aware, infinite level drop-downs.
  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 nested UL's within the main-nav area to build your navigation, but besides that- go nuts!
  3. You can use a class of "content" for the container holding your main content to take advantage of some pre-written CSS hooks.
  4. Note: Some elements and CSS rules are for my own personal set-up.

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.

Sample Social Media Icons


Need Responsive jQuery Tools?

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