TylerK

var gulp      = require('gulp')
  , plumber   = require('gulp-plumber')
  , notify    = require('gulp-notify')
  , stylus    = require('gulp-stylus')
  , sync      = require('browser-sync')

gulp.task('stylus', function() {
  return gulp.src('build/stylus/site.styl')
    .pipe(plumber({
      errorHandler: notify.onError({

TylerK

//
// Mixin for inline responsive design
//
$smallScreen    : 768px;
$mediumScreen   : 992px;
$largeScreen    : 1200px;


@function smallerThan($breakPoint) {
  @return "screen and (min-width:" + $breakPoint + ")";

TylerK

//
// Note: For this to work you will need conditional classes on your html element. For more information: 
// http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
//


// 
// Mixin
//
@mixin for-browser($browser) {

TylerK

.footer-nav {
  @include column(24);
  @include for-screen($normal-page-width) {
   &, .ie8 & { 
     @include column(20); 
    }
  }
}