translucencss 0.1.1

data/lib/translucencss.rb

@@ -0,0 +1,41 @@
+require 'compass'
+#require 'normalize'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('translucencss', :path => extension_path)
+
+module Sass::Script::Functions
+	
+	def is_substring(string, substring)
+		assert_type string, :String
+		assert_type substring, :String
+		Sass::Script::Bool.new(string.value.include?(substring.value))
+	end
+	declare :is_substring, [:string, :substring]
+
+	#####################
+	# Number Manipulation
+	#####################
+	
+	# https://github.com/nex3/sass/issues/740
+	# return a number without its unit
+	def strip_unit(number)
+		assert_type number, :Number
+		Sass::Script::Number.new(number.value)
+	end
+	#declare :strip_unit, [:number]
+ 
+	# return 1 * the unit of the input number
+	def one_unit(number)
+		assert_type number, :Number
+		Sass::Script::Number.new(1, ["#{number.unit_str}"])
+	end
+	#declare :one_unit, [:number]
+ 
+	# force the unit of a given number
+	def add_unit(number, unit)
+		assert_type number, :Number
+		assert_type unit, :String
+		Sass::Script::Number.new(number.value, ["#{unit}"])
+	end
+	#declare :add_unit, [:number]
+end

data/stylesheets/_translucencss.scss

@@ -0,0 +1,7 @@
+// --------------------------------------------------------------------------------
+// TranslucenCSS:  Common CSS patterns abstracted as mixins and variables
+// --------------------------------------------------------------------------------
+
+@import "translucencss/core";
+@import "translucencss/css3";
+@import "translucencss/util";

data/stylesheets/translucencss/_core.scss

@@ -0,0 +1,6 @@
+@import "core/font-stacks";
+@import "core/typography";
+@import "core/headlines";
+@import "core/tables";
+@import "core/lists";
+@import "core/forms";

data/stylesheets/translucencss/_css3.scss

@@ -0,0 +1,2 @@
+@import "css3/object-fit";
+@import "css3/flexbox";

data/stylesheets/translucencss/_util.scss

@@ -0,0 +1,6 @@
+@import "util/colors";
+@import "util/clearfix";
+@import "util/ie";
+@import "util/images";
+@import "util/ellipsis";
+@import "util/spacing";

data/stylesheets/translucencss/core/_font-stacks.scss

@@ -0,0 +1,45 @@
+// --------------------------------------------------------------------------------
+// Balanced, attractive font stacks
+// http://www.awayback.com/revised-font-stack/
+// --------------------------------------------------------------------------------
+
+// -------------------------------------------------------------------------------- SERIF
+
+$arial: Arial, "Helvetica Neue", Helvetica, sans-serif;
+$baskerville: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
+$bodini: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
+$copperplate: "Copperplate Light", "Copperplate Gothic Light", serif;
+$garamond: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+$georgia: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
+$hoefler: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+$palatino: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
+$times: Times, "Times New Roman", Georgia, serif;
+
+// -------------------------------------------------------------------------------- SANS-SERIF
+
+$calibri: GillSans, Calibri, Trebuchet, sans-serif;
+$futura: "Futura Medium", Century Gothic, AppleGothic, sans-serif;
+$gothic: "Century Gothic", "Apple Gothic", sans-serif;
+$helvetica: "Helvetica Neue", Arial, Helvetica, sans-serif;
+$impact: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+$lucida: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$optima: Optima, Candara, Segoe, "Segoe UI", Arial, sans-serif;
+$segoe: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+$tahoma: Tahoma, Geneva, Verdana, sans-serif;
+$verdana: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
+
+// -------------------------------------------------------------------------------- MONOSPACE
+
+$courier: "Courier New", Courier, monospace;
+$lucida: Consolas, "Lucida Console", Monaco, monospace;
+
+// -------------------------------------------------------------------------------- CURSIVE
+
+$chancery: "Bradley Hand ITC", "Apple Chancery", "URW Chancery L", cursive;
+
+// -------------------------------------------------------------------------------- DEFAULTS
+
+$serif: $baskerville !default;
+$sans-serif: $segoe !default;
+$monospace: $courier !default;
+$cursive: $chancery !default;

data/stylesheets/translucencss/core/_forms.scss

@@ -0,0 +1,24 @@
+$form-input-text: unquote('input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]');
+$form-input-buttons: unquote('input[type="submit"], input[type="reset"], input[type="button"], button');
+$form-input-dates: unquote('input[type^="date"], input[type="month"], input[type="week"], input[type="time"]');
+$form-input-not-radio: unquote('input:not([type="radio"]):not([type="checkbox"])');
+
+@mixin input-placeholder {
+	&::-webkit-input-placeholder {
+		@content;
+	}
+
+	// Firefox <19
+	&:-moz-placeholder {
+		@content;
+	}
+
+	// Firefox >19
+	&::-moz-placeholder {
+		@content;
+	}
+
+	&:-ms-input-placeholder {  
+		@content;
+	}
+}

data/stylesheets/translucencss/core/_headlines.scss

