darren131

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));

darren131

// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

darren131

// Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
  background-repeat: repeat-x;

darren131

File organisation

The file organisation is broken down into these main groupings.

• Global
  This contains site configuration variables and a _shame.scss file which contains any hacks.

• Elements

darren131

@mixin set-color($background-color: #c00) {
  @if lightness($background-color) > lightness(#aaaaaa) {
    color: $dark;
  } @else {
    color: $light;
  }
  background:$background-color;
}

darren131

# best path for assets in Wordpress project
http_path = "/wp-content/themes/TheFold/"
css_dir = "."
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

output_style = :expanded
environment = :development

darren131

# get the name of your theme folder
WP_THEME_FOLDER = File.basename(File.dirname(__FILE__))

# best path for assets in Wordpress project
http_path = "/wp-content/themes/#{WP_THEME_FOLDER}/"
css_dir = "."
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

darren131

// This is based on Nicole Sullivan's OOCSS spacing module 
// with a slight modification, namely:
//
// 1. there's no vertical or horizontal
//
// Produces the following placeholder selectors
//  %mtn {
//      margin-top: 0;
//  }
//  %mbn {

darren131

http://thesassway.com/guides
http://leveluptuts.com/tutorials/compass-tutorials
http://www.dontcom.com/post/26884274848/css-preprocessing
http://compass-style.org/help/tutorials/spriting/
http://www.youtube.com/watch?v=Tl6bceyTjFw
http://www.bariswanschers.com/blog/use-sass-and-compass-streamline-your-css-development

darren131

// Your site namespace... may not need this?
var YOUR_SITE = YOUR_SITE || {};
Modernizr.load([
  {
    // load jquery from the CDN
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js',
    complete: function () {
      // id the CDN fails then load local version of jquery
      if ( !window.jQuery ) {
            Modernizr.load('/wp-content/themes/calliduscloud/js/libs/jquery-1.8.1.min.js');