Add grunt, add em-calc() SASS function, add some template classes

.gitignore

 *.sublime*
 .sass-cache
+node_modules/
\ No newline at end of file

Gruntfile.js

+module.exports = function(grunt) {
+	// Project configuration.
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+
+		jshint: {
+			files: ['Gruntfile.js', 'js/**/*.js'],
+			options: {
+				ignores: ['js/core.js', 'js/yui-min.js']
+			}
+		},
+		sass: {
+			dist: {
+				options: {
+					style: 'compressed'
+				},
+				files: {
+					'css/style.min.css': 'sass/style.scss'
+				}
+			},
+			check: {
+				options: {
+					check: true
+				},
+				files: {
+					'css/style.css': 'sass/style.scss'
+				}
+			},
+			dev: {
+				options: {
+					style: 'expanded',
+					// trace: true,
+					lineNumbers: true
+				},
+				files: {
+					'css/style.css': 'sass/style.scss'
+				}
+			}
+		},
+		watch: {
+			js: {
+				files: ['Gruntfile.js','js/**/*.js'],
+				tasks: ['jshint'],
+				options: {
+					atBegin: true
+				}
+			},
+			css: {
+				files: 'sass/**/*.scss',
+				tasks: ['sass:dev'],
+				options: {
+					atBegin: true
+				}
+			}
+		}
+	});
+
+	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-contrib-sass');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+
+	grunt.registerTask('default', ['watch']);
+	grunt.registerTask('dist', ['jshint', 'sass:dist']);
+	grunt.registerTask('check', ['jshint', 'sass:check']);
+};
\ No newline at end of file

package.json

+{
+  "name": "valencia",
+  "version": "0.1.0",
+  "description": "A theme for Drupal 7 developed by the Ubuntu Italy community.",
+  "scripts": {
+    "test": "check"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@code.ubuntu-it.org:ubuntu-it-web/valencia.git"
+  },
+  "author": "ubuntu-it-web",
+  "license": "GPLv2",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-jshint": "^0.10.0",
+    "grunt-contrib-sass": "^0.8.1",
+    "grunt-contrib-watch": "^0.6.1"
+  }
+}

sass/_classes.scss

+//--------------------------------------------------
+// Formatting classes
+//--------------------------------------------------
+
+.page-description {
+	background: none repeat scroll 0 0 $light-grey;
+	border: 1px solid $warm-grey;
+	padding: em-calc(10 10 12);
+	@include rounded-corners;
+	@include font-size;
+	line-height: em-calc(22);
+}
+
+.middleinfo {
+	padding: em-calc(8);
+	margin-bottom: em-calc(6);
+	@include rounded-corners;
+
+	&.gray {
+		background: $warm-grey;
+		border: 1px solid $light-grey;
+	}
+}
\ No newline at end of file

sass/_constants.scss

+//--------------------------------------------------
+// Valencia SASS Constants
+//--------------------------------------------------
+
+// Base font-size for the base em value.
+$em-base: 16 !default;
\ No newline at end of file

sass/_functions.scss

+//--------------------------------------------------
+// Custom SASS functions
+//--------------------------------------------------
+
+// Strip unit.
+@function strip-unit( $num ) {
+	@return $num / ($num * 0 + 1);
+}
+
+// Convert to em.
+@function convert-to-em( $value ) {
+	$value: strip-unit( $value ) / strip-unit( $em-base ) * 1em;
+	@if ( $value == 0em ) {
+		$value: 0; // Turn 0em to 0
+	}
+	@return $value;
+}
+
+//--------------------------------------------------
+// EM CALC
+// 
+// Call it with 1, 2, 3, or 4 parameters.
+// 'px' is not required but supported:
+// 
+//   em-calc(10 20 30px 40);
+// 
+// Space delimited, if you want to delimit using commas,
+// wrap it in another pair of brackets.
+// 
+//   em-calc((10, 20, 30, 40px));
+// 
+//--------------------------------------------------
+
+@function em-calc($values) {
+	$max: length($values);
+
+	@if $max == 1 {
+		@return convert-to-em( nth( $values, 1 ) );
+	}
+
+	$em-values: ();
+	@for $i from 1 through $max {
+		$em-values: append( $em-values, convert-to-em( nth( $values, $i ) ) );
+	}
+	@return $em-values;
+}
\ No newline at end of file

sass/style.scss

 @import 'core/ubuntu-styles';
-@import 'mixins.scss';
-@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);
+@import 'constants';
+@import 'functions';
+@import 'mixins';
+@import 'classes';
+// If a website uses HTTPS, using HTTP here is a great security hole. Use HTTPS!
+@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);
 
 // Override default text selection color
 ::selection {
-	background:lighten($ubuntu_orange, 10%);
+	background:lighten($ubuntu-orange, 10%);
 }
 a {
 	&::selection,
 	& *::selection {
-		background:$light_aubergine;
+		background:$warm-grey;
 	}
 }
 
@@ -49,28 +53,28 @@ header.banner {
         }
 
 	&.inverted {
-		background: $light_grey;
+		background: $light-grey;
 		margin-bottom:20px;
 		margin-top:-4px; // Ugly fix for gap between navbar
 
 		.nav-primary {
 			ul {
-                                border-color:lighten($light_grey, 10%);
+                                border-color:lighten($light-grey, 10%);
                                 margin-top:1px;
 
 				li {
 					&, &:last-child {
-						border-color:darken($light_grey, 5%);
+						border-color:darken($light-grey, 5%);
 					}
 					a {
 						&:link,
 						&:visited {
-							border-color:lighten($light_grey, 7%);
-							color:darken($warm_grey, 10%);
+							border-color:lighten($light-grey, 7%);
+							color:darken($warm-grey, 10%);
 						}
 						&:hover {
-							background:darken($light_grey, 5%);
-							color:lighten($cool_grey, 7%);
+							background:darken($light-grey, 5%);
+							color:lighten($cool-grey, 7%);
 						}
 					}
 				}
@@ -78,8 +82,8 @@ header.banner {
 			a {
 				&.active,
 				&:active {
-					border-color:darken($light_grey, 5%);
-					background:darken($light_grey, 5%);
+					border-color:darken($light-grey, 5%);
+					background:darken($light-grey, 5%);
 				}
 			}
 		}
@@ -91,18 +95,18 @@ header.banner {
 			float:right;
 
 			input[type="search"] {
-				@include box_sizing(border-box);
+				@include box-sizing(border-box);
 				-webkit-appearance:none;
 				float:left;
 				display:block;
-				@include font_size(16);
+				@include font-size(16);
 				height:2.1em;
-				@include rounded_corners(4px);
+				@include rounded-corners(4px);
 				width:100%;
 				border:none;
 				margin-bottom:0;
 				background-color: rgba(0, 0, 0, 0);
-				@include box_shadow(inset 0 1px 4px rgba(0,0,0,.2));
+				@include box-shadow(inset 0 1px 4px rgba(0,0,0,.2));
 				@include transition(); // Use defaults
 				padding:.5em 2.5em .5em .5em;
 				color:#555;
@@ -128,7 +132,7 @@ header.banner {
 	.site-name {
 		float:right;
 		.logo-ubuntuit {
-			@include font_size(36);
+			@include font-size(36);
 			margin-bottom:0;
 			position:relative;
 			text-transform:lowercase;