Mohunkys Responsive Web Starter Kit^V5

Everytime I build a responsive website, I start from my own set of base files whether they're a part of a bigger Umbraco baseline or trimmed right back. This is the default HTML page for that set of files. This is not a complete solution, this is intended as a bloat free starting point for my own projects.

The basics

First off, lets get some foundations laid out. This framework uses a 12 column grid system and it's broken into multiple breakpoints. Before you even think "Why no mobile first", it's just a trend, give yourself a slap and consider every breakpoint and user equally. "Mobile first" favours mobile users, don't forget the tablet users, or low end laptop users, or desktop users, or yourself, I bet you're not running 1024x768?

Equivalent	Shortname	Pixel Widths
Desktop		1920px and bigger
Laptop	.lap	1232px to 1025px
Tablet Large	.tbl	1024px to 811px
Tablet Small	.tbs	810px to 601px
Mobile Large	.mbl	600px to 401px
Mobile Small	.mbs	400px and smaller

The markup is pretty simple, each content block is wrapped with a <div class="container"> or <div class="fluidContainer">.

Each container is then broken down into <div class="row">'s. Each row should then contain columns adding up to 12. The width of each column is defined by its .span# class. For instance, .span6 would give you a column half the containers width. A column with .span3 would give you a column quarter of the containers width and adding a second .span3 would complete the row.

This all leaves you with the following markup:

<div class="container">
	<div class="row">
		<div class="column span6"></div>
		<div class="column span3"></div>
		<div class="column span3"></div>
	</div>
</div>

To start a new row simply open up another <div class="row"></div>. This row could be more of a sidebar layout like so:

Your HTML should now look something like this:

<div class="container">
	<div class="row">
		<div class="column span6"></div>
		<div class="column span3"></div>
		<div class="column span3"></div>
	</div>
	<div class="row">
		<div class="column span8"></div>
		<div class="column span4"></div>
	</div>
</div>

Now for something a little more complicated?

Perhaps you just want some extra whitespace to the side of a column? As the grid works left to right, if you want whitespace on the right, just stop adding columns. If you want to add some whitespace to the left then you just simply need to use an offset class like .offset4. Combine that with a .span8 and you'll get a sidebarless sidebar:

The HTML very simply looks like this:

<div class="container">
	<div class="row">
		<div class="column span8 offset4"></div>
	</div>
</div>

Or you could use it to center a narrower column:

What about nested columns?

Every example in blue above is actually a nested row with columns. This main column is a .span12 within a row in turn within a .container, then each example is a new row with its own columns adding up to twelve. An example of this could be: (technically now triple nested)

Clearly the above examples have bumped padding and background colours for demonstration purposes. The natural output is much subtler and shouldn't end up with any weird double padding etc. The HTML for the above example would look like:

<div class="container">
	<div class="row">
		<div class="column span8">
			<div class="row">
				<div class="column span6"></div>
				<div class="column span3"></div>
				<div class="column span3"></div>
			</div>
		</div>
		<div class="column span4">
			<div class="row">
				<div class="column span6"></div>
				<div class="column span6"></div>
			</div>
		</div>
	</div>
</div>

And now's about the time to get responsive

This is where those shortnames from the table above come in. Say I have a narrow sidebar layout such as:

That sidebar is going to start getting very tight when you get to tablet devices but the main column is free flowing text so you could balance it a little better. In this case you'd apply .tblSpan8 and .tblSpan4 to each column respectively, better balancing the columns from that point smaller. That leaves you with the overall HTML looking like so:

Keep reducing the window/viewport until you see a landscape tablet in the lower left. You'll spot this example then looks different to its otherwise identical one above.

---

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.