bourbon 0.1.7 → 0.1.8

data/app/assets/stylesheets/_bourbon.scss

@@ -19,5 +19,6 @@
 
 // Addons & other mixins
 @import "addons/button";
+@import "html5-input-types";
 @import "addons/position";
 @import "addons/timing-functions";

data/app/assets/stylesheets/addons/_html5-input-types.scss

@@ -0,0 +1,44 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$list-count: 0;
+$unquoted-inputs-list: false;
+
+@each $input-type in $inputs-list {
+  @if $list-count == 0 {
+    $unquoted-inputs-list: unquote($input-type);
+    $list-count: $list-count + 1;
+  }
+
+  @else if $list-count > 0 {
+    $unquoted-inputs-list: join($unquoted-inputs-list, unquote($input-type), comma);
+  }
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+//    #{$all-text-inputs}, textarea {
+//      border: 1px solid green;
+//    }

data/readme.md

@@ -1,24 +1,24 @@
-#Bourbon Sass Mixins
-The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
+# Bourbon Sass Mixins
+The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible, meaning they should not deter from the original CSS syntax.
+The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
 Bourbon uses SCSS syntax.
 
-#Requirements
+# Requirements
 Sass 3.1+
 
-
-#Install for Rails
+# Install for Rails
 Update your Gemfile
 
     gem 'bourbon'
 
-    bundle install
+    $ bundle install
 
-##Rails 3.1.x
+## Rails 3.1.x
 Rename application.css to application.css.scss
 
     mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
 
-Bourbon needs the sass files to be imported in a specific order to function properly—therefore you will need to disabled the require_tree sprocket directive.
+Bourbon needs the sass files to be imported in a specific order to function properly. Therefore, you will need to disabled the require_tree sprocket directive.
 Delete the following sprocket directive in application.css.scss
 
     *= require_tree .
@@ -27,14 +27,14 @@ Import bourbon at the beginning of application.css.scss
 
     @import "bourbon";
 
-Import all additional stylesheets from your app/assets/stylsheets directory underneath the bourbon import
+Import all additional stylesheets from your app/assets/stylesheets directory underneath the bourbon import
 
     @import "bourbon";
     @import "home";
     @import "users";
 
-##Rails 3.0.9 and below
-For Rails < 3.1 you must run the installation rake task. Please note, you should run this task everytime a new version of Bourbon is released.
+## Rails 3.0.9 and below
+For Rails < 3.1 you must run the installation rake task. Please note, you should run this task every time a new version of Bourbon is released.
 This will copy the Sass files into your project's public/stylesheets/sass directory.
 
     rake bourbon:install
@@ -44,7 +44,7 @@ Import the mixins at the beginning of your stylesheet
     @import 'bourbon/bourbon';
 
 
-#Install without Rails
+# Install without Rails
 The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails.
 Preliminary step: clone this repo and cd into the directory.
 
@@ -64,8 +64,11 @@ Preliminary step: clone this repo and cd into the directory.
     # Example (project root directory)
     sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
 
+In this case as well, you will need to import the mixins at the beginning of your stylesheet
+
+    @import 'bourbon/bourbon';
 
-#Browser support
+# Browser support
 Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
 **Pull requests:** A general rule when considering a new mixin: Do the following browsers *only* support the CSS3 property using vendor specific prefixes? If the answer is yes, there is a high chance the mixin will be accepted via a pull request.
 
@@ -75,14 +78,16 @@ Bourbon aims to provide support for CSS3 properties that are not yet fully suppo
 * Opera 10+
 * IE 9+
 
-Bourbon does not intend to support IE filters.
+*Bourbon does not intend to support IE filters.*
+
+Resources for checking browser support: [MDN - Moz Dev Network](https://developer.mozilla.org/en-US/), [Mozilla CSS Extensions](https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions), [Webkit CSS Properties](http://css-infos.net/properties/webkit.php), [Firefox CSS Properties](http://css-infos.net/properties/firefox.php), [MSDN - Microsoft Dev Network](http://msdn.microsoft.com/en-us/library/ms531207(v=VS.85).aspx)
 
 
-#Using Bourbon Mixins
+# Using Bourbon Mixins
 Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.
 
 
-###Animation
+### Animation
 
 The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
 
@@ -94,9 +99,9 @@ The animation mixins support comma separated lists of values, which allows diffe
     @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
 
 
-###Background-image
+### Background-image
 
-The background-image mixin is helpful for chaining multiple comma deliminated background images and/or linear-gradients into one background-image property.Background-image supports up to 10 background-images.
+The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear-gradients into one background-image property. background-image supports up to 10 background-images.
 
     # Multiple image assets
     @include background-image(url("/images/a.png"), url("images/b.png"));
@@ -108,32 +113,32 @@ The background-image mixin is helpful for chaining multiple comma deliminated ba
     @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) );
 
 
