jacket 0.1.3 → 0.1.4

data/lib/jacket.rb

@@ -4,8 +4,8 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('jacket', :path => extension_path)
 
 module Jacket
-  VERSION = "0.1.3"
-  DATE = "2013-05-20"
+  VERSION = "0.1.4"
+  DATE = "2013-07-07"
 end
 
 module Sass::Script::Functions

data/readme.md

@@ -1,13 +1,13 @@
 # Jacket 
 
-**Dress your css appropriately.**
+**Conditional Styles with Sass. Dress you 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.
+Jacket is a Compass component that prints and hides styles based on context variables you set in your stylesheet. Write and maintain a master stylesheet, then output custom tailored stylesheets for modern and legacy browsers, site and app builds, or any other context you can think of.
 
 ## Installation
 
+Until Sass 3.3 is released Jacket requires Compass.
+
 **With Ruby**
 
 1. In Terminal: `gem install jacket`
@@ -17,182 +17,140 @@ output custom tailored stylesheets for specific browsers, mobile/desktop sites,
 **With Bower**
 
 1. In Terminal: `bower install jacket`  
-2. Add `extensions_dir: "[your Bower component directory]"` to config.rb  
+2. Add `extensions_dir = "[your Bower component directory]"` to config.rb  
 3. Import 'jacket' in your stylesheet.  
 
 ## Basic Usage
 
-Write your code in a master stylesheet.
+### The jacket() mixin
 
-**style.scss**
+Use the jacket mixin to conditionally output blocks of code. If any context matches a context in the `$jacket` variable, your conditional code will be output. If the context has a wrapping selector associated with it, the code block will be wrapped in the wrapping selector.
 
 ```scss
-.rainy {
-  // Universal rules
-  font-size: 1rem;
-  
-  // Styles for iOS only
-  @include jacket(ios) {
-    background-color: #c0ffee;
-    content: 'Double ristretto cortado, stat.';
-  }
-  // Styles for Android 2.x only
-  @include jacket(android-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!';
-  }
+jacket($contexts...) {
+  // Conditional code
 }
 ```
 
-Then create a stylesheet for each build context, and tell Jacket what the weather is.
+### The jacket() function
 
-**style.ios.scss**
+Use the jacket function to conditionally output values. If any context matches a context in the `$jacket` variable, the value will be output.
 
 ```scss
-// Set the weather 
-$jacket: ios;
-@import 'style';
-
-// Compiles to
-.rainy {
-  font-size: 1rem;
-  background-color: #c0ffee;
-  content: 'Double ristretto cortado, stat.';
-}
+property: jacket($value, $contexts...);
 ```
 
-**style.android-2x.scss**
+### The $jacket variable
 
-```scss
-// Set the weather 
-$jacket: android-2x;
-@import 'style';
+Use the `$jacket` variable to set a stylesheet's context. Each context can have an optional wrapping selector.
 
-// Compiles to
-.rainy {
-  font-size: 1rem;
-  background-color: #baddad;
-  content: 'I should get a new phone.';
-}
 ```
-
-**style.ie.scss**
-
-```scss
-// Set the weather 
-$jacket: ie8;
-@import 'style';
-
-//Compiles to:
-.rainy {
-  font-size: 1rem;
-  background-color: #000;
-  content: 'Round three. FIGHT!';
-}
+$jacket: context, context '.wrapping-selector', context;
 ```
 
-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.
 
-## Advanced Usage
-
-You want to take it to the next level? Yeah, we have another level you can take it to.
+### Examples
 
-#### Wrapping selector
+Write your code in a master stylesheet.
 
-Add a wrapping selector to a jacket context. Make sure to surround the selector with quotes.
+**style.scss**
 
 ```scss
-.drizzle {
-  // universal styles
-  @include jacket(mackintosh) {
-    // mackintosh styles
-  }
+.example {
+  // Universal rules
+  font-size: 1rem;
+  padding:0 20px;
 }
 ```
 
