compass-recipes 0.3.0.alpha.1 → 0.3.0.alpha.2

data/README.md

@@ -2,9 +2,11 @@
 
 A series of Compass and Sass mixins and functions for creating delicious CSS effects.
 
+_Compass Recipes is currently under active development. While it's being already used on multiple projects (even in production), you may encounter some issues. Please try it out in a project, and [make suggestions](https://github.com/MoOx/compass-recipes/issues/new) or [report bugs](https://github.com/MoOx/compass-recipes/issues) ! Your feedback matters._
+
 ## [Demos](http://moox.github.com/compass-recipes/)
 
-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*
+_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_
 
 ## Types of Recipes
 
@@ -12,7 +14,7 @@ Note: These are demos of the repository at its current state, *not* the last sta
 * **Color** Variables Names & 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.
+* **[Icon Fonts](http://moox.github.com/compass-recipes/recipes/icon-fonts)** - Includes icon fonts helper 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 `sass --pre`*
 * **[Shadows](http://moox.github.com/compass-recipes/recipes/shadow/)** - A wide collection of shadows which use pseudo elements to create fold effects, etc.
@@ -34,17 +36,17 @@ Note: These are demos of the repository at its current state, *not* the last sta
 More informations on the [Wiki](https://github.com/MoOx/compass-recipes/wiki)*
 
 
-# Usage
+## Usage
 
 When compass-recipes installed, you just need to require the compass plugin in your project
 
-```css
+```ruby
 require 'compass-recipes'
 ```
 
 Then you can include some recipes like this
 
-```css
+```scss
 @import "recipes/shape/triangle";
 .my-triangle
 {
@@ -54,7 +56,7 @@ Then you can include some recipes like this
 
 Like Compass does, you can include all recipes in a folder like this
 
-```css
+```scss
 @import "recipes/shape";
 
 .my-triangle
@@ -68,31 +70,27 @@ Like Compass does, you can include all recipes in a folder like this
 }
 ```
 
-## Authors/Maintainers
+## Support/Community
 
-Compass Recipes is maintained by [Maxime Thirouin](http://moox.fr), a french front-end web developer, and [David Kaneda](http://www.davidkaneda.com), creative director at [Sencha](http://www.sencha.com).
+Compass Recipes has for now a little community because this projet is (for now) only at the beginning.
 
-### Recurrent Contributors
+[@Compass_Recipes](https://twitter.com/#!/Compass_Recipes) on _Twitter_ is a great place to ask very short questions that you want answered quickly.
 
-* [@canarymason](https://github.com/canarymason)
+There is also an IRC channel, **#compass-recipes** on _irc.freenode.net_.
 
-### Sous Chefs
-
-While Maxime and David are the primary project maintainers, most of the core ideas and techniques in the recipes are not from them.
-
-Credits & Thanks:
-
-* [@chriscoyier](https://github.com/chriscoyier) (shapes & lots of tricks)
-* [@leaverou](https://github.com/leaverou) (backgrounds patterns)
-* [@necolas](https://github.com/necolas) (normalize & tricks)
-* [@simurai](https://github.com/simurai) (awesomes design stuffs)
-* All of the people who contribute to the recipes (all names are in each recipes)
+Feel free to ping @MoOx if he’s there to get his attention quickly. If there’s no one on **#compass-recipes**, you can try the **#compass** or maybe the **#sass** channel on IRC.
 
+If you have a longer question (or no one’s around on IRC at the moment), the Sass Google group is a great place to go. You’ll usually get a response within a couple hours or so.
 
 ## Open to All
 
 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.
 
+## Fonts
+
+All fonts are repackaged using [Fontsquirrel](http://www.fontsquirrel.com/fontface/generator).
+Licences are distributed with the fonts.
+
 ## Build Documentation
 
 *You do not need to build documentation for testing your recipes.*
@@ -108,20 +106,35 @@ Then, to build the gh-pages from the `tests/`, you need to call
 
 This process create the pages & push them to your gh-pages branch.
 
-## Fonts
+## Authors/Maintainers
 
-All fonts are repackaged using [Fontsquirrel](http://www.fontsquirrel.com/fontface/generator).
-Licences are distributed with the fonts.
+Compass Recipes is maintained by [Maxime Thirouin](http://moox.fr), a french front-end web developer, and [David Kaneda](http://www.davidkaneda.com), creative director at [Sencha](http://www.sencha.com).
+
+### Recurrent Contributors
+
+* [@canarymason](https://github.com/canarymason)
+
+#### Sous Chefs
+
+While Maxime and David are the primary project maintainers, most of the core ideas and techniques in the recipes are not from them.
+
+Credits & Thanks:
+
+* [@chriscoyier](https://github.com/chriscoyier) (shapes & lots of tricks)
+* [@leaverou](https://github.com/leaverou) (backgrounds patterns)
+* [@necolas](https://github.com/necolas) (normalize & tricks)
+* [@simurai](https://github.com/simurai) (awesomes design stuffs)
+* All of the people who contribute to the recipes (all names are in each recipes)
 
-## Additional Resources
+### Additional Resources
 
 Some other great CSS/SCSS/design projects for making delicious websites:
 
-* [Normalize](http://necolas.github.com/normalize.css/) - The standard of CSS normalizations. (included as a recipe)
 * [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
 
+
 ## License
 
 Copyright (c) 2012 Maxime Thirouin

data/VERSION

@@ -1 +1 @@
-0.3.0.alpha.1
+0.3.0.alpha.2

data/lib/compass-recipes/sass_extensions.rb

@@ -2,7 +2,7 @@
 # Sass extensions for Compass Recipes
 ##
 
-%w(_error background_noise gravatar highres math).each do |lib|
+%w(_error background_noise gravatar math).each do |lib|
   require File.join(File.dirname(__FILE__), 'sass_extensions', lib)
 end
 

data/stylesheets/_recipes.scss

@@ -1,13 +1,16 @@
-@import "recipes/google-webfont";
+@import "recipes/animation";
 @import "recipes/background";
 @import "recipes/base";
 @import "recipes/color";
 @import "recipes/effect";
+@import "recipes/font";
 @import "recipes/form";
+@import "recipes/google-webfont";
+@import "recipes/icon-font";
+@import "recipes/icons";
 @import "recipes/layout";
 @import "recipes/media-queries";
 @import "recipes/shadow";
 @import "recipes/shape";
 @import "recipes/shared";
-@import "recipes/ui";
-@import "recipes/webfont-icon";
+@import "recipes/ui";

data/stylesheets/recipes/_color.scss

@@ -1,21 +1,17 @@
-/**
- *
- * @author David Kaneda - http://www.davidkaneda.com
- *
- */
+////
+// Color functions
+//
+// @author David Kaneda - http://www.davidkaneda.com
+///
 
 @import "color/name";
 
-/**
- * @class Color
- */
-
-/**
- * Returns the brightness (out of 100) of a specified color.
- * @todo explain why this is useful
- * @param {color} $color The color you want the brightness value of
- * @return {measurement}
- */
+////
+// Returns the brightness (out of 100) of a specified color.
+// @todo explain why this is useful
+// @param {color} $color The color you want the brightness value of
+// @return {measurement}
+///
 @function brightness($color) {
     $r: red($color) / 255 * 100;
     $g: green($color) / 255 * 100;
@@ -39,12 +35,12 @@
     }
 }
 
-/**
- * Returns the luminosity for a specified color
- * @todo explain why this is useful
- * @param {color} The color to check
- * @return {measurement}
- */
+////
+// 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);

data/stylesheets/recipes/_effect.scss

@@ -1,6 +1,9 @@
-@import "effect/glass";
-@import "effect/cutout";
-@import "effect/bevel";
-@import "effect/tape";
-@import "effect/corner-folded";
-@import "effect/folded-corner";
+@import "recipes/effect/bevel";
+@import "recipes/effect/corner-folded";
+@import "recipes/effect/corners-tucked";
+@import "recipes/effect/cutout";
+@import "recipes/effect/folded-corner";
+@import "recipes/effect/glass";
+@import "recipes/effect/ribbon";
+@import "recipes/effect/scatter";
+@import "recipes/effect/tape";

data/stylesheets/recipes/_font.scss

@@ -1,12 +1,12 @@
-//
+////
 // Font face mixin to import a pack generated from fontsquirrel.com
 // include .eot (ie), .svg (iphone), .ttf & .woff
 //
 // @link http://www.fontsquirrel.com/fontface/generator
 // @link http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
 //
-// @author Maxime Thirouin m@moox.fr
-//
+// @author Maxime Thirouin m@moox.fr @MoOx
+///
 
 @import "compass/css3/font-face";
 
@@ -20,13 +20,22 @@
     {
         $font-dir: $font-name;
     }
+    // append / if font-dir present
+    @if ($font-dir != false)
+    {
+        $font-dir: $font-dir + "/";
+    }
+    @else
+    {
+        $font-dir: "";
+    }
     @include font-face(
         "#{$font-name}",
         font-files(
-            "#{$font-dir}/#{$font-file-suffix}.eot?#iefix",
-            "#{$font-dir}/#{$font-file-suffix}.woff",
-            "#{$font-dir}/#{$font-file-suffix}.ttf",
-            "#{$font-dir}/#{$font-file-suffix}.svg##{$font-id}"
+            "#{$font-dir}#{$font-file-suffix}.eot?#iefix",
+            "#{$font-dir}#{$font-file-suffix}.woff",
+            "#{$font-dir}#{$font-file-suffix}.ttf",
+            "#{$font-dir}#{$font-file-suffix}.svg##{$font-id}"
         )
     );
 }

data/stylesheets/recipes/_google-webfont.scss

@@ -1,3 +1,7 @@
+////
+// Google web font
+///
+
 $google-font-name: false !default;
 $google-font-weights: false !default;
 

data/stylesheets/recipes/_icon-font.scss

@@ -1,54 +1,53 @@
-
-@import 'compass';
+////
+// Icon Fonts helpers
+// 
+// Great to use with the some pictos fonts
+///
+
+@import "compass/css3/background-clip";
+@import "compass/css3/user-interface";
+@import "compass/css3/text-shadow";
 @import "compass/typography/text/replacement";
 
-@import 'shared';
-@import 'font';
-
-@import 'background/gradients';
+@import "recipes/font";
+@import "recipes/background/gradients";
 
 // @todo add http://fortaweso.me/font-awesome
 
-/**
- * @class font Icon
- * Great to use with the some pictos fonts
- */
-
-$icon-font-class-suffix: "icon-font" !default;
-$icon-font-base-class:   ".#{$icon-font-class-suffix}-base" !default;
+$icon-font-class-suffix: icon-font !default;
+$icon-font-base-class:   "#{$icon-font-class-suffix}-base" !default;
 
-/**
- * @cfg {color} $icon-font-base-color
- * The default color of icons when using the {@link #icon-font} mixin.
- *
- * Defaults to `white`.
- */
+////
+// @cfg {color} $icon-font-base-color
+// The default color of icons when using the {@link #icon-font} mixin.
+//
+// Defaults to `white`.
+///
 $icon-font-base-color: #999 !default;
 
-/**
- * @cfg {color} $icon-font-default-stroke
- * The default color to use on the border of icons, when using the {@link #icon-font} mixin.
- *
- * Defaults to `null`.
- */
+////
+// @cfg {color} $icon-font-default-stroke
+// The default color to use on the border of icons, when using the {@link #icon-font} mixin.
+//
+// Defaults to `null`.
+///
 $icon-font-default-stroke: darken($icon-font-base-color, 10) !default;
 
 $icon-font-highlight-color: #3778E5 !default;
 
-/**
- * @cfg {string} $icon-font-default-gradient
- * The default gradient to use when using the {@link #icon-font} mixin.
- *
- * Defaults to `matte`.
- */
+////
+// @cfg {string} $icon-font-default-gradient
+// The default gradient to use when using the {@link #icon-font} mixin.
+//
+// Defaults to `matte`.
+///
 $icon-font-default-gradient: matte !default;
 
 // Base style for pseudo-selectors
 // @todo Doc me yo
 
-#{$icon-font-base-class}
+%#{$icon-font-base-class}
 {
-    @silent;
     color: transparent;
     @include background-clip(text);
     position: absolute;
@@ -65,10 +64,10 @@ $icon-font-default-gradient: matte !default;
 {
     @include font-face-kit($font-name, $font-id, $font-file-suffix, $font-dir);
 
-    .#{$icon-font-class-suffix}-#{$font-name}
+    %#{$icon-font-class-suffix}-#{$font-name}
     {
         font-family: #{$font-name};
-        @extend #{$icon-font-base-class};
+        @extend %#{$icon-font-base-class};
     }
 }
 
@@ -82,23 +81,23 @@ $icon-font-default-gradient: matte !default;
 @mixin icon-font-face-socialico()               { @include icon-font-face(socialico, SocialicoRegular, socialico-webfont, icons/socialico); }
 @mixin icon-font-face-websymbols()              { @include icon-font-face(websymbols, WebSymbolsRegular, websymbols-regular-webfont, icons/websymbols); }
 
-/**
- * Includes a character into the specified selector, styled as an icon.
- *
- *     @include icon-font('a');
- *
- * @param {color} $color
- * The color of the icon. Defaults to {@link #$icon-font-default-background $icon-font-default-background}.
- *
- * @param {measurement} $size
- * The size of the icon
- *
- * @param {color} $stroke
- * The color of the border. Defautls to {@link #$icon-font-default-border $icon-font-default-border}.
- *
- * @param {boolean} $include-staes
- * True to include states for hover and active. Defaults to `true`.
- */
+////
+// Includes a character into the specified selector, styled as an icon.
+//
+//     @include icon-font('a');
+//
+// @param {color} $color
+// The color of the icon. Defaults to {@link #$icon-font-default-background $icon-font-default-background}.
+//
+// @param {measurement} $size
+// The size of the icon
+//
+// @param {color} $stroke
+// The color of the border. Defautls to {@link #$icon-font-default-border $icon-font-default-border}.
+//
+// @param {boolean} $include-staes
+// True to include states for hover and active. Defaults to `true`.
+///
 @mixin icon-font(
     $character: attr(data-icon),
     $size: 48px,
@@ -150,7 +149,7 @@ $icon-font-default-gradient: matte !default;
     &:after,
     &:before
     {
-        @extend .#{$icon-font-class-suffix}-#{$class};
+        @extend %#{$icon-font-class-suffix}-#{$class};
         font-size: $size;
         content: $character;
 
@@ -198,27 +197,10 @@ $icon-font-attr-default-pseudo: before !default;
 
 @mixin icon-font-attr-rules()
 {
-    [data-icon]
-    {
-        &:#{$icon-font-from-attr-default-pseudo}
-        {
-            content: attr($icon-font-attr-name);
-        }
-    }
-
-    [data-icon-before]
-    {
-        &:before
-        {
-            content: attr($icon-font-attr-name);
-        }
-    }
-
-    [data-icon-after]
+    [#{$icon-font-attr-name}]:#{$icon-font-attr-default-pseudo},
+    [#{$icon-font-attr-name}-before]:before,
+    [#{$icon-font-attr-name}-after]:after
     {
-        &:after
-        {
-            content: attr($icon-font-attr-name);
-        }
+        content: attr($icon-font-attr-name);
     }
 }