CSS: px
JQ: px

Mohunkys Responsive Web Starter KitV5

A start point framework for building responsive websites


Everytime I build a responsive website, I start from my own set of base files. This is the default HTML page for that set of files. This is not a complete solution, this is intended as a semi-bloat free starting point for my own projects.

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="mrwd-all-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 column layout, I'd set up the HTML as follows:

<article>
	<div class="row">
		<div class="mrwd-all-span6"></div>
		<div class="mrwd-all-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="mrwd-all-span6"></div>
		<div class="mrwd-all-span6"></div>
	</div>
	<div class="row">
		<div class="mrwd-all-span8"></div>
		<div class="mrwd-all-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="mrwd-all-span1 mobile-hide">&nbsp;</div>
		<div class="mrwd-all-span5"></div>
		<div class="mrwd-all-span5"></div>
		<div class="mrwd-all-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 dont end up with unintended whitespace.

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 on Twitter @mohunky.

Sources files are available here:

Download

In the .zip

You'll find all the HTML, CSS, JS and image files that are a part of this page and framework.
There are also .PSD and .INDD design templates with a column layout matching this framework.
And finally you'll also find an Excel spreadsheet which can be used to work out column widths.


Examples of Standard layouts

.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

Examples of different breaking points

.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