Merge branch 'master' of github.com:senchalabs/compass-recipes

LICENSE

@@ -1,3 +1,7 @@
-Copyright (c) 2010-2011 Maxime Thirouin
+Copyright © 2012 Maxime Thirouin
 
-http://creativecommons.org/licenses/by/3.0/
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,36 +1,35 @@
-# Compass Recipes ![project status](http://stillmaintained.com/MoOx/compass-recipes.png) #
+# Compass Recipes ![project status](http://stillmaintained.com/MoOx/compass-recipes.png)
 
-This project is a collection of Sass mixins using Compass that you can use or learn from.
+A series of Compass and Sass mixins and functions for creating delicious CSS effects.
 
 ## [Demos](http://moox.github.com/compass-recipes/)
 
-*This are demos of the repository at his current state. So it will be not reflection what is available into the last stable gem. To get what you see in the demos, see Installation to see how to install the repo at his current state*
+Note: These are demos of the repository at its current state, *not* the last stable gem. To get the most up-to-date recipes, please see Installation for instructions on installing the repo at his current state*
 
-## What do we have here ?
+## Types of Recipes
 
-* [backgrounds](http://moox.github.com/compass-recipes/recipes/background/) (patterns)
-* [bases](http://moox.github.com/compass-recipes/recipes/base/) (just normalize.css from @necolas for now)
-* [effects](http://moox.github.com/compass-recipes/recipes/effect/) (visual ones, not animations)
-* [form skins](http://moox.github.com/compass-recipes/recipes/form/skin/) (just one, feel free to pull news)
-* [icons](http://moox.github.com/compass-recipes/recipes/icon) recipes (just rules to use icons, not icons themselves)
-* [layout](http://moox.github.com/compass-recipes/recipes/layout) recipes
-* [media queries](http://moox.github.com/compass-recipes/recipes/media-queries) (predefined for commons devices width)
-* [shadows](http://moox.github.com/compass-recipes/recipes/shadow/) (funky ones)
-* [shapes](http://moox.github.com/compass-recipes/recipes/shape/) (geometrical ones, and some others fancy)
-* [shared](http://moox.github.com/compass-recipes/recipes/shared/) (commons stuffs like hacks or tricks)
-* [ui](http://moox.github.com/compass-recipes/recipes/ui/) (stuffs for UI - more incomming)
-
-* *more incomming (see [compass recipes issues](/MoOx/compass-recipes/issues)), feel free to make a pull request to add your own !!*
+* **[Backgrounds](http://moox.github.com/compass-recipes/recipes/background/)** - Background patterns, gradients.
+* **Color** Advanced color functions like `brightness()`
+* **[Effects](http://moox.github.com/compass-recipes/recipes/effect/)** - Visual effects like `bevel` and `cutout`
+* **[Form skins](http://moox.github.com/compass-recipes/recipes/form/skin/)** - Only one at the moment.
+* **[Icons](http://moox.github.com/compass-recipes/recipes/icon)** - Includes webfont icon support and a few open source fonts.
+* **[Layout](http://moox.github.com/compass-recipes/recipes/layout)** - Vertical centering and box layout shortcuts.
+* **[Media queries](http://moox.github.com/compass-recipes/recipes/media-queries)** - Predefined queries for common device widths. *Experimental: Uses `compass --pre`*
+* **[Shadows](http://moox.github.com/compass-recipes/recipes/shadow/)** - A wide collection of shadows which use pseudo elements to create fold effects, etc.
+* **[Shapes](http://moox.github.com/compass-recipes/recipes/shape/)** - Geometric and iconic shapes, created only with CSS
+* **[Shared](http://moox.github.com/compass-recipes/recipes/shared/)** - Common CSS tricks and hacks.
+* **[UI](http://moox.github.com/compass-recipes/recipes/ui/)** Element styling for buttons, etc.
+* View other potential items: http://moox.github.com/compass-recipes/issues/
 
 ## Installation
 
-[Compass-Recipes is now available as a gem on RubyGems.org](https://rubygems.org/gems/compass-recipes). So installation is quite easy.
+[Compass Recipes is available as a gem on RubyGems.org](https://rubygems.org/gems/compass-recipes), so installation is quite easy.
 
 ```shell
 gem install compass-recipes
 ```
 
-/!\ *If you want all latests recipes, you can just checkout the recipes (or download as zip) and add '{your-path-here-or-./}compass-recipes/stylesheets' using `additional_import_paths` or `add_import_path` (see [Compass configuration reference](http://compass-style.org/help/tutorials/configuration-reference/)*
+*If you want all latests recipes, you can just checkout the recipes (or download as zip) and add '{your-path-here-or-./}compass-recipes/stylesheets' using `additional_import_paths` or `add_import_path` (see [Compass configuration reference](http://compass-style.org/help/tutorials/configuration-reference/)*
 
 # Usage
 
@@ -66,14 +65,17 @@ Like Compass does, you can include all recipes in a folder like this
 }
 ```
 
-## Author
+## Authors/Maintainers
 
-Compass-Recipes is maintained by Maxime Thirouin, a front-end web developer working for Shopbot-inc.com
+Compass Recipes is maintained by [Maxime Thirouin](http://moox.fr), a front-end web developer at [Shopbot](http://shopbot-inc.com), and [David Kaneda](http://www.davidkaneda.com), creative director at [Sencha](http://www.sencha.com).
+
+### Sous Chefs
+
+While Maxime and David are the primary project maintainers, these people have provided lots of the core ideas and techniques in the recipes. They are the bacon in our BLT: [@simurai](http://twitter.com/simurai), [@chriscoyier](http://twitter.com/chriscoyier), [@leaverou](http://twitter.com/leaverou), [@necolas](http://twitter.com/necolas).
 
 ## Open to All
-Fork, modify, push, submit pull request ! That's easy !
 
-*I'm not a Ruby coder, so anyone which want to help me for anything will be appreciated !*
+If you have a nifty CSS trick that makes sense to be abstracted (and isn't already in another Github repo), please fork and submit a pull request. Note: If you are not the author of the CSS trick, you must get their permission before adding.
 
 ## Build Documentation
 
@@ -85,13 +87,17 @@ Then, to build the gh-pages from the `tests/`, you need to call
 
 ```bundle exec rake pages```
 
-## Thanks (indirect contributors)
+## Additional Resources
+
+Some other great CSS/SCSS/design projects for making delicious websites:
 
-This project will never exists without these people : @necolas, @simurai, @chriscoyier, @leaverou.
+* [Normalize](http://necolas.github.com/normalize.css/) - The standard of CSS normalizations.
+* [Subtle Patterns](http://subtlepatterns.com/) - Great collection of free background patterns, some of which are not possible with CSS alone.
+* [Animate.sass](https://github.com/adamstac/animate.sass) - A bevy of pre-defined keyframe animations.
+* [OMG Text](http://jaredhardy.com/omg-text/) - Some super-rad text effects using text-shadow
 
-They give me inspiration (and snippets of code!).
+## License
 
-## [MIT Licence](http://moox.mit-license.org/)
+Copyright (c) 2012 Maxime Thirouin
 
-##### Notes
-*Readme created using [Mou.app](http://mouapp.com/)*
+Released under [MIT Licence](http://moox.mit-license.org/)

VERSION

@@ -1 +1 @@
-0.2.0
+0.3.0.alpha.1

compass-recipes.gemspec

@@ -1,8 +1,8 @@
 # -*- encoding: utf-8 -*-
 
 Gem::Specification.new do |gemspec|
-  gemspec.version = "0.2.0"
-  gemspec.date = "2011-07-12"
+  gemspec.version = File.read(File.dirname(__FILE__) + '/VERSION').strip
+  gemspec.date = Date.today
 
   gemspec.name = "compass-recipes"
   gemspec.authors = ["Maxime Thirouin", "David Kaneda"]
@@ -18,8 +18,9 @@ Gem::Specification.new do |gemspec|
   gemspec.rubygems_version = "1.3.5" # same as compass
 
   gemspec.files = %w(README.md LICENSE VERSION)
-  gemspec.files += Dir.glob("lib/*.*")
+  gemspec.files += Dir.glob("fonts/**/*.*")
+  gemspec.files += Dir.glob("lib/**/*.*")
   gemspec.files += Dir.glob("stylesheets/**/*.*")
 
-  gemspec.add_dependency("compass", [">= 0.11.5"])
+  gemspec.add_dependency("compass", [">= 0.11.7"]) # latest version of compass
 end

stylesheets/recipes/_background.scss

@@ -4,4 +4,12 @@
 @import "recipes/background/radial-overlay";
 @import "recipes/background/striped";
 @import "recipes/background/tartan";
-@import "recipes/background/carbon-fiber";
+@import "recipes/background/carbon-fiber";
+@import "recipes/background/stripes";
+@import "recipes/background/cicada";
+@import "recipes/background/tablecloth";
+@import "recipes/background/lined-paper";
+@import "recipes/background/madras";
+@import "recipes/background/checkerboard";
+@import "recipes/background/houndstooth";
+@import "recipes/background/polka-dot";

stylesheets/recipes/_color.scss

@@ -1,13 +1,10 @@
 /**
  *
+ * @class Color
  * @author David Kaneda - http://www.davidkaneda.com
  *
  */
 
-/**
- * @class Color
- */
-
 /**
  * Returns the brightness (out of 100) of a specified color.
  * @todo explain why this is useful
@@ -20,6 +17,7 @@
     $b: blue($color) / 255 * 100;
 
     $brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
     @return $brightness;
 }
 
@@ -39,21 +37,26 @@
 
 /**
  * Returns the luminosity for a specified color
- * @todo explain why this is useful
  * @param {color} The color to check
  * @return {measurement}
  */
 @function luminosity($color) {
     $r: color-luminance(red($color) / 255);
     $g: color-luminance(green($color) / 255);
     $b: color-luminance(blue($color) / 255);
-
-    @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+    $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+    @debug 'luminosity for ' + $color + ' is ' + $l;
+    @return $l;
 }
 
-@function contrast-ratio($c1, $c2) {
-    $l1: luminosity($c1);
-    $l2: luminosity($c2);
+/**
+ * Returns the contrast ratio between two colors
+ * @param {color1} The color to check
+ * @return {measurement}
+ */
+@function contrast-ratio($color1, $color2) {
+    $l1: luminosity($color1);
+    $l2: luminosity($color2);
 
     @if $l2 > $l1 {
         @return $l2 / $l1;
@@ -63,7 +66,7 @@
 }
 
 @function get-color-mode($color) {
-    @if brightness($color) > 50 {
+    @if brightness($color) > 55 {
         @return light;
     } @else {
         @return dark;
@@ -132,7 +135,7 @@
     }
 }
 
-@mixin color-by-background($bg-color, $contrast: $default-text-contrast, $default-color: false, $inset-text: true) {
+@mixin color-by-background($bg-color, $contrast: $default-text-contrast, $default-color: false, $inset-text: false) {
     @if $default-color {
         color: color-by-background(hsla(hue($default-color), saturation($default-color), lightness($bg-color), opacity($bg-color)), $contrast);
     } @else {
@@ -155,6 +158,19 @@
     @include text-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
 }
 
+@function hsv-to-rgb($color) {
+    $r: red($color) / 255;
+    $g: green($color) / 255;
+    $b: blue($color) / 255;
+    $a: opacity($color);
+}
+
+// @debug hsv(rgba(#3E87E3, .5));
+
+@function brighten($color, $amount) {
+    $current_brightness: brightness($color);
+}
+
 $base-color: blue !default;
 $neutral-color: #ccc !default;
 $highlight-color: darken(safe-saturate($base-color, 15), 5) !default;

stylesheets/recipes/_webfont-icon.scss

@@ -135,25 +135,41 @@ $webfont-icon-default-gradient: matte !default;
     $gradient-active: recessed,
 
     $include-states: true,
-    $hidetext: true
+    $hide-text: true,
+    $text-align: right,
+    $text-spacing: 4px
 ) {
     @include background-clip(text);
     overflow: visible;
     position: relative;
-    height: $size;
     display: inline-block;
     line-height: $size;
-    text-indent: -9000px;
-    width: $size;
+
+    @if $hide-text == true {
+        text-indent: -9000px;  
+        width: $size;
+        height: $size;
+    } @else {
+        @if $text-align == right {
+            padding-left: $size + $text-spacing;
+        } @else {
+            padding-right: $size + $text-spacing;
+        }
+    }
 
     @if $stroke {
         -webkit-text-stroke: if($stroke == true, darken($color, 10), $stroke);
     }
     &:after, &:before {
         @extend .webfont-icon-#{$class};
+
+        @if ($hide-text != true and $text-align == left) {
+            left: auto;
+            right: 0;
+        }
+
         font-size: $size;
         content: $character;
-
 
         @include background-gradient($color, $gradient);
     }
@@ -168,6 +184,7 @@ $webfont-icon-default-gradient: matte !default;
             @if $stroke-hover and $stroke {
                 -webkit-text-stroke: $stroke-hover;
             }
+            color: $color-hover;
 
             &:before {
                 @include text-shadow($shadow, $glow-hover);
@@ -180,6 +197,7 @@ $webfont-icon-default-gradient: matte !default;
             @if $stroke-active and $stroke {
                 -webkit-text-stroke: $stroke-active;
             }
+            color: $color-active;
             &:before {
                 @include text-shadow($shadow, $glow-active);
             }

stylesheets/recipes/background/_carbon-fiber.scss

@@ -17,13 +17,13 @@ $base-color: #222 !default;
     $dot-color: scale-lightness($background-color, -50),
     $highlight-color: rgba(#fff, .1),
     $spacing-size: 16px,
-    $dot-size: 2px
+    $dot-size: 12.5%
 ) {
     @include background-image(
-        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
-        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
-        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px),
-        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px)
+        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size),
+        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size),
+        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size),
+        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size)
     );
 
     background-repeat: repeat;

stylesheets/recipes/background/_checkerboard.scss

@@ -0,0 +1,61 @@
+/**
+ * Checkerboard background pattern
+ *
+ * @link http://lea.verou.me/css3patterns/#checkerboard
+ * @link http://lea.verou.me/css3patterns/#diagonal-checkerboard
+ *
+ * @author Lea Verou http://lea.verou.me/ for the original pattern
+ * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
+ */
+
+@import "compass/css3/images";
+
+@mixin background-checkerboard($bg-color: #eee, $box-color:  black, $size: 60px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        ),
+        linear-gradient(
+            45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        )
+    );
+    background-size: $size $size;
+    background-position: 0 0, ($size / 2) ($size / 2);
+}
+
+
+@mixin background-checkerboard-diagonal($bg-color: #eee, $box-color:  black, $size: 60px) {
+    $transparent: rgba(black, 0);
+    background-color: $bg-color;
+    @include background-image(
+        linear-gradient(
+            45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        ),
+        linear-gradient(
+            -45deg,
+            $box-color 25%,
+            $transparent 25%,
+            $transparent 75%,
+            $box-color 75%,
+            $box-color
+        )
+    );
+    background-size:$size $size;
+}