rpkoller/index.html

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>test</title> <!-- 70chars max -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="container">
			<div class="thecontent">
				<h2>One Headline</h2>
				<p>My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Worf, It's better than music. It's jazz. Shields up! Rrrrred alert! We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. The Federation's gone; the Borg is everywhere! Now we know what they mean by 'advanced' tactical training. Mr. Crusher, ready a collision course with the Borg ship. The unexpected is our normal routine. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. and attack the Romulans. This should be interesting.</p>
				<h2>Another Headline</h2>
				<p>They were just sucked into space. Mr. Worf, you sound like a man who's asking his friend if he can start dating his sister. Besides, you look good in a dress.</p>
			</div>
			<div class="theimages">
			  	<ul class="cleanimg">
			  		<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
		  			<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
		  			<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
		  			<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
		  			<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
		  			<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
				</ul>
				<p>image: www.freeimages.co.uk</p>
			</div>
		</div>
	</body>
</html>

## style.scss
@import 'compass';
@import 'toolkit';
@import 'breakpoint';
@import 'singularitygs';

$grids: 6;
$grids: add-grid(18 at 850px);
$gutters:0.25;
$output: 'float';

body,
html {
	height:100%;
	padding:0;
	margin:0;
}

.container {
	 width:100%;
	 max-width:920px;
	 margin: 0 auto;
}

.cleanimg {
	margin:0;
	padding:0;
	li {
		list-style:none;
	}
}


.thecontent {
		@include breakpoint(850px) {
			@include grid-span(6, 13);//, $output-style: 'isolation');
		}
}

.theimages {
		@include breakpoint(850px) {
			@include grid-span(12, 1);//, $output-style: 'isolation');
		}

}
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>test</title> <!-- 70chars max -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
	<div class="container">
	<div class="thecontent">
	<h2>One Headline</h2>
	<p>My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Worf, It's better than music. It's jazz. Shields up! Rrrrred alert! We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. The Federation's gone; the Borg is everywhere! Now we know what they mean by 'advanced' tactical training. Mr. Crusher, ready a collision course with the Borg ship. The unexpected is our normal routine. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. and attack the Romulans. This should be interesting.</p>
	<h2>Another Headline</h2>
	<p>They were just sucked into space. Mr. Worf, you sound like a man who's asking his friend if he can start dating his sister. Besides, you look good in a dress.</p>
	</div>
	<div class="theimages">
	<ul class="cleanimg">
	<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
	<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
	<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
	<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
	<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
	<li><img src="https://dl.dropboxusercontent.com/u/8578/imagegal.jpg"></li>
	</ul>
	<p>image: www.freeimages.co.uk</p>
	</div>
	</div>
	</body>
	</html>
	@import 'compass';
	@import 'toolkit';
	@import 'breakpoint';
	@import 'singularitygs';

	$grids: 6;
	$grids: add-grid(18 at 850px);
	$gutters:0.25;
	$output: 'float';

	body,
	html {
	height:100%;
	padding:0;
	margin:0;
	}

	.container {
	width:100%;
	max-width:920px;
	margin: 0 auto;
	}

	.cleanimg {
	margin:0;
	padding:0;
	li {
	list-style:none;
	}
	}


	.thecontent {
	@include breakpoint(850px) {
	@include grid-span(6, 13);//, $output-style: 'isolation');
	}
	}

	.theimages {
	@include breakpoint(850px) {
	@include grid-span(12, 1);//, $output-style: 'isolation');
	}

	}