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="mainwrap">
			<div class="container">
				<section class="projects">
					<h3>Projects</h3>
					<article>1</article>
					<article>2</article>
					<article>3</article>
					<p>To the projects</p>
				</section>
			</div>
		</div>
	</body>
</html>

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

$grids: 9;
$gutters:0.25;
$output: 'isolation';


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

%wrap {
	width: 100%;
}

.mainwrap {
	@extend %wrap;
}

.container {
	 max-width:750px;
	 margin: 0 auto;
}

.projects article {
	background: orange;
	height:5em;
	@include breakpoint(675px) {
		&:nth-child(3n+1) {
			@include isolation-span(3, 1, 'left');
			background: red;
		}
		&:nth-child(3n+2) {
			@include isolation-span(3, 4, 'none');
			background: green;

		}
		&:nth-child(3n+3) {
			@include isolation-span(3, 7, 'right');
			background: blue;

		}
	}
}
h3,
p {
	clear:both;
}
	<!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="mainwrap">
	<div class="container">
	<section class="projects">
	<h3>Projects</h3>
	<article>1</article>
	<article>2</article>
	<article>3</article>
	<p>To the projects</p>
	</section>
	</div>
	</div>
	</body>
	</html>
	@import 'compass';
	@import 'breakpoint';
	@import 'singularitygs';

	$grids: 9;
	$gutters:0.25;
	$output: 'isolation';


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

	%wrap {
	width: 100%;
	}

	.mainwrap {
	@extend %wrap;
	}

	.container {
	max-width:750px;
	margin: 0 auto;
	}

	.projects article {
	background: orange;
	height:5em;
	@include breakpoint(675px) {
	&:nth-child(3n+1) {
	@include isolation-span(3, 1, 'left');
	background: red;
	}
	&:nth-child(3n+2) {
	@include isolation-span(3, 4, 'none');
	background: green;

	}
	&:nth-child(3n+3) {
	@include isolation-span(3, 7, 'right');
	background: blue;

	}
	}
	}
	h3,
	p {
	clear:both;
	}