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 flexbox layout
  4. Responsive menu
  5. Fluid typography
  6. Responsive images
  7. Responsive form
  8. Responsive table
  9. Advanced flexbox layout
  10. Advanced flexbox layout with OOCSS
  11. Grid layout with subgrid by display: contents (supported by Firefox behind flags)
  12. Grid layout without a subgrid (supported by Firefox and Chrome behind flags)

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).