Post by Peter Watson-Wailes


The original responsive CSS structured library. Powered by LESS and LESS Hat. Available via the OpenDAWS repo.

Upholsterygeist, this site's theme, is powered by it. It also powers the layout of the interactive guide to space exploration, Fly Me to the Moon. Consider both a demo.


OpenDAWS is a LESS framework, built with ideas from or by:

What Opendaws Is

OpenDAWS can be thought of as an structured library; that is to say, it's a set of resets and classes, as well as the logic for grid layouts, but without any of the constraints of a full framework. It comes with a standard grid you can use, but all the components are also available as mixins, so you can apply widths to containing element IDs and classes.

This means that you can create a design limited in width only by the user's viewport size. Want a design that adapts at 320px, 768px, 1024px, 1600px, 1920px, 2560px & 4096px? Easy! You can use the default grid where it makes sense, or use the mixins and remove classes from your HTML, leaving it completely semantic.

...and What It Isn't

This is not a full framework, in the vein of Foundation, Bootstrap or similar.

It's also not an attempt to style everything. Whilst OpenDAWS includes a full set of typographic stacks, and some pleasant defaults for buttons and forms, it's designed to be extended. As such, you're going to want to put your own stamp on it.

It also doesn't care about backwards compatibility. It supports back to IE9 mostly, and 10+ well.


  • Normalised elements for x-broser consistency
  • Baseline aligned typography and forms
  • Automatically responsive type sizes for different resolution sizes
  • Semantically-correct HTML possible
  • Designs can be designed for each new resolution, rather than set inflexibly in HTML
  • Mobile-first design enforced


  • A full set of sans, serif and alternative font stacks, ordered by likely font appearance
  • All the benefits of LESS, plus the LESShat mixin library
  • Beautiful defaults form forms and typography
  • Automatically x-browser compliant grid functionality
  • Box sizing by default to solve padding increasing size bugs
  • Fontawesome built in as the default icon library

If you've enjoyed this post, you might want to follow me on Twitter