Skip to content
Browse files

Added golden-ratio function. Updated Readme

  • Loading branch information...
1 parent 1c0b4f7 commit 7074d3fbf803b1331d7cd9156d711eaffaf00abe Phil LaPier committed Jul 4, 2011
Showing with 84 additions and 23 deletions.
  1. +1 −0 app/assets/stylesheets/_bourbon.css.scss
  2. +33 −0 app/assets/stylesheets/functions/_golden-ratio.css.scss
  3. +50 −23 readme.md
View
1 app/assets/stylesheets/_bourbon.css.scss
@@ -1,5 +1,6 @@
// Custom Functions
@import "functions/compact";
+@import "functions/golden-ratio";
@import "functions/tint-shade";
// CSS3 Mixins
View
33 app/assets/stylesheets/functions/_golden-ratio.css.scss
@@ -0,0 +1,33 @@
+@function golden-ratio($value, $increment) {
+ @if $increment > 0 {
+ @for $i from 1 through $increment {
+ $value: ($value * 1.618);
+ }
+ }
+ @if $increment < 0 {
+ $increment: abs($increment);
+ @for $i from 1 through $increment {
+ $value: ($value / 1.618);
+ }
+ }
+ @if $increment == 0 {
+ @warn "Increment value cannot be zero; must be ...-3, -2, -1, 1, 2, 3...";
+ }
+ @return $value;
+}
+
+// Must provide a Pixel or Em value.
+// Also requires an increment value: ...-3, -2, -1, 1, 2, 3...
+// Can be used with ceil(round up) or floor(round down).
+// div {
+// Increment Up Golden Ratio
+// width: golden-ratio(14px, 1); // returns: 22.652px
+// width: floor( golden-ratio(14px, 1) ); // returns: 22px
+// width: ceil( golden-ratio(14px, 1) ); // returns: 23px
+//
+// Increment Down Golden Ratio
+// width: golden-ratio(14px, -1); // returns: 8.653px
+// }
+//
+// modularscale.com
+// goldenratiocalculator.com
View
73 readme.md
@@ -2,18 +2,18 @@
The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive framework 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.
-##Requirements
+#Requirements
Sass 3.1+
-##Install for Rails
+#Install for Rails
**Update your Gemfile**
gem 'bourbon'
bundle install
-###Rails 3.1.x
+##Rails 3.1.x
**Comment-out the following sprocket directive in /application.css.scss** (Remove the =)
* require_tree .
@@ -22,7 +22,7 @@ Sass 3.1+
@import 'bourbon';
-###Rails 3.0.9 and below
+##Rails 3.0.9 and below
**For Rails < 3.1 you must run the installation rake task.**
This will copy the Sass files into your project's public/stylesheets/sass directory.
@@ -33,7 +33,7 @@ This will copy the Sass files into your project's public/stylesheets/sass direct
@import 'bourbon/bourbon';
-##Install without Rails
+#Install without Rails
The following script will generate a sass directory and convert all .css.scss to .scss extensions. The sass directory is for 'sass --watch' use outside of rails.
Preliminary step: clone the repo and cd into the directory.
@@ -49,7 +49,7 @@ Preliminary step: clone the repo and cd into the directory.
**Step 3:** Move the new sass directory to your project's stylesheets directory.
-##Usage
+#Using Bourbon Vanilla Mixins
Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.
**Animation**
@@ -171,33 +171,32 @@ Shorthand mixin: Supports multiple parentheses-deliminated values for each varia
@include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));`
-##Add-ons
+##Functions
+**Compact**
-**Buttons**
+The compact function will strip out any value from a list that is 'false'. Takes up to 10 arguments.
-The button add-on provides well-designed buttons with a single line in your CSS. The demo folder contains examples of the buttons in use.
+ $full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9);
-The mixin can be called with no parameters to render a blue button with the "simple" style.
- button,
- input[type="button"] {
- @include button;
- }
+**Golen Ratio**
-The mixin supports a style parameter. Right now the available styles are "simple" (default), "shiny", and "pill".
+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...
- button,
- input[type="button"] {
- @include button(shiny);
- }
+Can be used with ceil(round up) or floor(round down).
-The real power of the mixin is revealed when you pass in the optional color argument. Using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.
+ div {
+ Increment Up Golden Ratio
+ width: golden-ratio(14px, 1); // returns: 22.652px
+ width: floor( golden-ratio(14px, 1) ); // returns: 22px
+ width: ceil( golden-ratio(14px, 1) ); // returns: 23px
- button,
- input[type="button"] {
- @include button(shiny, #ff000);
+ Increment Down Golden Ratio
+ width: golden-ratio(14px, -1); // returns: 8.653px
}
+Resources: [modularscale.com](http://modularscale.com) & [goldenratiocalculator.com](goldenratiocalculator.com)
+
**Tint & Shade**
@@ -216,6 +215,34 @@ Shade is a mix of a color with black. Shade takes a color and a percent argument
}
+##Add-ons
+
+**Buttons**
+
+The button add-on provides well-designed buttons with a single line in your CSS. The demo folder contains examples of the buttons in use.
+
+The mixin can be called with no parameters to render a blue button with the "simple" style.
+
+ button,
+ input[type="button"] {
+ @include button;
+ }
+
+The mixin supports a style parameter. Right now the available styles are "simple" (default), "shiny", and "pill".
+
+ button,
+ input[type="button"] {
+ @include button(shiny);
+ }
+
+The real power of the mixin is revealed when you pass in the optional color argument. Using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.
+
+ button,
+ input[type="button"] {
+ @include button(shiny, #ff000);
+ }
+
+
##Help Out
Currently the project is a work in progress. Feel free to help out.

0 comments on commit 7074d3f

Please sign in to comment.
Something went wrong with that request. Please try again.