Disclaimer: I've worked these things out for myself, they may not be the best way of doing it but they work and hopefully they might give you a nudge in the right direction.

If you know of a better way of doing this then feel free to drop a comment with your thoughts.

Mohunky Responsive Web Design Starter Kit

Every time I started a new responsive website build, I found I was repeating myself. Repeating code and tasks. That's a silly waste of time, so I created a starter kit for myself. Which then also incorporated my own responsive grid framework. And then my own screen width counter. I kept updating it over the years, every time I found an improvement and here I am on version 4.3.

It started, unintentionally, quite similar to Bootstrap. Although it has moved on since then if you know Bootstrap you will see similarities. Where Bootstrap got bigger and more popular over time, I've tried to keep mine as small and bloat free as possible. (Aside from my RWD width counter, that's a pretty fat CSS file, but is intended for development only.)

As with all my work, I'm sharing it in the hopes that it'll help some one out there. I'd love to hear if you're using it.


The markup is pretty simple, each main segment is either wrapped in a <header>, <article> or <footer>. Lets pick up an <article> as an example as that'll be the most commonly used one.

Inside an <article> I'll create <div class="row"></div>. Each row needs a series of <div class="span#"></div>, the # being replaced with a number between 1 and 12. The spans in each row need to add up to 12. The number represents the amount of columns that div should span.

So if I wanted a 2 equal column layout, I'd set up the HTML as follows:

<article>
	<div class="row">
		<div class="span6"></div>
		<div class="span6"></div>
	</div>
</article>
				

To start the next row I simply open up another <div class="row"></div>. This row could then be a sidebar layout, the HTML would look like so:

<article>
	<div class="row">
		<div class="span6"></div>
		<div class="span6"></div>
	</div>
	<div class="row">
		<div class="span8"></div>
		<div class="span4"></div>
	</div>
</article>
				

To make that a left sidebar instead of a right I'd just switch the span8 and span4 around.

Blank and spacing columns can be added really easily. For example, if I wanted a slightly narrower 2 column layout I would create the follow HTML:

<article>
	<div class="row">
		<div class="span1 mobile-hide">&nbsp;</div>
		<div class="span5"></div>
		<div class="span5"></div>
		<div class="span1 mobile-hide">&nbsp;</div>
	</div>
</article>
				

The &nbsp; is there so the next <div> in the row has something to bump into. And the mobile-hide class is to remove it when all the columns stack so that you don't end up with unintended whitespace. Of course this can be removed if you want that whitespace in the mobile view.

That's pretty much the basics. You can see a bunch of column combinations below. Get playing with it and you'll soon get into the flow of how it works. I'd love to hear if you've found this framework useful and used it in a project. Grab me on rob[at]mohunky.com or comment below.

.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span2
.span2
.span2
.span2
.span2
.span2
.span3
.span3
.span3
.span3
.span4
.span4
.span4
.span1
.span5
.span5
.span1
.span6
.span6
.span7
.span5
.span5
.span7
.span1
.span2
.span1
.span1
.span7
.span4
.span8
.span3
.span9
.span2
.span10
.span1
.span11
.span12