@@ -0,0 +1,48 @@
+$headline-sizes: 2em 1.8em 1.4em 1.2em 1em .8em !default;
+$gh-selectors: 'section, article' !default;
+
+@mixin headings($from: 1, $to: 6) {
+	#{headings($from, $to)} {
+		@content;
+	}
+}
+
+@mixin headline-sizes($sizes: $headline-sizes, $margin: $baseline-block-margin) {
+	@warn "This mixin is deprecated";
+	@for $i from 1 through length($sizes) {
+		%h#{$i}-size {
+			$size: nth($sizes, $i);
+			font-size: $size;
+			@include rem(margin, $size, $margin)
+		}
+	}
+}
+
+@mixin graduated-headlines($hn, $sizes) {
+	@warn "This mixin is deprecated";
+	$sel: $gh-selectors;
+	@for $i from 1 through length($sizes) {
+		#{$sel} {
+			@for $j from 1 through $hn {
+				@if $i + $j - 1 <= length($sizes) {
+					h#{$j} {
+						font-size: nth($sizes, $i + $j - 1);
+					}
+				}
+			}
+		}
+		$sel: nest($sel, $gh-selectors);
+	}
+}
+
+@mixin graduated-headlines-extended($hn: 1, $min: 1, $max: 6) {
+	$sel: $gh-selectors;
+	@for $i from $min through $max {
+		#{$sel} {
+			@for $j from 1 through $hn {
+				h#{$j} { @extend h#{$i + $j - 1}%size !optional; }
+			}
+		}
+		$sel: nest($sel, $gh-selectors);
+	}
+}

data/stylesheets/translucencss/core/_lists.scss

@@ -0,0 +1,76 @@
+@mixin inline-menu($type: inline, $child: li) {
+	@if $type == float {
+		@include clearfix;
+	}
+	
+	> #{$child} {
+		@if $type == float {
+			float: left;
+			//list-style: none;
+		} @else {
+			display: inline-block;
+		}
+		
+		@content;
+		
+		a { white-space: nowrap }
+	}
+}
+
+@mixin drop-menu($parent: ul) {
+	position: relative;
+	
+	#{$parent} {
+		display: none;
+	}
+
+	&:hover #{$parent}, &.active #{$parent}, &.opened {
+		display: block;
+		position: absolute;
+		@content;
+	}
+}
+
+@mixin button-group($orientation: horizontal, $radius: .25em, $child: li) {
+	display: table;
+
+	> #{$child} {
+		@if $orientation == horizontal {
+			display: table-cell;
+		} @else {
+			list-style: none;
+		}
+		
+		@content;
+		
+		+ #{$child} {
+			@if $orientation == horizontal {
+				border-left: none;
+			} @else {
+				border-top: none;
+			}
+		}
+		
+		@if $radius > 0 {
+			@include button-group-ends($orientation, $radius);
+		}
+	}
+}
+
+@mixin button-group-ends($orientation: horizontal, $radius: .25em) {
+	&:first-child {
+		@if $orientation == horizontal {
+			@include border-radius($radius 0 0 $radius);
+		} @else {
+			@include border-radius($radius $radius 0 0);
+		}
+	}
+	
+	&:last-child {
+		@if $orientation == horizontal {
+			@include border-radius(0 $radius $radius 0);
+		} @else {
+			@include border-radius(0 0 $radius $radius);
+		}
+	}
+}

data/stylesheets/translucencss/core/_tables.scss

@@ -0,0 +1,16 @@
+@mixin bordered-table($border: 1px solid) {
+	border-collapse: collapse;
+	
+	th, td {
+		border: $border;
+		padding: .25em;
+
+		@content;
+	}
+}
+
+@mixin zebra-striping($position: even) {
+	tbody:nth-of-type(#{$position}) tr, tbody:only-of-type tr:nth-child(#{$position}) {
+		@content;
+	}
+}

data/stylesheets/translucencss/core/_typography.scss

@@ -0,0 +1,55 @@
+$baseline-block-margin: 1rem 0 !default;
+
+// $base-size 1em by default, but it might not be if you're nesting elements
+// Example
+// -------
+// body: 1em
+// p.special: 1.2em
+// p.special strong: 1em
+//	
+// If we want to scale `p.special strong` back to 1em, we need to feed $base-size as .83333 or scale-em(1.2, 1):
+//
+// p.special strong {
+//     @include rem(font-size, 1em, scale-em(1.2, 1));
+// }
+
+@mixin rem($property, $font-size, $desired-sizes: 1rem, $base-size: 1em) { // this mixin uses em and rem interchangeably
+	$ems: ();
+	$rems: ();
+	
+	@each $s in $desired-sizes {
+		$s: strip-unit($s);
+		$ems: append($ems, scale-em($font-size, $s, $base-size)); // scale-em already returns it into em
+		$rems: append($rems, if($s == 0, 0, $s * 1rem));
+	}
+
+	#{$property}: $ems;
+	#{$property}: $rems;
+}
+
+// @font-size:
+//		the size of the current element (eg. `1.5em`)
+// @desired-size:
+//		the desired output size (eg. `1em`)
+// @base-size:
+//		the size of the parent element if you're trying to scale it back to the baseline size (eg. `1.5em` or `.8em`)
+//		otherwise use the default of `1em` to signify no additional scaling
+@function scale-em($font-size, $desired-size, $parent-size: 1em) {
+//	@return if($desired-size == 0, 0, strip-unit($desired-size) / strip-unit($font-size) * strip-unit($parent-size) * 1em);
+	@return if($desired-size == 0, 0, strip-unit($desired-size) / strip-unit($font-size) * $parent-size);
+}
+
+// a map version of scale-em
+// @function scale-em-list($font-size, $desired-sizes: 1em, $base-size: 1em) {
+	// $collector: ();
+	
+	// @each $s in $desired-sizes {
+		// $collector: append($collector, scale-em($font-size, $s, $base-size));
+	// }
+	// @return $collector;
+// }
+
+//@mixin baseline-margins($font-size, $margin: $baseline-block-margin) {
+//	font-size: $font-size;
+//	margin: scale-em-list($font-size, $margin);
+//}

