Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

/*!
 * Manhattan - A clean, lightweight and customisable CSS grid.
 * Version: Development 1.0 alpha
 * Url: http://www.adchsm.me/manhattan/
 * Author: Adam Charles Smith
 * Author url: http://www.adchsm.me/
 * License: MIT
 * License url: http://www.adchsm.me/manhattan/license.txt
 */

// ---------------
// Manhattan Index
// 001 - Variables
// 002 - Setup
// 003 - Containers
// 004 - Row
// 005 - Columns
// 006 - Clears

// ---------------
// 001 - Variables

$gutter: 15px;
$container-width: 1200px;
$break-point-sm: 600px;
$break-point-md: 900px;
$break-point-lg: 1200px;
$break-point-xl: 1500px;

// -----------
// 002 - Setup

html, body, [mhtn] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

// ----------------
// 003 - Containers

[mhtn*=container] {
	margin-left: auto;
	margin-right: auto;
	max-width: $container-width;
	padding-left: $gutter;
	padding-right: $gutter;
	
	// The flex container is full width with padding
	&[mhtn*=flex] {
		max-width: none;
	}
	
	// The edge container is full width without padding
	&[mhtn*=edge] {
		max-width: none;
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
	}
}

// ----------
// 004 - Rows

[mhtn*=row] {
	margin-left: -$gutter;
	margin-right: -$gutter;
	
	// Clear
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	
	&:after {
		clear: both;
	}
}

// -------------
// 005 - Columns

[mhtn*=col] {
	padding-left: $gutter;
	padding-right: $gutter;
	float: left;
}

// Change float direction for rtl languages, add dir="rtl" to your html element
html[dir=rtl] [mhtn*=col] {
	float: right;
}

// Extra small screens
	[mhtn*=xs-10] {
		width: 10%;
	}
	
	[mhtn*=xs-20] {
		width: 20%;
	}
	
	[mhtn*=xs-30] {
		width: 30%;
	}
	
	[mhtn*=xs-40] {
		width: 40%;
	}
	
	[mhtn*=xs-50] {
		width: 50%;
	}
	
	[mhtn*=xs-60] {
		width: 60%;
	}
	
	[mhtn*=xs-70] {
		width: 70%;
	}
	
	[mhtn*=xs-80] {
		width: 80%;
	}
	
	[mhtn*=xs-90] {
		width: 90%;
	}
	
	[mhtn*=xs-100] {
		width: 100%;
	}
	
	[mhtn*=xs-33] {
		width: 33.33%;
	}
	
	[mhtn*=xs-66] {
		width: 66.67%;
	}
	
	[mhtn*=xs-25] {
		width: 25%;
	}
	
	[mhtn*=xs-75] {
		width: 75%;
	}

// Small screens
@media ( min-width: $break-point-sm ) {
	[mhtn*=sm-10] {
		width: 10%;
	}
	
	[mhtn*=sm-20] {
		width: 20%;
	}
	
	[mhtn*=sm-30] {
		width: 30%;
	}
	
	[mhtn*=sm-40] {
		width: 40%;
	}
	
	[mhtn*=sm-50] {
		width: 50%;
	}
	
	[mhtn*=sm-60] {
		width: 60%;
	}
	
	[mhtn*=sm-70] {
		width: 70%;
	}
	
	[mhtn*=sm-80] {
		width: 80%;
	}
	
	[mhtn*=sm-90] {
		width: 90%;
	}
	
	[mhtn*=sm-100] {
		width: 100%;
	}
	
	[mhtn*=sm-33] {
		width: 33.33%;
	}
	
	[mhtn*=sm-66] {
		width: 66.67%;
	}
	
	[mhtn*=sm-25] {
		width: 25%;
	}
	
	[mhtn*=sm-75] {
		width: 75%;
	}
}

// Medium screens
@media ( min-width: $break-point-md ) {
	[mhtn*=md-10] {
		width: 10%;
	}
	
	[mhtn*=md-20] {
		width: 20%;
	}
	
	[mhtn*=md-30] {
		width: 30%;
	}
	
	[mhtn*=md-40] {
		width: 40%;
	}
	
	[mhtn*=md-50] {
		width: 50%;
	}
	
	[mhtn*=md-60] {
		width: 60%;
	}
	
	[mhtn*=md-70] {
		width: 70%;
	}
	
	[mhtn*=md-80] {
		width: 80%;
	}
	
	[mhtn*=md-90] {
		width: 90%;
	}
	
	[mhtn*=md-100] {
		width: 100%;
	}
	
	[mhtn*=md-33] {
		width: 33.33%;
	}
	
	[mhtn*=md-66] {
		width: 66.67%;
	}
	
	[mhtn*=md-25] {
		width: 25%;
	}
	
	[mhtn*=md-75] {
		width: 75%;
	}
}

