SASS Port

.gitignore

@@ -0,0 +1 @@
+.DS_Store

README.md

@@ -1,5 +1,5 @@
 #About
-The Semantic Grid System is a modern approach to the CSS grid. It allows you to set column and gutter widths, choose the number of columns, and switch between pixels and percentages, and achieve responsive layouts, all without any ugly .grid_x classes in your markup. It is powered by [LESS.js](http://lesscss.org/).
+The Semantic Grid System is a modern approach to the CSS grid. It allows you to set column and gutter widths, choose the number of columns, and switch between pixels and percentages, and achieve responsive layouts, all without any ugly .grid_x classes in your markup. It is powered by [LESS.js](http://lesscss.org/) or [SASS](http://sass-lang.com/).
 
 It lives on the web at [Semantic.gs](http://semantic.gs/).
 
@@ -10,4 +10,7 @@ If you spot any issues or have ideas for improvement, feel free to [file a ticke
 Licensed under Apache 2.0. See [LICENSE](https://github.com/twigkit/semantic.gs/blob/master/LICENSE.txt)
 
 #Created by
-The Semantic Grid System was built by [Tyler Tate](http://twitter.com/tylertate/) at [TwigKit](http://twigkit.com/).
+The Semantic Grid System was built by [Tyler Tate](http://twitter.com/tylertate/) at [TwigKit](http://twigkit.com/).
+
+#Ported to SASS by
+The initial SASS port was made by [Bobby Marko](http://bobby-marko.com/) with corrections and additions from [Hugues Lismonde](http://twitter.com/hlidotbe/)

sass/css/demo.scss

@@ -0,0 +1,30 @@
+header#top {
+	background-color: black;
+}
+h1 {
+	font-family: Georgia;
+	font-size: 2em;
+	padding: 1em;
+	color: white;
+
+	a {
+		color: white;
+		text-decoration: none;
+	}
+}
+h2 {
+	font-family: Georgia;
+	font-size: 1.5em;
+	padding: 5.25em 0;
+	color: #666;
+	background-color: #ccc;
+	text-align: center;
+}
+ul#boxes li {
+	font-family: Georgia;
+	font-size: 1.33em;
+	padding: 2.5em 0;
+	color: #999;
+	background-color: #e5e5e5;
+	text-align: center;
+}

sass/css/grid.scss

@@ -0,0 +1,38 @@
+// Defaults which you can freely override
+$column-width: 60px;
+$gutter-width: 20px;
+$columns: 12;
+
+// Set $total-width to 100% for a fluid layout
+$total-width: ($column-width*$columns) + ($gutter-width*$columns);
+
+
+//////////
+// GRID //
+//////////
+
+body {
+	width: 100%;
+	float: left;
+}
+
+@mixin row($columns:$columns) {
+  // Utility variable — you should never need to modify this
+  $_gridsystem-width: ($column-width*$columns) + ($gutter-width*$columns);
+
+	display: inline-block;
+	overflow: hidden;
+	width: $total-width * ( ( $gutter-width + $_gridsystem-width) / $_gridsystem-width );
+	margin: 0 $total-width*((($gutter-width*.5)/$_gridsystem-width)*-1);
+}
+
+@mixin column($x,$columns:$columns) {
+  // Utility variable — you should never need to modify this
+  $_gridsystem-width: ($column-width*$columns) + ($gutter-width*$columns);
+
+	display: inline;
+	float: left;
+	overflow: hidden;
+	width: $total-width * ( ( ( ( $gutter-width + $column-width ) * $x ) - $gutter-width ) / $_gridsystem-width );
+	margin: 0 $total-width*(($gutter-width*.5)/$_gridsystem-width);
+}

sass/css/reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

sass/examples/fixed/fixed.css

@@ -0,0 +1,105 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+body {
+  width: 100%;
+  float: left; }
+
+header#top {
+  background-color: black; }
+
+h1 {
+  font-family: Georgia;
+  font-size: 2em;
+  padding: 1em;
+  color: white; }
+  h1 a {
+    color: white;
+    text-decoration: none; }
+
+h2 {
+  font-family: Georgia;
+  font-size: 1.5em;
+  padding: 5.25em 0;
+  color: #666;
+  background-color: #ccc;
+  text-align: center; }
+
+ul#boxes li {
+  font-family: Georgia;
+  font-size: 1.33em;
+  padding: 2.5em 0;
+  color: #999;
+  background-color: #e5e5e5;
+  text-align: center; }
+
+div.center {
+  width: 960px;
+  margin: 0 auto;
+  overflow: hidden; }
+
+header#top {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 940px;
+  margin: 0 10px;
+  margin-bottom: 1em; }
+
+#maincolumn {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 700px;
+  margin: 0 10px; }
+
+#sidebar {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  width: 220px;
+  margin: 0 10px; }

sass/examples/fixed/fixed.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+	<title>The Semantic Grid System | Fixed-width Example</title>
+
+    <!-- Stylesheets -->
+	<link rel="stylesheet" href="fixed.css" type="text/less" media="screen" />
+
+    <!-- Scripts -->
+	<!--[if lt IE 9]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+</head>
+<body>
+
+	<div class="center">
+
+		<!-- Header -->
+		<header id="top">
+			<h1><a href="http://semantic.gs/">The Semantic Grid System</a></h1>
+		</header>
+
+		<!-- Main Body -->	
+		<article id="maincolumn">
+			<h2>Main</h2>
+		</article>
+		<section id="sidebar">
+			<h2>Sidebar</h2>
+		</section>
+
+	</div>
+
+</body>
+</html>

sass/examples/fixed/fixed.scss

@@ -0,0 +1,42 @@
+@import '../../css/reset';
+@import '../../css/grid';
+@import '../../css/demo';
+
+
+//////////
+// GRID //
+//////////
+
+// Specify the number of columns and set column and gutter widths
+$columns: 12;
+$column-width: 60px;
+$gutter-width: 20px;
+
+// Uncomment the definition below for a percentage-based layout
+// @total-width: 100%;
+
+
+////////////
+// LAYOUT //
+////////////
+
+// center the contents
+div.center {
+	width: 960px;
+	margin: 0 auto;
+	overflow: hidden;
+}
+
+// header
+header#top {
+	@include column(12);
+	margin-bottom: 1em;
+}
+
+// main and sidebar
+#maincolumn {
+	@include column(9);
+}
+#sidebar {
+	@include column(3);
+}