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 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">.

These two wrappers are very similar; .container has a max-width of 1180px and steps down in widths until it becomes fuild at "Mobile Large" while .fluidContainer has a max width 1920px and is fluid all the way down to "Mobile Small".

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.

.span6
.span3
.span3

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:

.span6
.span3
.span3
.span8
.span4

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:

.span8 .offset4

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:

.span6 .offset3

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)

.span8
.span6
.span3
.span3
.span4
.span6
.span6

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:

.span6
.span3

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:

.span6 & .tblSpan8
.span3 & .tblSpan4

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.


Examples of Standard layouts

.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1

.span6 within .span5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.span6 within .span5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.span12 within .span7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet cursus sit amet dictum. Morbi tempus iaculis urna id volutpat lacus laoreet. Rhoncus mattis rhoncus urna neque. Elit at imperdiet dui accumsan sit amet. Neque vitae tempus quam pellentesque nec. Volutpat odio facilisis mauris sit amet massa. Tempus egestas sed sed risus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sit amet venenatis urna cursus eget. Leo vel fringilla est ullamcorper eget nulla. Sagittis vitae et leo duis ut diam quam nulla. Pellentesque dignissim enim sit amet venenatis. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Accumsan in nisl nisi scelerisque. Aliquam faucibus purus in massa. Diam in arcu cursus euismod quis viverra nibh. Nunc pulvinar sapien et ligula ullamcorper. Mauris nunc congue nisi vitae suscipit tellus mauris. Mattis molestie a iaculis at erat pellentesque adipiscing. Egestas maecenas pharetra convallis posuere. Malesuada fames ac turpis egestas maecenas pharetra convallis.

.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1

.span12 within .span7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet cursus sit amet dictum. Morbi tempus iaculis urna id volutpat lacus laoreet. Rhoncus mattis rhoncus urna neque. Elit at imperdiet dui accumsan sit amet. Neque vitae tempus quam pellentesque nec. Volutpat odio facilisis mauris sit amet massa. Tempus egestas sed sed risus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sit amet venenatis urna cursus eget. Leo vel fringilla est ullamcorper eget nulla. Sagittis vitae et leo duis ut diam quam nulla. Pellentesque dignissim enim sit amet venenatis. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Accumsan in nisl nisi scelerisque. Aliquam faucibus purus in massa. Diam in arcu cursus euismod quis viverra nibh. Nunc pulvinar sapien et ligula ullamcorper. Mauris nunc congue nisi vitae suscipit tellus mauris. Mattis molestie a iaculis at erat pellentesque adipiscing. Egestas maecenas pharetra convallis posuere. Malesuada fames ac turpis egestas maecenas pharetra convallis.

.span6 within .span5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.span6 within .span5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.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

Fluid Container

.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1

.span6 within .span5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.span6 within .span5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.span12 within .span7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet cursus sit amet dictum. Morbi tempus iaculis urna id volutpat lacus laoreet. Rhoncus mattis rhoncus urna neque. Elit at imperdiet dui accumsan sit amet. Neque vitae tempus quam pellentesque nec. Volutpat odio facilisis mauris sit amet massa. Tempus egestas sed sed risus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sit amet venenatis urna cursus eget. Leo vel fringilla est ullamcorper eget nulla. Sagittis vitae et leo duis ut diam quam nulla. Pellentesque dignissim enim sit amet venenatis. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Accumsan in nisl nisi scelerisque. Aliquam faucibus purus in massa. Diam in arcu cursus euismod quis viverra nibh. Nunc pulvinar sapien et ligula ullamcorper. Mauris nunc congue nisi vitae suscipit tellus mauris. Mattis molestie a iaculis at erat pellentesque adipiscing. Egestas maecenas pharetra convallis posuere. Malesuada fames ac turpis egestas maecenas pharetra convallis.

.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

50% split left column




50% split left column




Twitter Instagram YouTube LinkedIn Facebook Google + WhatsApp Link Email icnUpArrow Right Arrow Down Arrow Left Arrow Search Map Pin Shopping Bag

This website uses cookies

This website uses basic cookies to ensure you get the best experience. For further details, please read our Privacy Policy

I understand