andrewdc

// !opacity should be passed in the x.x format  

@mixin opacity($opacity)
  :filter alpha(opacity: $opacity * 100)
  :-moz-opacity = $opacity
  :-khtml-opacity = $opacity
  :opacity = $opacity

andrewdc

//defaults all corners to 3px.

=rounded_corners(!tleft = 3px , !tright = 3px , !bright = 3px , !bleft = 3px)
  -moz-border-radius-topleft = !tleft
  -moz-border-radius-topright = !tright
  -moz-border-radius-bottomright = !bright
  -moz-border-radius-bottomleft = !bleft
  -webkit-border-top-left-radius = !tleft
  -webkit-border-top-right-radius = !tright
  -webkit-border-bottom-right-radius = !bright

andrewdc

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

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

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.4)
// Compass (v1.0.0.alpha.18)
// ----

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

main {

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

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

$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

// ----
// 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.
//==========================================================