// Large screens
@media ( min-width: $break-point-lg ) {
	[mhtn*=lg-10] {
		width: 10%;
	}
	
	[mhtn*=lg-20] {
		width: 20%;
	}
	
	[mhtn*=lg-30] {
		width: 30%;
	}
	
	[mhtn*=lg-40] {
		width: 40%;
	}
	
	[mhtn*=lg-50] {
		width: 50%;
	}
	
	[mhtn*=lg-60] {
		width: 60%;
	}
	
	[mhtn*=lg-70] {
		width: 70%;
	}
	
	[mhtn*=lg-80] {
		width: 80%;
	}
	
	[mhtn*=lg-90] {
		width: 90%;
	}
	
	[mhtn*=lg-100] {
		width: 100%;
	}
	
	[mhtn*=lg-33] {
		width: 33.33%;
	}
	
	[mhtn*=lg-66] {
		width: 66.67%;
	}
	
	[mhtn*=lg-25] {
		width: 25%;
	}
	
	[mhtn*=lg-75] {
		width: 75%;
	}
}

// Extra large screens
@media ( min-width: $break-point-xl ) {
	[mhtn*=xl-10] {
		width: 10%;
	}
	
	[mhtn*=xl-20] {
		width: 20%;
	}
	
	[mhtn*=xl-30] {
		width: 30%;
	}
	
	[mhtn*=xl-40] {
		width: 40%;
	}
	
	[mhtn*=xl-50] {
		width: 50%;
	}
	
	[mhtn*=xl-60] {
		width: 60%;
	}
	
	[mhtn*=xl-70] {
		width: 70%;
	}
	
	[mhtn*=xl-80] {
		width: 80%;
	}
	
	[mhtn*=xl-90] {
		width: 90%;
	}
	
	[mhtn*=xl-100] {
		width: 100%;
	}
	
	[mhtn*=xl-33] {
		width: 33.33%;
	}
	
	[mhtn*=xl-66] {
		width: 66.67%;
	}
	
	[mhtn*=xl-25] {
		width: 25%;
	}
	
	[mhtn*=xl-75] {
		width: 75%;
	}
}

// ------------
// 006 - Clears

[mhtn*=clear] {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	
	// Extra small screens
	&[mhtn*=xs] {
		@media ( max-width: ( $break-point-sm - 1 ) ) {
			&:after {
				clear: both;
			}
		}
	}
	
	// Small screens
	&[mhtn*=sm] {
		@media ( min-width: $break-point-sm ) and ( max-width: ( $break-point-md - 1 ) ) {
			&:after {
				clear: both;
			}
		}
	}
	
	// Medium screens
	&[mhtn*=md] {
		@media ( min-width: $break-point-md ) and ( max-width: ( $break-point-lg - 1 ) ) {	
			&:after {
				clear: both;
			}
		}
	}
	
	// Large screens
	&[mhtn*=lg] {
		@media ( min-width: $break-point-lg ) and ( max-width: ( $break-point-xl - 1 ) ) {
			&:after {
				clear: both;
			}
		}
	}
	
	// Extra large screens
	&[mhtn*=xl] {
		@media ( min-width: $break-point-xl ) {
			&:after {
				clear: both;
			}
		}
	}
}

SassMeister-output.css

/*!
 * Manhattan - A clean, lightweight and customisable CSS grid.
 * Version: Development 1.0 alpha
 * Url: http://www.adchsm.me/manhattan/
 * Author: Adam Charles Smith
 * Author url: http://www.adchsm.me/
 * License: MIT
 * License url: http://www.adchsm.me/manhattan/license.txt
 */
html, body, [mhtn] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[mhtn*=container] {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}
[mhtn*=container][mhtn*=flex] {
  max-width: none;
}
[mhtn*=container][mhtn*=edge] {
  max-width: none;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}

[mhtn*=row] {
  margin-left: -15px;
  margin-right: -15px;
}
[mhtn*=row]:before, [mhtn*=row]:after {
  content: " ";
  display: table;
}
[mhtn*=row]:after {
  clear: both;
}

[mhtn*=col] {
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}

html[dir=rtl] [mhtn*=col] {
  float: right;
}

[mhtn*=xs-10] {
  width: 10%;
}

[mhtn*=xs-20] {
  width: 20%;
}

[mhtn*=xs-30] {
  width: 30%;
}

[mhtn*=xs-40] {
  width: 40%;
}

[mhtn*=xs-50] {
  width: 50%;
}

[mhtn*=xs-60] {
  width: 60%;
}

[mhtn*=xs-70] {
  width: 70%;
}

[mhtn*=xs-80] {
  width: 80%;
}

[mhtn*=xs-90] {
  width: 90%;
}