-**style.mackintosh.scss**
+Add context specific code wrapped in the jacket mixin or the jacket function. If any jacket mixin context matches a value in the `$jacket` variable, the code will be output.
 
 ```scss
-$jacket: mackintosh '.mack';
-@import 'style';
-
-// Compiles to 
-.drizzle {
-  // universal styles
-}
-.mack .drizzle {
-  // mackintosh styles
-}
-```
-
-#### Multiple contexts in one stylesheet
-
-Set multiple comma separated contexts in `$jacket`. If any context matches a value that jacket will be output.
+.example {
+  // Universal rules
+  font-size: 1rem;
+  padding:0 20px;
 
-```scss
-.thunderstorm {
-  // universal styles
-  @include jacket(anorak) {
-    // anorak styles
+  // Conditional styles for an ie8 stylesheet
+  @include jacket(ie8) {
+    float: left;
   }
-  @include jacket(windbreaker) {
-    // windbreaker styles
+
+  // Conditional styles for an iOS and android app build of the stylesheet
+  @include jacket(ios, android) {
+    background-color: #c0ffee;
   }
+
+  line-height: jacket(1.5, ios, site) jacket(1.3, android);
 }
 ```
 
-**style.wetandcold.scss**
+Then create a stylesheet for each build context, and tell Jacket what the weather is.
+
+**style.ios.scss**
 
 ```scss
-$jacket: anorak, windbreaker;
+$jacket: ios;
 @import 'style';
 
 // Compiles to
-.thunderstorm {
-  // universal styles
-  // anorak styles
-  // windbreaker styles
+.example {
+  font-size: 1rem;
+  padding: 0 20px;
+  background-color: #c0ffee;
+  line-height: 1.5;
 }
 ```
 
-#### Jackets that match multiple contexts
-
-Set multiple values for a single jacket mixin. If a context matches any value, the jacket will be output.
+**style.android.scss**
 
 ```scss
-.soiree {
-  // universal styles
-  @include jacket(suit, coat, tie) {
-    // styles that should be used with any suit, coat, or tie
-  }
+// Set the weather 
+$jacket: android;
+@import 'style';
+
+// Compiles to
+.example {
+  font-size: 1rem;
+  padding: 0 20px;
+  background-color: #c0ffee;
+  line-height: 1.3;
 }
 ```
-**style.tie.scss**
+
+**style.ie8.scss**
 
 ```scss
-$jacket: tie;
+$jacket: ie8 '.ie8';
 @import 'style';
 
-// Compiled result
-.soiree {
-  // universal styles
-  // styles that should be used with any suit, coat, or tie
+//Compiles to:
+.example {
+  font-size: 1rem;
+  padding: 0 20px;
+}
+.ie8 .example {
+  float: left;
 }
 ```
 
-#### And more...
+Now you can serve these custom tailored stylesheets to the correct context with conditional comments, an automated build process, or some javascript. Not too much, not too little. Those stylesheets are lookin' good.
+
+## Advanced Usage
 
 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
+## Contribute
+
+Report bugs and feature proposals in the [Github issue tracker](https://github.com/Team-Sass/jacket/issues). In lieu of a formal styleguide, take care to maintain the existing coding style. 
+
+## Release History
+
+0.1.4, July 7, 2013: Add jacket() function, rewrite docs and tests.
+0.1.0, April 21, 2013: Initial release.
+
+## License
 
-1. Document `jacket-context()` function.
-2. Set up automated testing framework.
-4. Remove `lib` and Compass dependencies when `list-separator()` lands in Sass.
+[BSD-NEW](http://en.wikipedia.org/wiki/BSD_License)
 
 <small>*Thanks to [Breakpoint](https://github.com/Team-Sass/breakpoint), who's no-query functionality inspired this project.*</small>

data/stylesheets/_jacket.scss

@@ -1,28 +1,29 @@
 ///////////////////////////////////////////////////////////
 // Jacket
-// Dress appropriately
+// Conditional Styles with Sass. Dress you 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.
+// Jacket is a Compass component that prints and hides styles based on
+// context variables you set in your stylesheet. Write and maintain a master
+// stylesheet, then output custom tailored stylesheets for modern and legacy
+// browsers, site and app builds, or any other context you can think of.
 
 ///////////////////////////////////////////////////////////
 // Settings variables
 ///////////////////////////////////////////////////////////
 
-// A list of jacket contexts to print in the stylesheet.
+// Default list of jacket contexts.
 $jacket: null !default;
 
-// A private variable used by jacket-context().
+// Private variable used by jacket-context().
 $jckt-context: null;
 
 ///////////////////////////////////////////////////////////
 // Jacket mixin
-// Takes a list of jacket values.
+// Takes a list of jacket contexts.
+// Outputs a block of styles if a context is set.
 ///////////////////////////////////////////////////////////
-@mixin jacket($args...) {
+@mixin jacket($contexts...) {
 
   $naked: false;
   $selectors: ();
@@ -30,7 +31,7 @@ $jckt-context: null;
   $selector-string: '';
 
   // Set the global context variable.
-  $jckt-context: $args;
+  $jckt-context: $contexts;
 
   // If jacket is a single context and selector list, encapsulate.
   @if list-separator($jacket) == 'space' {
@@ -39,8 +40,8 @@ $jckt-context: null;
 
   // Test if a jacket context and jacket value match.
   @each $item in $jacket {
-    @each $arg in $args {
-      @if index($arg, nth($item, 1)) {
+    @each $context in $contexts {
+      @if index($context, nth($item, 1)) {
 
         // Gather wrapping selectors.
         @if length($item) == 1 {
@@ -80,11 +81,32 @@ $jckt-context: null;
   }
 }
 
+///////////////////////////////////////////////////////////
+// Jacket function
+// Takes a list of jacket contexts.
+// Outputs a value if a context is set.
+///////////////////////////////////////////////////////////
+@function jacket($value, $contexts...) {
+
+  @each $item in $jacket {
+    @each $context in $contexts {
+      @if index($context, nth($item, 1)) {
+        // If the weather is right, return the value!
+        @return $value;
+      }
+    }
+  }
+
+  // Else return null. If null is the only value for a selector, the selector
+  // will not be printed.
+  @return null;
+}
+
 ///////////////////////////////////////////////////////////
 // Jacket Context function
-// Takes a jacket value. Use when code inside a jacket
-// needs to know if a specific jacket value is set.
+// Takes a jacket context value. Use when code inside a jacket
+// needs to know if a specific jacket context is set.
 ///////////////////////////////////////////////////////////
-@function jacket-context($arg) {
-  @return if(index($jckt-context, $arg), true, false);
+@function jacket-context($context) {
+  @return if(index($jckt-context, $context), true, false);
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jacket
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-20 00:00:00.000000000 Z
+date: 2013-07-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass