Added a new functions file with some basic functions to start

Fixed a bug on desktop nested columns

Gulpfile.js

@@ -2,23 +2,19 @@ var gulp = require('gulp'),
     sourcemaps = require('gulp-sourcemaps'),
     sass = require('gulp-sass'),
     minify = require('gulp-minify-css'),
-    concat = require('gulp-concat'),
-    uglify = require('gulp-uglify'),
     watch = require('gulp-watch');
 
 // Modify these variables according to your project
 var config = {
     scssDir: './scss',
-    jsDir: './js',
     cssDir: './css'
 };
 
-gulp.task('default', ['style', 'js']);
+gulp.task('default', ['style']);
 
 // Compile Sass files
 gulp.task('style', function() {
     gulp.src(config.scssDir + '/*.scss')
-    .pipe(sourcemaps.init())
     .pipe(sass())
     .pipe(minify())
     .pipe(gulp.dest(config.cssDir));
@@ -32,43 +28,15 @@ gulp.task('style-dev', function() {
 });
 
 
-// Concatenate JS files
-gulp.task('js', function() {
-    return gulp.src(config.jsDir + '/src/*.js')
-    .pipe(concat('scripts.js'))
-    .pipe(gulp.dest(config.jsDir));
-});
-
-
-// Compress JS file
-gulp.task('compress', function() {
-    return gulp.src(config.jsDir + '/scripts.js')
-    .pipe(uglify())
-    .pipe(gulp.dest(config.jsDir + '/min'));
-});
-gulp.task('compress-dev', function() {
-    return gulp.src(config.jsDir + '/scripts.js')
-    .pipe(gulp.dest(config.jsDir + '/min'));
-});
 
 // Production
 gulp.task('build', function() {
     gulp.start('style');
-    gulp.start('compress');
 });
 
 // Watch for changes
 gulp.task('watch', function() {
-    watch(config.scssDir + '/**/*.scss', function () {
+    watch(config.scssDir + '/**/*.scss', function() {
         gulp.start('style-dev');
     });
-
-    watch(config.jsDir + '/src/*.js', function () {
-        gulp.start('js');
-    });
-
-    watch(config.jsDir + '/scripts.js', function () {
-        gulp.start('compress-dev');
-    });
-
 });

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hoisin.scss",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "description": "A simple responsive mini framework to kick start your project.",
   "main": ["scss/styles.scss", "scss/responsive.scss"],
   "keywords": [

index.html

@@ -263,6 +263,82 @@ <h3>Inverted order columns</h3>
 			</div>
 		</div>
 	</section>
+
+	<section>
+		<div class="container">
+			<div class="col8">
+				<h3>Color Functions</h3>
+				<p>Color functions to handle simple color changes like darken and lighten, but with more granular control that native darken and lighten functions.</p>
+			</div>
+		</div>
+
+		<div class="container">
+			<div class="col8">
+				<div class="box code">
+					<p class="red">Red <code>p.red</code></p>
+					<p>&nbsp;</p>
+					<pre>
+.red-light {
+  color: dark($red, 50%);
+}
+					</pre>
+					<p class="red-dark">Red <code>p.red-dark</code></p>
+					<p>&nbsp;</p>
+					<pre>
+.red-light {
+  color: light($red, 70%);
+}
+					</pre>
+					<p class="red-light">Lighter red <code>p.red-light</code></p>
+				</div>
+			</div>
+		</div>
+
+		<div class="container">
+			<div class="col8">
+				<h3>Layout Functions</h3>
+				<p>Semantic layout is easier now, by using the layout functions as grid values, no need to add class names.</p>
+			</div>
+		</div>
+		<div class="container">
+			<div class="content">
+				<div class="box code">
+					<p>Main content</p>
+					<p>&nbsp;</p>
+					<pre>
+@media (min-width: $bp-l) {
+  .content {
+    width: span(8);
+    float: left;
+    margin: 0 ($gutter / 2);
+  }
+}
+@media (min-width: $bp-xl) {
+  .content {
+    width: span-xl(8);
+    margin: 0 ($xl-gutter / 2);
+}
+@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {
+  .box {
+    margin-bottom: 10px;
+  }
+  .content {
+    width: span-fw(m-2_3);
+    float: left;
+    padding: 0 ($gutter / 4);
+    @include box-sizing;
+  }
+}
+					</pre>
+				</div>
+			</div>
+			<div class="sidebar">
+				<div class="box code">
+					<p>Sidebar</p>
+				</div>
+			</div>
+		</div>
+	</section>
 
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "hoisin.scss",
   "title": "Hoisin.scss",
   "description": "A simple responsive mini framework to kick start your project.",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "homepage": "https://github.com/Cyber-Duck/hoisin.scss",
   "license": "ISC",
   "author": {
@@ -30,21 +30,12 @@
     }
   ],
   "main": "Gulpfile.js",
-  "dependencies": {
-    "clone": "^1.0.2",
-    "clone-stats": "0.0.1",
-    "gulp-install": "^0.6.0",
-    "inherits": "^2.0.1",
-    "lodash": "^3.9.3",
-    "readable-stream": "^2.0.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "gulp": "^3.9.0",
     "gulp-bower": "0.0.10",
-    "gulp-concat": "^2.5.2",
     "gulp-sass": "^2.0.4",
     "gulp-sourcemaps": "^1.5.2",
-    "gulp-uglify": "^1.2.0",
     "gulp-minify-css": "1.2.1",
     "gulp-watch": "^4.2.0"
   },

scss/_functions.scss

@@ -0,0 +1,95 @@
+// *
+// * Hoisin.scss
+// * Functions library
+// *
+// *
+
+
+
+// * Darken colors
+// * 
+// * This function uses mix to have a more granular control of the darkening.
+// * @param $color ($variable | #HEX);
+// * @param $value (percentage);
+// *
+// * dark($blue, 20%);
+// *
+@function dark($color, $value: 10%) {
+    @return mix(black, $color, $value);
+}
+
+
+
+// * Lighten colors
+// * 
+// * This function uses mix to have a more granular control of the darkening.
+// * @param $color ($variable | #HEX);
+// * @param $value (percentage);
+// *
+// * light($blue, 20%);
+// *
+@function light($color, $value: 10%) {
+    @return mix(white, $color, $value);
+}
+
+
+
+
+// * Flexible Span 
+// * 
+// * This function generates a width value based on the parameter given, using 
+// * details from the medium size grid.
+// *
+// * @param $width ($width);
+// *
+// * span-fw("m-2_3");
+// *
+@function span-fw($width) {
+    @if $width == "m-2_3" {
+        @return 66.66%;
+    }
+    @else if $width == "m-half" {
+        @return 50%;
+    }
+    @else if $width == "m-1_3" {
+        @return 33.33%;
+    }
+    @else if $width == "m-4_4" {
+        @return 25%;
+    }
+    @else {
+        @return 100%;
+    }
+}
+
+
+
+
+
+// * Span
+// * 
+// * This function generates a width value based on the parameter given, using 
+// * details from the $gutter and $col global variables.
+// *
+// * @param $cols ($cols);
+// *
+// * span(8);
+// *
+@function span($cols: 12) {
+    @return ($cols * $col-width) + (($cols - 1) * $gutter);
+}
+
+
+
+// * Span XL
+// * 
+// * This function generates a width value based on the parameter given, using 
+// * details from the $xl-gutter and $xl-col global variables.
+// *
+// * @param $cols ($cols);
+// *
+// * span-xl(8);
+// *
+@function span-xl($cols: 12) {
+    @return ($cols * $xl-col-width) + (($cols - 1) * $xl-gutter);
+}

scss/_version.scss

@@ -2,7 +2,7 @@
 // * Hoisin.scss
 // * CSS responsive framework boilerplate
 // * Create your own grids, plugin anything
-// * Version: 0.9.11
+// * Version: 0.9.12
 // * Created by: Cyber-Duck Ltd <[email protected]>,
 // *             Ramon Lapenta <[email protected]>
 // *

scss/components/_body.scss

@@ -4,6 +4,17 @@ body {
 	padding: 0;
 	font-family: $body-font;
 }
+$red: red;
+.red {
+	color: $red;
+}
+.red-light {
+	color: light($red, 70%);
+}
+.red-dark {
+	color: dark($red, 50%);
+}
+
 
 @media (min-width: $bp-l) {