Respondo. Just another framework?

Maybe. Maybe not.

If you need a simple design framework that delivers your content in a device agnostic way, you may have just struck lucky. Respondo has been built to help you do just that, with the minimum amount of fuss.

Give It To Me

Heard enough and want to jump in already? Snag a copy here.

Download Respondo v1.1 (62k)

Questions? Fire them @ash_loudon

So Who Is this For?

Respondo has been built for designers who want a framework that lets them get straight into building their next project.

No more clearing out piles of superfluous styling or elements. Just simple, clean markup that allows you to get straight on with what you do best; making awesomeness.

Hard on the outside. Soft in the middle.

Yes, just like an Armadillo.

Respondo was built to be as flexible as possible, while being strong enough to prop up your next mega project.

If you like to keep things simple, straight forward columns will do you just nicely. However, if you like to mix it up, you'll love the crazy easyness of the nesting shenanigans.


Plays nicely with others. Even the difficult child.

By conducting extensive testing (mainly using the excellent Browserstack) Respondo is ready to deploy with confidence, safe in the knowledge that it will work on all of your favourite browsers. It also works on those that you're probably not too keen on, too.

We decided not to develop for IE7 and earlier. Life's just too short.

Ready to go on:

  • Internet Explorer 8+
  • Google Chrome (FTW) 14+
  • Mozilla Firefox 3+
  • Opera 10+
  • iOS 3+
  • Android 2.2+

Oh yeah, did we mention that it validates, too?


Kiss me quick. Squeeze me slowly

Respondo uses breakpoints based on ems so your content always looks peachy, no matter how modest or flamboyant your screen size.

  • Wide Load: Above 112ems - Big screen show off, huh? This is just up your street. Nice large type with a slightly reduced width to keep line length reasonable.

  • Big Boned: Above 87ems - Don't like sitting with your face pressed to your widescreen? Your eyes will love the increased typeface and think of the time saved not having to wipe nose prints off your screen.

  • Perfect 10: Between 87 and 68ems - Back in sensible land, most desktop and laptop users will feel right at home here.

  • Weight Watcher: Below 68ems - The nip and tuck is hardly noticeable, but the effect is sublime. Everything remains beautifully presented despite the more svelte screen dimensions.

  • Slim Jim: Below 43ems - Despite adopting more drastic measures to squeeze everything in, the flow is maintained and life is good.

  • Snake Hips: Below 31ems - The most modest offering still delivers on performance. With reduced type and screen width put to best use, karma remains in balance and Polar Bears are protected from danger*.

* polar bear protection not guaranteed.


Because Life's Complicated Enough

Keep your unruly content in hand without tying yourself up in knots. The Respondo grid system is brain-meltingly simple and because it uses percentages, your content will behave itself and still look great.

Columns can be wrapped as an article or as a row and must not exceed 12. There are 12 columns available, so a column with a class of c6 would occupy 50% of its parent container. What could be simpler?!

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1

Go Crazy, Without Going Crazy

Nested columns without losing your marbles? Sounds too good to be true, doesn't it? Using a couple of simple classes .first and .last you can nest away with impunity. As with standard columns, each nested group has 12 columns available, so positioning is a breeze. Too easy.

11 with two nested columns (each with width of 6)

6 (.first)
6 (.last)
1

6 with two nested columns (each with width of 6)

6 (.first)
6 (.last)

6 with two nested columns (one of 4, one of 8)

4 (.first)
8 (.last)

9 with three nested columns (each with width of 4)

4 (.first)
4
4 (.last)

3 with two nested columns (each with width of 6)

6 (.first)
6 (.last)

Gimme Gimme Gimme

Enough of this jibber jabber. Is it time to get your Respondo on?

Download Respondo v1.1 (62k)

Changelog

v1.1 - 31 Mar 13Fixed line height issues.

v1 - 22 Mar 13Initial build. All quiet on the western front.