pfulton

// quick relative font-sizing mixin.
// I wrote this before finding Anthony Short's awesome StitchCSS gem: https://github.com/anthonyshort/stitch-css/
// his relative font-sizing function is here: https://github.com/anthonyshort/stitch-css/blob/master/stylesheets/stitch/patterns/text/_rem.scss

$base-font-size: 16px;

@mixin font-sizer($font-size, $base-font-size) {
	font-size: ($font-size / $base-font-size) * 1em;
}

pfulton

// for the life of me, I can't track down the original place where I found this.

// syntax for scale mixin is like this
// property, sizes in px, context
//@include scale(padding, (16, 14, 12, 9), 20);
// 16px is default context size

@mixin scale($props, $sizes, $base: 16) {
	$values: ();
	$sublists: false;

pfulton

Sass and Compass Resources

=====================================================

***ONLINE***

> Official: http://sass-lang.com
> Official: http://compass-style.org
> http://thesassway.com

pfulton

AL
AK
AZ
AR
CA
CO
CT
DE
DC
FL

pfulton

Solspace: http://www.solspace.com
Pixel & Tonic: http://pixelandtonic.com/
Low: http://gotolow.com/
Stash: https://github.com/croxton/Stash

----

Helpful posts:

Viget has some great EE-related posts. Just Google for them, or start here:

pfulton

@mixin hd($defaultPath, $hdPath) {
  // the non-hd image - use data URI for this
  background-image: inline-image($defaultPath);
  // the IE fall-back for non-data URI support
  .lt-ie9 & {
    background-image: image-url($defaultPath);
  }
  // the HD version - use regular image path to prevent downloading non-hd version, too
  @media (-webkit-min-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-device-pixel-ratio: 1.5) {
    background-image: image-url($hdPath);

pfulton

/* THE BASE FILE WHERE YOU IMPORT ALL YOUR STUFF & MAYBE DO YOUR MEDIA QUERIES */

@import "mixins";

@media only screen and (min-width: 40.625em) {
	@import "lib/placeholders";
	@import "layout/medium";
}

pfulton

.box {
  background: big-ass-data-uri-string-for-non-retina-hd-image;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
  .box {
    background: big-ass-data-uri-string-for-retina-hd-image;
  }
}

pfulton

-# Because I always forget...
-# Example markup for contact info (client's address) in Haml with both Microformats & Microdata

%article.vcard{:itemscope => true, :itemtype => 'http://schema.org/Organization'}
  %h1.fn.org{:itemprop => 'name'} Company Name
  %div.adr{:itemprop => 'address', :itemscope => true, :itemtype => 'http://schema.org/PostalAddress'}
    %span.street-address{:itemprop => 'streetAddress'}
    %span.locality{:itemprop => 'addressLocality'}
    %span.region{:itemprop => 'addressRegion'}
    %span.postal-code{:itemprop => 'postalCode'}

pfulton

<article class="my-element">
	<h1>Article Title</h1>
	<p>Teaser text lorem ipsum.</p>
	<a href="full-article.html">Read More</a>
</article>