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. Now with SCSS
  2. Add nested UL's to create viewport aware, infinite level drop-downs.
  3. Automatically creates off-canvas mobile nav for small screens
  4. Includes Font Awesome 4
  5. Ready for many various responsive element types
  6. The mobile navigation animation uses CSS3 so it's silky smooth.
  7. 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!
  8. 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.

Sample Social Media Icons

Need Responsive jQuery Tools?

I've got several free ones here: