jacket 0.1.1 → 0.1.2

data/lib/jacket.rb

@@ -4,7 +4,7 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('jacket', :path => extension_path)
 
 module Jacket
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
   DATE = "2013-05-20"
 end
 

data/readme.md

@@ -1,26 +1,28 @@
-## Jacket 
-### Dress appropriately
+# Jacket 
+
+**Dress your css appropriately.**
 
 Jacket is a Sass/Compass component that 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.
-
-### Installation
+output custom tailored stylesheets for specific browsers, mobile/desktop sites, and app builds.
 
-You can install Jacket from Rubygems:
+## Installation
 
-`gem install jacket`
+**With Ruby**
 
-with Bower:
+1. In Terminal: `gem install jacket`
+2. Require the gem in your config.rb  
+3. Import 'jacket' in your stylesheet.  
 
-`bower install jacket`
+**With Bower**
 
-or by downloading manually and requiring with Compass.
+1. In Terminal: `bower install jacket`  
+2. Add `extensions_dir: "[your Bower component directory]"` to config.rb  
+3. Import 'jacket' in your stylesheet.  
 
-### Usage
+## Basic Usage
 
-Write all code in a canonical stylesheet.
+Write your code in a master stylesheet.
 
 **style.scss**
 
@@ -28,7 +30,6 @@ Write all code in a canonical stylesheet.
 .rainy {
   // Universal rules
   font-size: 1rem;
-  width: 90%;
   
   // Styles for iOS only
   @include jacket(ios) {
@@ -36,7 +37,7 @@ Write all code in a canonical stylesheet.
     content: 'Double ristretto cortado, stat.';
   }
   // Styles for Android 2.x only
-  @include jacket(andr-2x) {
+  @include jacket(android-2x) {
     background-color: #baddad;
     content: 'I should get a new phone.';
   }
@@ -48,7 +49,7 @@ Write all code in a canonical stylesheet.
 }
 ```
 
-Then create stylesheets for each build, and tell Jacket what the weather is.
+Then create a stylesheet for each build context, and tell Jacket what the weather is.
 
 **style.ios.scss**
 
@@ -57,10 +58,9 @@ Then create stylesheets for each build, and tell Jacket what the weather is.
 $jacket: ios;
 @import 'style';
 
-// Compiled result
+// Compiles to
 .rainy {
   font-size: 1rem;
-  width: 90%;
   background-color: #c0ffee;
   content: 'Double ristretto cortado, stat.';
 }
@@ -70,13 +70,12 @@ $jacket: ios;
 
 ```scss
 // Set the weather 
-$jacket: andr-2x;
+$jacket: android-2x;
 @import 'style';
 
-// Compiled result
+// Compiles to
 .rainy {
   font-size: 1rem;
-  width: 90%;
   background-color: #baddad;
   content: 'I should get a new phone.';
 }
@@ -89,65 +88,111 @@ $jacket: andr-2x;
 $jacket: ie8;
 @import 'style';
 
-// Compiled result
+//Compiles to:
 .rainy {
   font-size: 1rem;
-  width: 90%;
   background-color: #000;
   content: 'Round three. FIGHT!';
 }
 ```
 
-You can set multiple comma separated contexts in `$jacket`.
+Now use an automated 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.
 
-**style.scss**
+## Advanced Usage
+
+You want to take it to the next level? Yeah, we have another level you can take it to.
+
+#### Wrapping selector
+
+Add a wrapping selector to a jacket context. Make sure to surround the selector with quotes.
 
 ```scss
-// Set the weather 
-$jacket: ios, andr-2x;
+.drizzle {
+  // universal styles
+  @include jacket(mackintosh) {
+    // macintosh styles
+  }
+}
+```
+
+**style.mackintosh.scss**
+
+```scss
+$jacket: mackintosh '.mack';
 @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.';
+// Compiles to 
+.drizzle {
+  // universal styles
+}
+.mack .drizzle {
+  // mackintosh styles
 }
 ```
 
-Or output a context wrapped in selectors, if that's your thing.
+#### Multiple contexts in one stylesheet
 
-**style.scss**
+Set multiple comma separated contexts in `$jacket`. If any context matches a value that jacket will be output.
 
 ```scss
-// Set the weather. Make sure to surround your selector with quotes.
-$jacket: ie8 '.ltie9';
+.thunderstorm {
+  // universal styles
+  @include jacket(anorak) {
+    // anorak styles
+  }
+  @include jacket(windbreaker) {
+    // windbreaker styles
+  }
+}
+```
+
+**style.wetandcold.scss**
+
+```scss
+$jacket: anorak, windbreaker;
 @import 'style';
 
-// Compiled result
-.rainy {
-  font-size: 1rem;
-  width: 90%;
+// Compiles to
+.thunderstorm {
+  // universal styles
+  // anorak styles
+  // windbreaker styles
 }
+```
 
-.ltie9 .rainy {
-  background-color: #000;
-  content: 'Round three. FIGHT!';
+#### Jackets that match multiple contexts
+
+Set multiple values for a single jacket mixin. If a context matches any value, the jacket will be output.
+
+```scss
+.soiree {
+  // universal styles
+  @include jacket(suit, coat, tie) {
+    // styles that should be used with any suit, coat, or tie
+  }
 }
 ```
+**style.tie.scss**
 
-Complex Jacket contexts like `$jacket: mdot, ie7 '.ltie9', ie8 'ltie9'` work just fine.
+```scss
+$jacket: tie;
+@import 'style';
+
+// Compiled result
+.soiree {
+  // universal styles
+  // styles that should be used with any suit, coat, or tie
+}
+```
 
-### Strut your stuff
+#### And more...
 
-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.
+Check out the [tests](https://github.com/Team-Sass/jacket/tree/master/test) for more examples, including condtional logic with nested jackets and a simple media query fallback mixin.
 
-### Todo
+## Todo
 
-1. Better documentation, including `jacket-context()` function.
-2. Remove `lib` and Compass dependencies when `list-separator()` lands in Sass.
+1. Document `jacket-context()` function.
+2. Set up automated testing framework.
+4. 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>
+<small>*Thanks to [Breakpoint](https://github.com/Team-Sass/breakpoint), who's no-query functionality inspired this project.*</small>

data/stylesheets/_jacket.scss

@@ -12,7 +12,7 @@
 // Settings variables
 ///////////////////////////////////////////////////////////
 
-// A list of jackets to print in the stylesheet.
+// A list of jacket contexts to print in the stylesheet.
 $jacket: null !default;
 
 // A private variable used by jacket-context().
@@ -29,16 +29,15 @@ $jckt-context: null;
   $filtered: ();
   $selector-string: '';
 
-  // Set the global $jacket-context variable.
+  // Set the global context variable.
   $jckt-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 jacket is a single context and selector list, encapsulate.
   @if list-separator($jacket) == 'space' {
     $jacket: $jacket, null;
   }
 
-  // Test if the stylesheet's $jacket variable and jacket mixin arguments match.
+  // Test if a jacket context and jacket value match.
   @each $item in $jacket {
     @if index($args, nth($item, 1)) {
 
@@ -52,15 +51,15 @@ $jckt-context: null;
     }
   }
 
-  // Filter out duplicate selectors. We can simplify if reject() is added to
-  // Sass.
+  // Filter out duplicate selectors.
+  // If reject() is added to Sass we can remove the $filtered holder variable.
   @each $selector in $selectors {
     @if index($filtered, $selector) == false {
       $filtered: append($filtered, $selector);
     }
   }
 
-  // Build the selector string and output.
+  // Build the selector string.
   @each $selector in $filtered {
     @if $selector-string != '' {
       $selector-string: $selector-string + ", ";

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jacket
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
   prerelease: 
 platform: ruby
 authors: