jacket 0.1.0

data/lib/jacket.rb

@@ -0,0 +1,33 @@
+# TODO: Remove lib/ when Sass 3.3 is released
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('jacket', :path => extension_path)
+
+module Jacket
+  VERSION = "0.1.0"
+  DATE = "2013-05-20"
+end
+
+module Sass::Script::Functions
+
+  # Add the Sass list_separator() function until it lands in Sass 3.3
+  # Code fixes from https://github.com/nex3/sass/pull/689#issuecomment-16711829
+  # included.
+
+  # Returns the separator of the given list.
+  # If not a list, returns false.
+  #
+  # @example
+  #   list-separator(1px 2px 3px) => 'space'
+  #   list-separator(1px, 2px, 3px) => 'comma'
+  #   list-separator('foo') => 'space'
+  def list_separator(list)
+    if list.class == Sass::Script::List or list.class == Sass::Script::ArgList
+      Sass::Script::String.new(list.separator.to_s)
+    else
+      Sass::Script::String.new('space')
+    end
+  end
+  declare :separator, [:list]
+
+end

data/readme.md

@@ -0,0 +1,140 @@
+## Jacket 
+### Dress appropriately
+
+Jacket helps orgainze your stylesheets for a multi-context build process.
+Write and maintain a master stylesheet, then output custom tailored
+stylesheets for specific browsers, mobile/desktop sites, and app builds.
+
+### Usage
+
+Write all code in a canonical stylesheet.
+
+**style.scss**
+
+```scss
+.rainy {
+  // Universal rules
+  font-size: 1rem;
+  width: 90%;
+  
+  // Styles for iOS only
+  @include jacket(ios) {
+    background-color: #c0ffee;
+    content: 'Double ristretto cortado, stat.';
+  }
+  // Styles for Android 2.x only
+  @include jacket(andr-2x) {
+    background-color: #baddad;
+    content: 'I should get a new phone.';
+  }
+  // Styles for ie8 only
+  @include jacket(ie8) {
+    background-color: #000;
+    content: 'Round three. FIGHT!';
+  }
+}
+```
+
+Then create stylesheets for each build, and tell Jacket what the weather is.
+
+**style.ios.scss**
+
+```scss
+// Set the weather 
+$jacket: ios;
+@import 'style';
+
+// Compiled result
+.rainy {
+  font-size: 1rem;
+  width: 90%;
+  background-color: #c0ffee;
+  content: 'Double ristretto cortado, stat.';
+}
+```
+
+**style.android-2x.scss**
+
+```scss
+// Set the weather 
+$jacket: andr-2x;
+@import 'style';
+
+// Compiled result
+.rainy {
+  font-size: 1rem;
+  width: 90%;
+  background-color: #baddad;
+  content: 'I should get a new phone.';
+}
+```
+
+**style.ie.scss**
+
+```scss
+// Set the weather 
+$jacket: ie8;
+@import 'style';
+
+// Compiled result
+.rainy {
+  font-size: 1rem;
+  width: 90%;
+  background-color: #000;
+  content: 'Round three. FIGHT!';
+}
+```
+
+You can set multiple comma separated contexts in `$jacket`.
+
+**style.scss**
+
+```scss
+// Set the weather 
+$jacket: ios, andr-2x;
+@import 'style';
+
+// Compiled result (bad example, but you get the idea)
+.rainy {
+  font-size: 1rem;
+  width: 90%;
+  background-color: #c0ffee;
+  content: 'Double ristretto cortado, stat.';
+  background-color: #baddad;
+  content: 'I should get a new phone.';
+}
+```
+
+Or output a context wrapped in selectors, if that's your thing.
+
+**style.scss**
+
+```scss
+// Set the weather. Make sure to surround your selector with quotes.
+$jacket: ie8 '.ltie9';
+@import 'style';
+
+// Compiled result
+.rainy {
+  font-size: 1rem;
+  width: 90%;
+}
+
+.ltie9 .rainy {
+  background-color: #000;
+  content: 'Round three. FIGHT!';
+}
+```
+
+Complex Jacket contexts like `$jacket: mdot, ie7 '.ltie9', ie8 'ltie9'` work just fine.
+
+### Strut your stuff
+
+Now use a build process, conditional comments, or some fancy scripting to give each of your chosen environments a stylesheet made just for them. Not too much, not too little. Those stylesheets are lookin' good.
+
+### Todo
+
+1. Better documentation, including `jacket-context()` function.
+2. Remove `lib` and Compass dependencies when `list-separator()` lands in Sass.
+
+<small>*Thanks to [Breakpoint](https://github.com/Team-Sass/breakpoint), who's no-query functionality inspired this project.*</small>

data/stylesheets/_jacket.scss

@@ -0,0 +1,84 @@
+///////////////////////////////////////////////////////////
+// Jacket
+// Dress appropriately
+///////////////////////////////////////////////////////////
+
+// Jacket helps you orgainze stylesheets for a multi-context build process.
+// Write and maintain a master stylesheet, then output custom tailored
+// stylesheets for specific browsers, mobile/desktop sites, and app builds.
+
+// A list of jackets to print in the stylesheet.
+$jacket: null !default;
+
+// A private variable used by jacket-context().
+$jacket-context: null;
+
+///////////////////////////////////////////////////////////
+// Jacket mixin
+// Takes a list of jacket values.
+///////////////////////////////////////////////////////////
+@mixin jacket($args...) {
+
+  $naked: false;
+  $selectors: ();
+  $filtered: ();
+  $selector-string: '';
+
+  // Set the global $jacket-context variable.
+  $jacket-context: $args;
+
+  // If jacket is a single jacket value and selector list, encapsulate so it's
+  // sent through the next function in one piece.
+  @if list-separator($jacket) == 'space' {
+    $jacket: $jacket, null;
+  }
+
+  // Test if the stylesheet's $jacket variable and jacket mixin arguments match.
+  @each $item in $jacket {
+    @if index($args, nth($item, 1)) {
+
+      // Gather wrapping selectors.
+      @if length($item) == 1 {
+        $naked: true;
+      }
+      @if length($item) == 2 {
+        $selectors: append($selectors, nth($item, 2) + ' &');
+      }
+    }
+  }
+
+  // Filter out duplicate selectors. We can simplify if reject() is added to
+  // Sass.
+  @each $selector in $selectors {
+    @if index($filtered, $selector) == false {
+      $filtered: append($filtered, $selector);
+    }
+  }
+
+  // Build the selector string and output.
+  @each $selector in $filtered {
+    @if $selector-string != '' {
+      $selector-string: $selector-string + ", ";
+    }
+    $selector-string: $selector-string + $selector;
+  }
+
+  // If the weather is right, output that jacketed code!
+  @if $naked {
+    @content;
+  }
+  @if $selector-string != '' {
+    #{$selector-string} {
+      @content;
+    }
+  }
+}
+
+///////////////////////////////////////////////////////////
+// Jacket Context function
+// Takes a jacket value. Use when code inside a jacket
+// needs to know if a specific jacket value is set.
+///////////////////////////////////////////////////////////
+@function jacket-context($arg) {
+  @return if(index($jacket-context, $arg), true, false);
+}

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification
+name: jacket
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Rob Wierzbowski
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-05-20 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+description: Manage multiple css builds from a single stylesheet
+email:
+- hello@robwierzbowski.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- readme.md
+- lib/jacket.rb
+- stylesheets/_jacket.scss
+homepage: http://github.com/robwierzbowski/jacket
+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: '1.2'
+requirements: []
+rubyforge_project: jacket
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Jacket helps orgainze your stylesheets for a multi-context build process.
+  Write and maintain a master stylesheet, then output custom tailored stylesheets
+  for specific browsers, mobile/desktop sites, and app builds.
+test_files: []