[mhtn*=xs-100] {
  width: 100%;
}

[mhtn*=xs-33] {
  width: 33.33%;
}

[mhtn*=xs-66] {
  width: 66.67%;
}

[mhtn*=xs-25] {
  width: 25%;
}

[mhtn*=xs-75] {
  width: 75%;
}

@media (min-width: 600px) {
  [mhtn*=sm-10] {
    width: 10%;
  }

  [mhtn*=sm-20] {
    width: 20%;
  }

  [mhtn*=sm-30] {
    width: 30%;
  }

  [mhtn*=sm-40] {
    width: 40%;
  }

  [mhtn*=sm-50] {
    width: 50%;
  }

  [mhtn*=sm-60] {
    width: 60%;
  }

  [mhtn*=sm-70] {
    width: 70%;
  }

  [mhtn*=sm-80] {
    width: 80%;
  }

  [mhtn*=sm-90] {
    width: 90%;
  }

  [mhtn*=sm-100] {
    width: 100%;
  }

  [mhtn*=sm-33] {
    width: 33.33%;
  }

  [mhtn*=sm-66] {
    width: 66.67%;
  }

  [mhtn*=sm-25] {
    width: 25%;
  }

  [mhtn*=sm-75] {
    width: 75%;
  }
}
@media (min-width: 900px) {
  [mhtn*=md-10] {
    width: 10%;
  }

  [mhtn*=md-20] {
    width: 20%;
  }

  [mhtn*=md-30] {
    width: 30%;
  }

  [mhtn*=md-40] {
    width: 40%;
  }

  [mhtn*=md-50] {
    width: 50%;
  }

  [mhtn*=md-60] {
    width: 60%;
  }

  [mhtn*=md-70] {
    width: 70%;
  }

  [mhtn*=md-80] {
    width: 80%;
  }

  [mhtn*=md-90] {
    width: 90%;
  }

  [mhtn*=md-100] {
    width: 100%;
  }

  [mhtn*=md-33] {
    width: 33.33%;
  }

  [mhtn*=md-66] {
    width: 66.67%;
  }

  [mhtn*=md-25] {
    width: 25%;
  }

  [mhtn*=md-75] {
    width: 75%;
  }
}
@media (min-width: 1200px) {
  [mhtn*=lg-10] {
    width: 10%;
  }

  [mhtn*=lg-20] {
    width: 20%;
  }

  [mhtn*=lg-30] {
    width: 30%;
  }

  [mhtn*=lg-40] {
    width: 40%;
  }

  [mhtn*=lg-50] {
    width: 50%;
  }

  [mhtn*=lg-60] {
    width: 60%;
  }

  [mhtn*=lg-70] {
    width: 70%;
  }

  [mhtn*=lg-80] {
    width: 80%;
  }

  [mhtn*=lg-90] {
    width: 90%;
  }

  [mhtn*=lg-100] {
    width: 100%;
  }

  [mhtn*=lg-33] {
    width: 33.33%;
  }

  [mhtn*=lg-66] {
    width: 66.67%;
  }

  [mhtn*=lg-25] {
    width: 25%;
  }

  [mhtn*=lg-75] {
    width: 75%;
  }
}
@media (min-width: 1500px) {
  [mhtn*=xl-10] {
    width: 10%;
  }

  [mhtn*=xl-20] {
    width: 20%;
  }

  [mhtn*=xl-30] {
    width: 30%;
  }

  [mhtn*=xl-40] {
    width: 40%;
  }

  [mhtn*=xl-50] {
    width: 50%;
  }

  [mhtn*=xl-60] {
    width: 60%;
  }

  [mhtn*=xl-70] {
    width: 70%;
  }

  [mhtn*=xl-80] {
    width: 80%;
  }

  [mhtn*=xl-90] {
    width: 90%;
  }

  [mhtn*=xl-100] {
    width: 100%;
  }

  [mhtn*=xl-33] {
    width: 33.33%;
  }

  [mhtn*=xl-66] {
    width: 66.67%;
  }

  [mhtn*=xl-25] {
    width: 25%;
  }

  [mhtn*=xl-75] {
    width: 75%;
  }
}
[mhtn*=clear]:before, [mhtn*=clear]:after {
  content: " ";
  display: table;
}
@media (max-width: 599px) {
  [mhtn*=clear][mhtn*=xs]:after {
    clear: both;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  [mhtn*=clear][mhtn*=sm]:after {
    clear: both;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  [mhtn*=clear][mhtn*=md]:after {
    clear: both;
  }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  [mhtn*=clear][mhtn*=lg]:after {
    clear: both;
  }
}
@media (min-width: 1500px) {
  [mhtn*=clear][mhtn*=xl]:after {
    clear: both;
  }
}