Last Friday, Bearded celebrated its third anniversary. It’s been a wild ride, and we’re all looking forward to what the future holds. To mark the occasion, we’ve launched a brand new website with a fabulous responsive design.

Our previous site, launched in November 2009, served us well over the years. But the web has become a more diverse place since then, with screens coming in increasingly varied sizes and touch-based devices more prevalent than ever. Obviously, it was time for a new approach. Enter responsive web design, the idea that a single design can be made to meet the needs of all your users without removing content or building a second layout.

Ethan Marcotte, the champion of responsive practices, recently shared his knowledge in an excellent book: Responsive Web Design. It’s an invaluable resource if you’re ready to get started with responsive designs. If a book is too long for your tastes, check out his A List Apart article for a briefer overview of responsive concepts such as media queries.

The Grid

In searching for a responsive grid system that met our needs, we came across Jonathan Clem’s excellent solution as a starting point for our own work. However, we felt it warranted some changes to better accommodate layouts with variable numbers of columns.

CSS grid systems traditionally define columns with a fixed width for content and a gutter on the right side, then removing the gutter on the last element in a row (typically by adding a “last” class to your HTML). This makes it difficult to allow for an elastic grid that can be easily reflowed. We instead opted for columns to split their gutter to both sides of the element, removing the need to track where any row begins or ends.

1
2
3
4
5

@mixin column($cols: 12) {
  float: left;
  width: ($cols * $column + ($cols - 1) * $gutter_width) / $container_width * 100%;
  margin: 0 $gutter/2;
}

Usage

We chose the section tag as our base unit of layout. Let’s see it in action with a simple example:

1
2
3
4
5
6
7
8

<div class="container">
  <section>
    Some content
  </section>
  <section>
    Some other content
  </section>
</div>

1
2
3
4
5
6

.container {
  @include container;
}
section {
  @include column(6);
}

As you can see, it lets us build completely semantic HTML, while not having to worry about which element appears last in a row. Combined with media queries (which allow us to know the size of the browser’s viewport and apply styles accordingly), it made it exceedingly easy to perfect our layout across a variety of screen sizes.

Get Some Code

I’ve affectionately dubbed our system YARG - Yet Another Responsive Grid, and you can grab it on Github to try it out today. It’s as bare-bones as possible and lacks proper examples and documentation, but it’s working great for us so far.

Like most similar systems, YARG is meant as a starting place for your responsive designs, to be taken apart and modified as you see fit. Go give it a download, and let me know what you think!