A super basic responsive layout - step by step

See in the files below how a super basic responsive layout arises, page by page, with various responsive ingredients:

  1. Linear layout
  2. Responsive layout with float
  3. Progressive enhanced grid ayout layer
  4. Responsive menu
  5. Fluid typography
  6. Responsive images
  7. Responsive form
  8. Responsive table
  9. Advanced layout with nested flexbox
  10. Same layout with OOCSS for flexbox

And check out sample of a scaled responsive image plus an art directed version. Best way to allow the browser to download different versions of the image, is to start linear and slowly widen the viewport by scaling the browser window.

Ready to create something for yourself? Download the starter files (595kB).