-###Border Radius
+### Border Radius
 
-Border-radius will also take short-hand notation.
+border-radius will also take short-hand notation.
 
     @include border-radius(10px);
     @include border-radius(5px 5px 2px 2px);
 
 
-###Box Shadow
+### Box Shadow
 
-Box-Shadow supports single or multiple arguments:
+box-shadow supports single or multiple arguments:
 
     @include box-shadow(1px 1px 2px 0 #ff0000);
 
-    # Multiple arguments must be comma-diliminated.
+    # Multiple arguments must be comma-delimited.
     @include box-shadow(1px 1px 2px 0 #fff0000, -1px -2px 0 #ccc);
 
 
-###Box Sizing
+### Box Sizing
 
 Box-sizing will change the box-model of the element it is applied to.
 
     @include box-sizing(border-box);
 
 
-###Flex Box
+### Flex Box
 
 The flex-box mixin is based on the 2009 w3c spec. The mixin with change to the flexible box-model. [More info.](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
 
@@ -154,14 +159,14 @@ The flex-box mixin is based on the 2009 w3c spec. The mixin with change to the f
     }
 
 
-###Inline-block
+### Inline-block
 
 The inline-block mixin provides support for the inline-block property in IE6 and IE7.
 
     @include inline-block;
 
 
-###Linear-Gradient
+### Linear-Gradient
 
 Gradient position is optional, default is top. Position can be a degree. Color-stops are optional as well. Mixin will support up to 10 gradients.
 
@@ -170,7 +175,7 @@ Gradient position is optional, default is top. Position can be a degree. Color-s
     @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
 
 
-###Position
+### Position
 
 Shorthand notation for setting the position of elements in your page.
 
@@ -186,10 +191,10 @@ You can write:
 
 The first parameter is optional, with a default value of relative. The second parameter is a space delimited list of values that follow the standard CSS shorthand notation.
 
-Note: unitless values will be ignored. In the example above, this means that selectors will not be generated for the right and bottom positions, while the top position is set to 0px.
+Note: unit-less values will be ignored. In the example above, this means that selectors will not be generated for the right and bottom positions, while the top position is set to 0px.
 
 
-###Radial-Gradient
+### Radial-Gradient
 
 Takes up to 10 gradients. Position and shape are required.
 
@@ -197,30 +202,30 @@ Takes up to 10 gradients. Position and shape are required.
     @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
 
 
-###Transform & Transform-origin
+### Transform & Transform-origin
 
     @include transform(translateY(50px));
     @include transform-origin(center top);
 
 
-###Transitions
+### Transitions
 
-Shorthand mixin: Supports multiple parentheses-deliminated values for each variable.
+Shorthand mixin: Supports multiple parentheses-delimited values for each variable.
 
     @include transition (all, 2.0s, ease-in-out);
     @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
     @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));`
 
 
-##Functions
-###Compact
+## Functions
+### Compact
 
 The compact function will strip out any value from a list that is 'false'. Takes up to 10 arguments.
 
     $full:  compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
 
 
-###Golden Ratio
+### Golden Ratio
 
 Returns the golden ratio of a given number. Must provide a Pixel or Em value for first argument. Also takes a required increment value that is not zero and an integer: ...-3, -2, -1, 1, 2, 3...
 
@@ -239,9 +244,9 @@ Returns the golden ratio of a given number. Must provide a Pixel or Em value for
 Resources: [modularscale.com](http://modularscale.com) & [goldenratiocalculator.com](http://goldenratiocalculator.com)
 
 
-###Linear-gradient
+### Linear-gradient
 
-Outputs a linear-gradient. Use in conjuntion with the background-image mixin. The function takes the same arguments as the linear-gradient mixin (See Mixins section of this README).
+Outputs a linear-gradient. Use in conjunction with the background-image mixin. The function takes the same arguments as the linear-gradient mixin (See Mixins section of this README).
 
     # Image asset with a linear-gradient
     @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
@@ -250,9 +255,9 @@ Outputs a linear-gradient. Use in conjuntion with the background-image mixin. Th
     @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) );
 
 
-###Grid-width
+### Grid-width
 
-Easily setup and follow a grid based design. Need help gridding? Check out [gridulator.com](http://gridulator.com/)
+Easily setup and follow a grid based design. Need help busting a move grid-style?!? Check out [gridulator.com](http://gridulator.com/)
 
     # The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
     $gw-column: 100px;          // Column Width
@@ -264,7 +269,7 @@ Easily setup and follow a grid based design. Need help gridding? Check out [grid
     }
 
 
-###Tint & Shade
+### Tint & Shade
 
 Tint & shade are different from lighten() and darken() functions built into sass.
 Tint is a mix of a color with white. Tint takes a color and a percent argument.
@@ -280,9 +285,9 @@ Shade is a mix of a color with black. Shade takes a color and a percent argument
     }
 
 
-##Add-ons
+## Add-ons
 
-###Buttons
+### Buttons
 
 The button add-on provides well-designed buttons with a single line in your CSS.
 The mixin supports a style parameter and an optional color argument. The available styles are **"simple"** (default), **"shiny"**, and **"pill"**.
@@ -305,7 +310,27 @@ Create beautiful buttons by defining a style and color argument; using a single
     }
 
 
-###Timing functions
+### HTML5 Input Types
+This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea.
+In other words, it allows for easy targeting of all inputs that mimick input[type="text"].
+
+    input[type="*"]
+    * = [color, date, datetime, datetime-local, email, month, number, password, search, tel, text, time, url, week]
+
+
+Usage Note: You must use interpolation with the variable.
+
+    #{$all-text-inputs}, textarea {
+      border: 1px solid green;
+    }
+
+    Output:
+    input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea {
+      border: 1px solid green;
+    }
+
+
+### Timing functions
 These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations. The provided timing functions are the same as the jQuery UI demo: [easing functions](http://jqueryui.com/demos/effect/easing.html).
 
     Variables supported: $ease-in-*, $ease-out-*, $ease-in-out-*
@@ -315,7 +340,7 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
     @include animation-basic(fade-in, 1s, $ease-in-quad);
 
 
-#All Supported Functions, Mixins, and Addons
+# All Supported Functions, Mixins, and Addons
 *@ denotes a mixin and must be prefaced with @include*
 
     #Functions
@@ -374,11 +399,12 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
     #Addons
     --------------------------------
     @ button(*args)
+      #{$all-text-inputs}
     @ position(*args)
       timing-functions ($ease-in-*, $ease-out-*, $ease-in-out-*)
 
 
-##Help Out
+## Help Out
 
 Currently the project is a work in progress. Feel free to help out.
 **Pull requests:** See *Browser Support* in this readme for more info

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bourbon
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
   prerelease: 
 platform: ruby
 authors:
@@ -11,11 +11,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-09-07 00:00:00.000000000Z
+date: 2011-09-23 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70185428679680 !ruby/object:Gem::Requirement
+  requirement: &70113739938740 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -23,7 +23,7 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70185428679680
+  version_requirements: *70113739938740
 description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
   framework of
 
@@ -51,6 +51,7 @@ files:
 - Rakefile
 - app/assets/stylesheets/_bourbon.scss
 - app/assets/stylesheets/addons/_button.scss
+- app/assets/stylesheets/addons/_html5-input-types.scss
 - app/assets/stylesheets/addons/_position.scss
 - app/assets/stylesheets/addons/_timing-functions.scss
 - app/assets/stylesheets/css3/_animation.scss