I've been looking at web design and development more and more in the past few weeks, as it's a field that really interests me - the huge range of UX features that you can cover with a single medium is fascinating. But with this great spectrum of features comes an issue: how do you unify your design to scale well to many different devices?

The answer is "responsive design", which has been covered to death across the internet on every blogger and their dog's website (see here for my favourite). To get the crux of the matter, it's the principle that content should dynamically reflow to a main set of screen sizes ranging from phones to tablets to desktop devices, and every element should be designed with viewing all of them in mind. So essentially how the web was always meant to work, but with the new set of CSS 3 selectors and HTML5, and the aforementioned spectrum of devices, responsive design has become more important and far easier to implement.

I've just finished a web design project, and in my research came across a cute little CSS-based tool called Girder. With it, you can create 'grids' of content that dynamically change with the width of a webpage. This process becomes ridiculously trivial with such a tool; all you have to do is define the relative units (half, third, fourth, fifth and so on) of your row and Girder handles the rest for you. It works in a similar way to Bootstrap's grid tool, but unlike Bootstrap, which pollutes the DOM with your layout data, Girder can be a pure CSS solution if you leverage it's Sass mixins, so it becomes literally as easy as:

.ul {
  @include unit();
li {
  @include unit(fourth); /* for four list items that you want to organise in a row */

It also handles images super well.

The only downside that it has is that it's poorly documented and not well supported on traditional developer forums such as StackOverflow so you'll be left to solve any layout issues you may have on your own. Having said that I haven't had many.

Check it out.