andrewdc

var gulp          = require('gulp');
var notify        = require('gulp-notify');
var sass          = require('gulp-sass');
var gutil         = require('gulp-util');
var plumber       = require('gulp-plumber');
var autoprefixer  = require('gulp-autoprefixer');
var path          = require('path');
var livereload    = require('gulp-livereload');
var lr            = require('tiny-lr')();
var config        = require('../config');

andrewdc

{
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?"
}

andrewdc

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Here is our current variable system. 
// This is so we can incorporate a cross-app design system, 
// and also allow for heavy customization of chrome within apps,
// as many apps need to be themed for a client.
//==========================================================

andrewdc

$properties: (
  font: (
    header: ("Josefin Sans", sans-serif), 
    body:   ("Open Sans", sans-serif),
    code:   ("Source Code Pro", sans-serif)
  ),
  color: (
    light:        #8db5e1,
    dark:         #212121,
    theme-text:   hsl(0, 0%, 40%),

andrewdc

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    rubysass = require('gulp-ruby-sass'),
    fileinclude = require('gulp-file-include'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    connect = require('gulp-connect'),

andrewdc

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

$properties: (
  font: (
    header: '"Ubuntu", sans-serif', 
    body:   '"Droid Sans", sans-serif',
    code:   '"Source Code Pro", sans-serif'

andrewdc

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

%text-center {
  text-align: center; 
}

main {

andrewdc

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    fileinclude = require('gulp-file-include'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    connect = require('gulp-connect'),
    server = lr();

andrewdc

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

/*
A slightly more automated approach to BEM modifier classes:
using '&' parent selector interpolation, modifiers extend their bases,
so that HTML markup requires only the modifier class not the base *and* modifier
*/

andrewdc

=img_replace(!imgurl, !width, !height)
  :width = !width
  :height = !height
  :background url('#{!imgurl}') no-repeat
  :text-indent -9999px
  :overflow hidden
  :letter-spacing -1000em