I couldn't find a responsive template I liked, so I made my own.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
stylesheets
README.md
html5-responsive-layout.fdproj
index.html

README.md

HTML5 Responsive Layout

I couldn't find a responsive template I liked, so I made my own.

Features

  • Single, Double, Triple, and Quad columns
  • Four layout sizes, maxing out at 1000px width
  • Switches to single column mode below 768px for mobile
  • Templates for fav icons
  • Changes colour to let you know which size layout you're looking at

File Guide

index.html

This is the example layout used for testing CSS. I've made heavy use of custom tags, such as <navigation>, <footer>, <content>, <column>, and <heading>. These have been nested together with a bit of CSS class markup to denote positions.

base.css

Taken from:

This file sets default styles for lots of things, and provides a CSS reset across the board.

layout.css

This file contains metrics only for layout and positioning, including sizes for double, triple, and quad, and default padding for content. Avoid editing this file.

style.css

This is the place to write custom content for the site layout. It should contain all colour, font, and formatting. Some colours, fonts, and columns heights have been added as examples.