data/stylesheets/translucencss/css3/_flexbox.scss

@@ -0,0 +1,288 @@
+@import "compass/support";
+
+// $flexbox-support values:
+// 	standard: Draft #3
+// 	modern: Draft #2 or newer
+// 	legacy: Draft #1 only
+// 	wrap: versions that support wrapping (includes feature query on the display property on the unprefixed standard value)
+// 	all: all versions
+
+$flexbox-support-threshold: $critical-usage-threshold !default;
+$flexbox-support: modern !default;
+$flexbox-warnings: true !default;
+
+// @private
+@function flexbox-capability-options($support: $flexbox-support) {
+	@if type-of($flexbox-support) == list { // this might need to be here for users who are expecting the older format for this variable
+		@warn "The $flexbox-support variable as a list has been deprecated, setting $flexbox-support to `modern`";
+		$flexbox-support: modern !global;
+	}
+
+	@if $support == wrap {
+		@return (), ((spec-versions: 2), ), ((spec-versions: 3, partial-support: false), (full-support: true));
+	} @else if $support == standard {
+		@return (), (), ((spec-versions: 3), (full-support: true));
+	} @else if $support == legacy {
+		@return (spec-versions: 1), (), ();
+ 	} @else if $support == modern {
+ 		@return (), ((spec-versions: 2), ), ((spec-versions: 3, partial-support: false), (full-support: true));
+	} @else { // all
+		@return (spec-versions: 1), ((spec-versions: 2), ), ((spec-versions: 3), (full-support: true));
+	}
+}
+
+// @private
+@function flexbox-translate-value($value, $version: 1) {
+	$value: unquote($value);
+
+	@if $value == flex {
+		@return if($version == 1, box, flexbox);
+	} @else if $value == inline-flex {
+		@return if($version == 1, inline-box, inline-flexbox);
+	} @else if $value == flex-start {
+		@return start;
+	} @else if $value == flex-end {
+		@return end;
+	} @else if $value == space-between {
+		@return justify;
+	} @else if $value == space-around { // @box doesn't have a value equivalent to `space-around`
+		@return if($version == 1, justify, distribute);
+	}
+	@return $value;
+}
+
+// @private
+// TODO: do away with assuming that length($styles) == 1 means that we only want the modern properties?
+@mixin flexbox($styles, $warnings: ()) {
+	// length($styles) == 3: v1, v2, v3
+	// length($styles) == 2: v1, v2 & v3
+	// length($styles) == 1: v3
+	$options: flexbox-capability-options($flexbox-support);
+	$versions: length($styles);
+
+	@if $versions == 1 {
+		$options: nth($options, 3);
+	} @else if $versions == 2 {
+		$options: nth($options, 1), join(nth($options, 2), nth($options, 3));
+	}
+
+	@for $i from 1 through $versions {
+		$current-options: nth($options, $i);
+
+		@if $flexbox-warnings and length($warnings) >= $i {
+			$warning-shown: false;
+			$prefixes: prefixes-for-capability(flexbox, $flexbox-support-threshold, nth($options, $i));
+			@each $browser, $min-ver in $prefixes {
+				@if not $warning-shown and ($min-ver or $i == $versions) and nth($warnings, $i) {
+					@warn nth($warnings, $i);
+					$warning-shown: true;
+				}
+			}
+		}
+
+		@include with-each-prefix(flexbox, $flexbox-support-threshold, $current-options) {
+			// length($current-options) == 0 when spitting out only v1 properties via `$flexbox-support: legacy`
+			// in order to show the unprefixed properties, it needs to be the most recent version *and* have something for $current-options
+			$show-unprefixed: $i == $versions and length($current-options) > 0;
+			@if $current-prefix or $show-unprefixed {
+				@each $prop, $value in nth($styles, $i) {
+					@if $prop == display {
+						@if $show-unprefixed and not $current-prefix {
+							@if $flexbox-support == wrap {
+								@supports (flex-wrap: wrap) { // hide Flexbox from versions of Firefox that do not support wrapping
+									display: $value;
+								}
+							} @else {
+								display: $value;
+							}
+						} @else {
+							display: prefix-identifier($value);
+						}
+					} @else {
+						@include prefix-prop($prop, $value);
+					}
+				}
+			}
+		}
+	}
+}
+
+// @public
+@mixin flexbox-support($support: $flexbox-support) {
+	$previous-support: $flexbox-support !global;
+	$flexbox-support: $support !global;
+	@content;
+	$flexbox-support: $previous-support !global;
+}
+
+// @flex container properties
+
+@mixin display-flex($value: flex) {
+	@include flexbox(
+		( (display: flexbox-translate-value($value, 1))
+		, (display: flexbox-translate-value($value, 2))
+		, (display: $value)
+		));
+}
+
+@mixin flex-direction($value: row) {
+	@include flexbox(
+		( ( box-orient: if($value == row or $value == row-reverse, horizontal, vertical)
+		  , box-direction: if($value == row or $value == column, normal, reverse)
+		  )
+		, (flex-direction: $value)
+		));
+}
+
+@mixin flex-wrap($value: nowrap) {
+	$warnings:
+		( "Flexbox v1 has properties for wrapping but no browser has implemented them, change your flexbox-support to `wrap` to hide Flexbox from them"
+		, "Firefox versions 22-28 do not support wrapping for Flexbox v3, change your flexbox-support to `wrap` to hide Flexbox from them"
+		);
+	@include flexbox(
+		( (box-lines: if($value == nowrap, single, multiple))
+		, (flex-wrap: $value)
+		), if($flexbox-support != wrap and $value != nowrap, $warnings, ()));
+}
+
+@mixin flex-flow($value: row nowrap) {
+	$warnings:
+		( "Flexbox v1 has properties for wrapping but no browser has implemented them, change your flexbox-support to `wrap` to hide Flexbox from them"
+		, "Firefox versions 22-28 do not support wrapping for Flexbox v3, change your flexbox-support to `wrap` to hide Flexbox from them"
+		);
+	$direction: null;
+	$wrap: null;
+	@if length($value) == 2 {
+		$direction: nth($value, 1);
+		$wrap: nth($value, 2);
+	} @else {
+		@if $value == nowrap or $value == wrap or $value == wrap-reverse {
+			$wrap: $value;
+		} @else {
+			$direction: $value;
+		}
+	}
+	@include flexbox(
+		( ( box-orient: if($direction == row or $direction == row-reverse, horizontal, vertical)
+		  , box-direction: if($direction == row or $direction == column, normal, reverse)
+		  , box-lines: if($wrap == nowrap, single, multiple)
+		  )
+		, (flex-flow: $value)
+		), if($flexbox-support != wrap and ($wrap == wrap or $wrap == wrap-reverse), $warnings, ()));
+}
+
+@mixin justify-content($value: stretch) {
+	@include flexbox(
+		( (box-pack: flexbox-translate-value($value, 1))
+		, (flex-pack: flexbox-translate-value($value, 2))
+		, (justify-content: $value)
+		));
+}
+
+@mixin align-content($value: stretch) {
+	$warnings:
+		( "Flexbox v1 does not have an align-content property"
+		, null
+		, null
+		);
+	@include flexbox(
+		( null
+		, (flex-line-pack: flexbox-translate-value($value, 2))
+		, (align-content: $value)
+		), $warnings);
+}
+
+@mixin align-items($value: stretch) {
+	@include flexbox(
+		( (box-align: flexbox-translate-value($value, 1))
+		, (flex-align: flexbox-translate-value($value, 2))
+		, (align-items: $value)
+		));
+}
+
+// @flex item properties
+
+@mixin align-self($value: stretch) {
+	$warnings:
+		( "Flexbox v1 does not have an align-self property, only align-content"
+		, null
+		, null
+		);
+	@include flexbox(
+		( ()
+		, (flex-item-align: flexbox-translate-value($value, 2))
+		, (align-self: $value)
+		), $warnings);
+}
+
+@mixin flex($value: 1 0 auto) {
+	$last-val: nth($value, length($value));
+	// TODO: determine what kind of warning makes sense here
+	// Flexbox v1 doesn't let you control flex-grow and flex-shrink values independently
+	// (minor issue), nor does it have a concept of flex-basis (moderate issue).
+	// `box-flex: 1` is equivalent to `flex: 1 1`.  There's no way to recreate `flex: 1 0`
+	// or `flex: 0 1`, though there are few instances where this is actually a problem
+	// see: http://stackoverflow.com/questions/16130399/flexbox-in-safari-grow-and-shrink
+	$warnings:
+		( "Flexbox v1 does not support flex-basis for the `flex` property at all"
+		, null
+		, null
+		);
+	@include flexbox(
+		( (box-flex: nth($value, 1))
+		, (flex: $value)
+		, (flex: $value)
+		), if(length($value) > 2 or ($last-val != auto and not unitless($last-val)), $warnings, ()));
+}
+
+@mixin flex-grow($value: auto) {
+	$warnings:
+		( "Flexbox v1 does not have a flex-grow property, try using the `flex` property instead"
+		, "Flexbox v2 does not have a flex-grow property, use the `flex` shorthand instead"
+		, null
+		);
+	@include flexbox(
+		( ()
+		, ()
+		, (flex-grow: $value)
+		), $warnings);
+}
+
+@mixin flex-shrink($value: auto) {
+	$warnings:
+		( "Flexbox v1 does not have a flex-shrink property"
+		, "Flexbox v2 does not have a flex-grow property, use the `flex` shorthand instead"
+		, null
+		);
+	@include flexbox(
+		( ()
+		, ()
+		, (flex-shrink: $value)
+		), $warnings);
+}
+
+@mixin flex-basis($value: auto) {
+	$warnings:
+		( "Flexbox v1 does not have a flex-basis property"
+		, "Flexbox v2 does not have a flex-grow property, use the `flex` shorthand instead"
+		, null
+		);
+	@include flexbox(
+		( ()
+		, ()
+		, (flex-basis: $value)
+		), $warnings);
+}
+
+@mixin order($value: 0) {
+	$warnings:
+		( "Flexbox v1 does not support negative ordering, try increasing the order of the sibling elements instead"
+		, null
+		, null
+		);
+	@include flexbox(
+		( (box-ordinal-group: $value + 1)
+		, (flex-order: $value)
+		, (order: $value)
+		), if($value < 0, $warnings, ()));
+}

