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');

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

// USAGE:
// resize the browser until your layout looks shit
// take note of the viewport size
// plug in that value and add the new styles...
// e.g.
//
// #logo {
//   float: left;
//   @include respond-to(650px) {
//     float:none;

darren131

(div.line>(div.unit.size1of3>.img+(h3.title>a[href="#"])+.line>.unit.size1of2.price>(.strike+strong)+.unit.size1of3>a.btn.btn-primary)*3)*3

produces:

<div class="line">
  <div class="unit size1of3">
    <div class="img"></div>
    <h3 class="title"><a href="#"></a></h3>
    <div class="line">
      <div class="unit size1of2 price">

darren131

// making use of width/height magic selectors
.icon-giant-killer-bear {
  $width: icons-sprite-width(giant-killer-bear);
  $height: icons-sprite-height(giant-killer-bear);
  @include icons-sprite(giant-killer-bear);
  @include size($width, $height);
  margin: 0 4px 0 0;
  vertical-align: text-bottom;
}

darren131

@import "icons/*.png";

.actions {
  .add    { @include icons-sprite(actions-add-mini); }
  .delete { @include icons-sprite(actions-delete-mini); }
}

.contact {
  .mail  { @include icons-sprite(contact-mail); }
  .phone { @include icons-sprite(contact-phone); }

darren131

.icons-actions-add-mini,
.icons-actions-delete-mini,
[...]
.icons-multimedia-camera {
  background: url('/images/icons-s34fe0604ab.png') no-repeat;
}

.icons-actions-add-mini {background-position: 0 0;}
.icons-actions-delete-mini {background-position: 0 -16px;}
[...]

darren131

// include the compass spite utility if not already included
@import "compass/utilities/sprites";

// import your images
// note: compass already knows my images live in the /images/ folder
@import "icons/*png";

// automagically generate class names
@include all-icons-sprites;

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;