data/stylesheets/translucencss/css3/_flexbox_old.scss

@@ -0,0 +1,315 @@
+@import "compass/css3/deprecated-support";
+
+// NOTE:
+// All mixins for the @box spec have been written assuming they'll be fed property values that
+// correspond to the standard spec.  Some mixins can be fed values from the @box spec, but don't
+// rely on it.  The `legacy-order` mixin will increment the value fed to it because the @box
+// `box-ordinal-group` property begins indexing at 1, while the modern `order` property begins
+// indexing at 0.
+
+// if `true`, the @box properties will be emitted as part of the normal mixin call
+// (if this is false, you're still free to explicitly call the legacy mixins yourself)
+$flex-legacy-enabled: false !default;
+
+// if `true`, `$flex-legacy-enabled` is treated as false and an `@supports` block is added to 
+// the display property to hide the standard value from versions of Firefox that support the
+// unprefixed properties, but do not support wrapping
+// (this includes suppressing the automatic emittion of @box properties)
+$flex-wrap-required : false !default;
+
+// The modern `flex-direction` property corresponds to two properties in the @box spec and the
+// `legacy-flex-direction` mixin will emit both by default.
+
+//  This variable controls the emition of the `box-direction` property:
+//     true   : always emit
+//     false  : always suppress
+//     normal : only emit if the direction is `normal`
+//     reverse: only emit if the direction is `reverse`
+$flex-legacy-direction: true !default;
+
+//  This variable controls the emition of the `box-orient` property:
+//     true      : always emit
+//     false     : always suppress
+//     horizontal: only emit if the orient is `horizontal`
+//     vertical  : only emit if the orient is `vertical`
+$flex-legacy-orient: true !default;
+
+// @flex
+// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
+// NOTE: FF did not support wrapping until version ??.  Because the `display: flex` property
+// is wrapped in a `@supports (flex-wrap: wrap)` block (when $flex-wrap-required or the $wrap
+// argument to the `display-flex` mixin is set to `true`), it will Just Work(TM) when support is
+// finally added
+// Chrome 21 (prefixed)
+// Opera 12.1 (unprefixed)
+// Firefox 22 (unprefixed)
+$flex-support: not -moz, -webkit, not -ms, not -o, not -khtml !default;
+
+// @flexbox
+// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
+// Chrome 17 (prefixed)
+// Internet Explorer 10 (prefixed)
+$flexbox-support: not -moz, -webkit, -ms, not -o, not -khtml, not standard !default;
+
+// @box
+// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
+// NOTE: no browser that implements this spec is known to support `box-lines: multiple`
+// Chrome 4? (prefixed)
+// Safari 3.1 (prefixed)
+// Firefox <20 (prefixed)
+$box-support: -moz, -webkit, not -ms, not -o, not -khtml, not standard !default;
+
+// ====================================================================================================
+//                                                                       | Common
+// ====================================================================================================
+
+// function for converting a value from the standard specification to one that is comparable from
+// an older specification
+@function flex-translate-value($value, $version: box) {
+	$value: unquote($value);
+
+	@if $value == flex {
+		@return if($version == box, box, flexbox);
+	} @else if $value == inline-flex {
+		@return if($version == box, inline-box, inline-flexbox);
+	} @else if $value == flex-start {
+		@return start;
+	} @else if $value == flex-end {
+		@return end;
+	} @else if $value == space-between {
+		@return justify;
+	} @else if $value == space-around { // @box doesn't have a value equivalent to `space-around`
+		@return if($version == box, justify, distribute);
+	}
+	@return $value;
+}
+
+@function flex-support-common() {
+	$common: ();
+	@for $i from 1 through length($flex-support) {
+		$common: append($common, nth($flex-support, $i) or nth($flexbox-support, $i), comma);
+	}
+	@return $common;
+}
+
+// ====================================================================================================
+//                                                                       | Display Property
+// ====================================================================================================
+
+// $type: flex | inline-flex
+@mixin display-flex($type: flex, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+	@if $legacy and not $wrap {
+		@include legacy-display-flex($type);
+	}
+	
+	@include experimental-value(display, flex-translate-value($type, flexbox), $flexbox-support...);
+	
+	// if `$wrap` is true, then we need to suppress official support as generated by the `experimental()`
+	// mixin so that we can insert it inside an `@supports` block
+	$flex-support-standard: true;
+	$flex-support-list: $flex-support;
+	@if length($flex-support) > 5 {
+		$flex-support-standard: nth($flex-support, 6);
+		// a `slice()` function would really be handy here...
+		$flex-support-list: nth($flex-support, 1), nth($flex-support, 2), nth($flex-support, 3), nth($flex-support, 4), nth($flex-support, 5);
+	}
+	$flex-support-list: append($flex-support-list, if($wrap, false, $flex-support-standard));
+	@include experimental-value(display, $type, $flex-support-list...);
+	
+	@if $wrap and $flex-support-standard {
+		@supports (flex-wrap: wrap) {
+			display: $type;
+		}
+	}
+}
+
+@mixin legacy-display-flex($type: flex) {
+	@include experimental-value(display, flex-translate-value($type, box), $box-support...);
+}
+
+// ====================================================================================================
+//                                                                       | Flex Container Properties
+// ====================================================================================================
+
+// $value: <'flex-direction'> || <'flex-wrap'>
+@mixin flex-flow($value: row nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
+	@if $legacy and not $wrap {
+		@include legacy-flex-flow($value, $orient, $direction);
+	}
+	
+	@include experimental(flex-flow, $value, flex-support-common()...);
+}
+
+@mixin legacy-flex-flow($value: row nowrap, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
+	@if length($value) > 1 { // @box version doesn't have a shorthand
+		@include legacy-flex-direction(nth($value, 1), $orient, $direction);
+		@include legacy-flex-wrap(nth($value, 2));
+	} @else {
+		$value: unquote($value);
+		@if $value == row or $value == row-reverse or $value == column or $value == column-reverse {
+			@include legacy-flex-direction($value);
+		} @else {
+			@include legacy-flex-wrap($value);
+		}
+	}
+}
+
+// ----------------------------------------------------------------------
+
+// $value: row | row-reverse | column | column-reverse
+@mixin flex-direction($value: row, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
+	@if $legacy and not $wrap {
+		@include legacy-flex-direction($value, $orient, $direction);
+	}
+	
+	@include experimental(flex-direction, $value, flex-support-common()...);
+}
+
+@mixin legacy-flex-direction($value: row, $orient: $flex-legacy-orient, $direction: $flex-legacy-direction) {
+	$value: unquote($value);
+	$translated-orient: if($value == row or $value == row-reverse, horizontal, vertical);
+	$translated-direction: if($value == row or $value == column, normal, reverse);
+
+	@if $orient == true or $translated-orient == $orient {
+		@include experimental(box-orient, $translated-orient, $box-support...);
+	}
+
+	@if $direction == true or $translated-direction == $direction {
+		@include experimental(box-direction, $translated-direction, $box-support...);
+	}
+}
+
+// ----------------------------------------------------------------------
+
+// $value: nowrap | wrap | wrap-reverse
+@mixin flex-wrap($value: nowrap, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+	@if $legacy and not $wrap {
+		@include legacy-flex-wrap($value);
+	}
+	
+	@include experimental(flex-wrap, $value, flex-support-common()...);
+}
+
+@mixin legacy-flex-wrap($value: nowrap) {
+	// NOTE: @box has no equivalent of wrap-reverse
+	@include experimental(box-lines, if($value == nowrap, single, multiple), $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// Distributing extra space along the "main axis"
+// $value: flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+	@if $legacy and not $wrap {
+		@include legacy-justify-content($value);
+	}
+	
+	@include experimental(flex-pack, flex-translate-value($value, flexbox), $flexbox-support...);
+	@include experimental(justify-content, $value, $flex-support...);
+}
+
+@mixin legacy-justify-content($value: flex-start) {
+	@include experimental(box-pack, flex-translate-value($value, box), $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// Distributing extra space along the "cross axis"
+// $value: flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($value: flex-start, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+	@if $legacy and not $wrap {
+		@include legacy-align-content($value);
+	}
+	
+	@include experimental(flex-line-pack, flex-translate-value($value, flexbox), $flexbox-support...);
+	@include experimental(align-content, $value, $flex-support...);
+}
+
+@mixin legacy-align-content($value: flex-start) {
+	@include experimental(box-align, flex-translate-value($value, box), $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// Align items along the "cross axis"
+// $value: flex-start | flex-end | center | baseline | stretch
+@mixin align-items($value: stretch) { // the flex container
+	// There is no @box version of this property
+	@include experimental(flex-align, flex-translate-value($value, flexbox), $flexbox-support...);
+	@include experimental(align-items, $value, $flex-support...);
+}
+
+// ====================================================================================================
+//                                                                       | Flex Item Properties
+// ====================================================================================================
+
+// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
+@mixin flex($value: 0 1 auto, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+	$value: unquote($value);
+	@if $legacy and unitless(nth($value, 1)) {
+		@include legacy-flex(nth($value, 1));
+	}
+	
+	@include experimental(flex, $value, flex-support-common()...);
+}
+
+@mixin legacy-flex($value: 0) {
+	@include experimental(box-flex, $value, $box-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $value: Integer
+@mixin flex-grow($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+	@if $legacy and not $wrap {
+		@include legacy-flex-grow($value);
+	}
+	
+	// There is no @flexbox version of this property
+	@include experimental(flex-grow, $value, $flex-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $value: Integer
+@mixin flex-shrink($value: 1) {
+	// There is no @box version of this property
+	// There is no @flexbox version of this property
+	@include experimental(flex-shrink, $value, $flex-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $value: united number (eg: 100px)
+@mixin flex-basis($value: auto) {
+	// There is no @box version of this property
+	// There is no @flexbox version of this property
+	@include experimental(flex-basis, $value, $flex-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// Align items along the "cross axis" -- overrides `align-items` value on individual items
+// $value: auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($value: auto) { // children of flex containers
+	// There is no @box version of this property
+	@include experimental(flex-item-align, flex-translate-value($value, flexbox), $flexbox-support...);
+	@include experimental(align-self, $value, $flex-support...);
+}
+
+// ----------------------------------------------------------------------
+
+// $value: Integer
+@mixin order($value: 0, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
+	@if $legacy and not $wrap {
+		@include legacy-order($value);
+	}
+	
+	@include experimental(flex-order, $value, $flexbox-support...);
+	@include experimental(order, $value, $flex-support...);
+}
+
+@mixin legacy-order($value: 0) {
+	// the @box spec starts the ordering at 1 instead of 0 like the modern specs
+	@include experimental(box-ordinal-group, $value + 1, $box-support...);
+}

data/stylesheets/translucencss/css3/_object-fit.scss

@@ -0,0 +1,13 @@
+@import "compass/css3/deprecated-support";
+
+// http://dev.opera.com/articles/view/css3-object-fit-object-position/
+
+$object-fit-support: not webkit, not moz, o, not ms, not khtml;
+
+@mixin object-fit($value: contain) {
+	@include experimental(object-fit, $value, $object-fit-support...);
+}
+
+@mixin object-position($value: 50% 50%) {
+	@include experimental(object-position, $value, $object-fit-support...);
+}

data/stylesheets/translucencss/util/_clearfix.scss

@@ -0,0 +1,40 @@
+// --------------------------------------------------------------------------------
+// Clearfix:  clear floats without using extra markup
+// --------------------------------------------------------------------------------
+
+$default-clearfix: modern !default;
+
+@mixin clearfix($type: $default-clearfix) {
+	@if $type == modern {
+		@include clearfix-modern;
+	} @else if $type == traditional {
+		@include clearfix-traditional;
+	} @else {
+		@include clearfix-overflow;
+	}
+}
+
+// http://www.positioniseverything.net/easyclearing.html
+@mixin clearfix-traditional {
+	zoom: 1; // fix for IE
+
+	&:after {
+		content: ' ';
+		display: block;
+		height: 0;
+		clear: both;
+		visibility: hidden;
+	}
+}
+
+// http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix-modern {
+	zoom: 1; // fix for IE
+	
+	/*&:before,*/ &:after { content: ' '; display: table; }
+	&:after { clear: both; }
+}
+
+@mixin clearfix-overflow {
+	overflow: hidden;
+}

data/stylesheets/translucencss/util/_colors.scss

@@ -0,0 +1,7 @@
+@function fade($color, $mod) {
+	@return desaturate(lighten($color, $mod), $mod);
+}
+
+@function contrast-style($color, $light, $dark) {
+	@return if(lightness($color) < 30%, $light, $dark);
+}

data/stylesheets/translucencss/util/_ellipsis.scss

@@ -0,0 +1,34 @@
+@import "compass/css3/deprecated-support";
+
+$text-overflow-support: not webkit, not moz, o, not ms, not khtml;
+
+@mixin single-line-ellipsis {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+@mixin multi-line-ellipsis($background: white, $height: 1.4em) {
+	overflow: hidden;
+	position: relative;
+
+	&:after {
+		display: block;
+		height: $height;
+		content: ' ';
+		@include background(linear-gradient(rgba($background, 0), $background));
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+
+	@supports (text-overflow: -o-ellipsis-lastline) {
+		text-overflow: -o-ellipsis-lastline;
+		// no standard version of this value yet
+
+		&:after {
+			display: none;
+		}
+	}
+}

data/stylesheets/translucencss/util/_ie.scss

@@ -0,0 +1,7 @@
+$is-ie: false !default;
+
+@mixin if-ie {
+	@if $is-ie {
+		@content;
+	}
+}

data/stylesheets/translucencss/util/_images.scss

@@ -0,0 +1,109 @@
+// --------------------------------------------------------------------------------
+// Image Replacement:  apply a background image and hide the original content
+// --------------------------------------------------------------------------------
+
+$default-ir-technique: indent !default;
+
+// NOTE: pseudo and padding options need to be applied to inline elements,
+// instead of their parent block level element if they are intended to be linked
+// <h1><a href="#">Title Text Here</a></h1><!-- style the a, not the h1 -->
+
+// -------------------------------------------------------------------------------- Aliases
+
+// http://www.mezzoblue.com/tests/revised-image-replacement/#phark
+@mixin image-replacement-indent($image, $width, $height) {
+	@include image-replacement($image, $width, $height, indent);
+}
+
+// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+@mixin image-replacement-overflow($image, $width, $height) {
+	@include image-replacement($image, $width, $height, overflow);
+}
+
+// http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/
+@mixin image-replacement-pseudo($image, $width, $height) {
+	@include image-replacement($image, $width, $height, pseudo);
+}
+
+@mixin image-replacement-padding($image, $width, $height) {
+	@include image-replacement($image, $width, $height, padding);
+}
+
+// -------------------------------------------------------------------------------- Master Mixin
+
+// $type options: pseudo, overflow, padding, fontsize, indent
+@mixin image-replacement($image, $width, $height, $type: $default-ir-technique) {
+	@if $type != padding {
+		width: $width;
+		height: $height;
+	}
+	
+	@if $type == pseudo {
+		padding: 0;
+		margin: 0;
+		overflow: hidden;
+		display: block;
+		
+		&:before {
+			content: url($image);
+			display: inline-block;
+			font-size: 0;
+			line-height: 0;
+		}
+	} @else {
+		background: url($image) no-repeat;
+		@if $type == overflow {
+			text-indent: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+		} @else if $type == padding {
+			width: 0;
+			height: 0;
+			padding-top: $height;
+			padding-left: $width;
+			overflow: hidden;
+		} @else { // indent
+			text-indent: -100em;
+		}
+	}
+}
+
+@mixin linked-image-replacement($width, $height, $image, $type: default) {
+	@include image-replacement($width, $height, $image, $type);
+	
+	@if $type != pseudo and $type != padding {
+		a { display: block; width: 100%; height: 100% }
+	}
+}
+
+// --------------------------------------------------------------------------------
+// SVG background: use background-size to hide the SVG background from older browsers
+// --------------------------------------------------------------------------------
+
+// This mixin expects the file to already have the `url()` around it,
+// this allows it to be used with Compass helper functions like `image-url()`
+@mixin svg-background($svg, $styles: 0 0 / auto auto no-repeat) {
+	background: $svg $styles;
+}
+
+// --------------------------------------------------------------------------------
+// Center and clip an image to specific dimensions
+// --------------------------------------------------------------------------------
+
+@mixin center-clip ($parent-dims, $clip-dims) {
+	$parent-width: nth($parent-dims, 1);
+	$parent-height: nth($parent-dims, 2);
+	
+	$clip-width: nth($clip-dims, 1);
+	$clip-height: nth($clip-dims, 2);
+	
+	$top: ($parent-height - $clip-height) / 2;
+	$left: ($parent-width - $clip-width) / 2;
+	$bottom: $parent-height - $top;
+	$right: $parent-width - $left;
+
+	clip: rect($top $right $bottom $left);
+	top: -$top;
+	left: -$left;
+}
+

data/stylesheets/translucencss/util/_spacing.scss

@@ -0,0 +1,14 @@
+@function even-spacing($val) {
+	$val: $val / 2;
+	@if $val == ceil($val) or unit($val) != px {
+		@return $val;
+	} @else {
+		@if $val > 0 {
+			@return ceil($val) ceil($val) floor($val) floor($val);
+		} @else {
+			// negative numbers have to be reversed otherwise they won't match up properly with positive numbers
+			// `-5px -5px -4px -4px` would get matched up with `4px 4px 5px 5px` otherwise
+			@return floor($val) floor($val) ceil($val) ceil($val);
+		}
+	}
+}

data/templates/project/manifest.rb

@@ -0,0 +1,11 @@
+description "Please provide description here"
+
+# Make sure you list all the project template files here in the manifest.
+#stylesheet 'screen.sass', :media => 'screen, projection'
+
+#image 'dialog-boxes/spritemap.svg'
+#image 'dialog-boxes/spritemap.png'
+
+#require '../dialog-boxes'
+
+#stylesheet '../../stylesheets/cimma/baseline/_core.scss', :to => 'cimma/_test.scss'

metadata

@@ -0,0 +1,83 @@
+--- !ruby/object:Gem::Specification
+name: translucencss
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+  prerelease: 
+platform: ruby
+authors:
+- Chris Siepker
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-05-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: TranslucenCSS doesn't generate anything that you don't absolutely need
+  to get the desired effect, leaving you free to style your elements without constantly
+  undoing
+email: chris@cimmanon.org
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/translucencss.rb
+- stylesheets/_translucencss.scss
+- stylesheets/translucencss/core/_tables.scss
+- stylesheets/translucencss/core/_forms.scss
+- stylesheets/translucencss/core/_lists.scss
+- stylesheets/translucencss/core/_font-stacks.scss
+- stylesheets/translucencss/core/_headlines.scss
+- stylesheets/translucencss/core/_typography.scss
+- stylesheets/translucencss/_util.scss
+- stylesheets/translucencss/_css3.scss
+- stylesheets/translucencss/_core.scss
+- stylesheets/translucencss/util/_clearfix.scss
+- stylesheets/translucencss/util/_colors.scss
+- stylesheets/translucencss/util/_ie.scss
+- stylesheets/translucencss/util/_images.scss
+- stylesheets/translucencss/util/_ellipsis.scss
+- stylesheets/translucencss/util/_spacing.scss
+- stylesheets/translucencss/css3/_object-fit.scss
+- stylesheets/translucencss/css3/_flexbox.scss
+- stylesheets/translucencss/css3/_flexbox_old.scss
+- templates/project/manifest.rb
+homepage: http://www.cimmanon.org/
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: ! 'TranslucenCSS:  common CSS patterns abstracted as mixins and variables'
+test_files: []