compass-inline-gradient 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: cf408b019f4f01a946f17c583879b6971fcdc364
+  data.tar.gz: a9caf3bf98b0a09c325ac6830070c05a72373c94
+SHA512:
+  metadata.gz: 370f985df99fd1b7596dacddee7064fa0a0653565f2d269352dfb535bf352395ea1e4e55759f89a111a3f14a2c6d1dc73a3f8f93a674f68350a9cec290cf2037
+  data.tar.gz: 4eea16b3b3dc4e89c1be3e38b75e2ab5e15283feee1e4ccd0b34ae55f03be66bcb7dc53a38f6e510b5d6fba4e7c28f720b37075ec6eb76b332272e936cc57916

data/.gitignore

@@ -0,0 +1,20 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+.idea
+.sass-cache
+.DS_Store

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in compass-inline-gradient.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Alexander Pinchuk
+
+MIT License
+
+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.

data/README.rdoc

@@ -0,0 +1,60 @@
+= Compass::InlineGradient
+
+=== It's a alpha release. Next week (22 - 28 July 2013) I will release beta version with:
+* Full linear gradient support (now don't work as native angles like 23deg, 58deg and other customs)
+* Multiple gradients (like multiple backgrounds)
+* Radial gradient support
+* W3C closest-side syntax
+
+This is a compass/sass extension for inline(data uri) linear gradients with already image optimization.
+It converts css linear gradient syntax to data uri (base64) background-image.
+
+=== Why use base64 background-images not native gradient?
+Native css gradients have a lot of prefixes, you must use filters for IE, IE9 and Opera needs inline svg gradients.
+Just look at {this}[http://www.colorzilla.com/gradient-editor/] terrible default example.
+
+But data uri (base64) has a excellent support. It's just don't work in IE 7-, and work fine in other browsers: desktop, mobile, everywhere.
+You will have less code and more browser support. Use it!
+
+*N.B.* inline-gradient function already using {TinyPNG API}[tinypng.org] for image optimization.
+
+*P.S.* I need this function more than anyone :) Stay online with me!
+
+== Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'compass-inline-gradient'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install compass-inline-gradient
+
+== Usage
+
+See *example/example.html* for more information and ready examples.
+
+Code examples:
+
+    some-css-selector {
+        background-image: inline-gradient(linear, 200, 100, 90deg, red 0, green 100px, blue 200px);
+    }
+
+    some-css-selector {
+        background-image: inline-gradient(linear, 200, 70, to left, red 0%, orange 16.67%, yellow 33.34%, green 50%, lightskyblue 66.67%, blue 83.33%, violet 100%);
+    }
+
+== Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+== Other
+Add issues, I always answer.

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/compass-inline-gradient.gemspec

@@ -0,0 +1,27 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'inline-gradient'
+require 'inline-gradient/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "compass-inline-gradient"
+  spec.version       = InlineGradient::VERSION
+  spec.authors       = ["Alexander Pinchuk"]
+  spec.email         = ["front.end.developing@gmail.com"]
+  spec.description   = "Sass/Compass extension to convert css3 gradient to base64"
+  spec.summary       = "Convert css3 gradient to base64 hash"
+  spec.homepage      = "https://github.com/frontenddeveloping/compass-inline-gradient"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+  spec.add_development_dependency "sass"
+  spec.add_development_dependency "rmagick"
+  spec.add_development_dependency "tinypng"
+end

data/example/config.rb

@@ -0,0 +1,5 @@
+require File.join(File.dirname(__FILE__), '../lib/inline-gradient.rb')
+
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"

data/example/example.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Test page for inline-gradient usage in Compass/Sass</title>
+        <link rel="stylesheet" href="stylesheets/example.css" type="text/css" >
+        <script type="text/javascript" src="vendor/jquery.js"></script>
+        <script type="text/javascript" src="vendor/jquery.snippet.js"></script>
+        <link rel="stylesheet" type="text/css" href="vendor/jquery.snippet.css" />
+    </head>
+    <body>
+        <div class="notes">
+            <div class="toggle"></div>
+            <h3 class="notes-header">
+                Notes:
+            </h3>
+            <ol class="notes-list">
+                <li class="note">
+                    Compass inline gradient result is an image (data uri image), it can't be with out fix size.
+                    If you need to use the same gradient with other sizes try to use CSS rule
+                    <span class="inline-code">background-size: 100% 100%</span>&nbsp;(<a href="http://caniuse.com/#search=background-size" target="_blank">browser support</a>)
+                </li>
+                <li class="note">
+                    inline-gradient is Sass/Compass function. You can use it with out Compass in Sass
+                </li>
+                <li class="note">
+                    inline-gradient function use <a href="http://www.w3.org/TR/css3-images/" target="_blank">W3C</a> syntax, there is no support for browser prefix syntax.
+                    W3C syntax is using for gradient type name(linear/radial), angle/side-to-corner and color-stop values.
+                    Width and height using in pixels.
+                </li>
+            </ol>
+        </div>
+        <div class="examples">
+            <div class="example">
+                <h2>Default usage example</h2>
+                <div class="description">
+                    Default using (without arguments) is equivalent to calling:<br />
+                    <span class="inline-code">inline-gradient(linear, 100, 100, to bottom, #FFF 0%, #000 100%)</span>
+                </div>
+                <div class="result result-default">
+                    <div class="result-wrapper">
+                        <h3>Inline</h3>
+                        <div class="gradient sass-gradient"></div>
+                    </div>
+                    <div class="result-wrapper">
+                        <h3>Browser</h3>
+                        <div class="gradient native-gradient"></div>
+                    </div>
+                </div>
+                <div class="code">
+                    <pre>
+                        some_css_selector {
+                            background-image: inline-gradient();
+                        }
+                    </pre>
+                </div>
+            </div>
+            <div class="example">
+                <h2>Simple usage example</h2>
+                <div class="description">
+                    Three colors 90deg rotate linear-gradient.<br />
+                    The same result you can get <span class="inline-code">inline-linear-gradient(200, 100, 90deg, red 0%, green 50%, blue 100%);</span>
+                </div>
+                <div class="result result-simple">
+                    <div class="result-wrapper">
+                        <h3>Inline</h3>
+                        <div class="gradient sass-gradient"></div>
+                    </div>
+                    <div class="result-wrapper">
+                        <h3>Browser</h3>
+                        <div class="gradient native-gradient"></div>
+                    </div>
+                </div>
+                <div class="code">
+                    <pre>
+                        some_css_selector {
+                            background-image: inline-gradient(linear, 200, 100, 90deg, red 0%, green 50%, blue 100%);
+                        }
+                    </pre>
+                </div>
+            </div>
+            <div class="example">
+                <h2>Rainbow gradient example</h2>
+                <div class="description">
+                    Rainbow gradient from left to right.<br />
+                </div>
+                <div class="result result-rainbow">
+                    <div class="result-wrapper">
+                        <h3>Inline</h3>
+                        <div class="gradient sass-gradient"></div>
+                    </div>
+                    <div class="result-wrapper">
+                        <h3>Browser</h3>
+                        <div class="gradient native-gradient"></div>
+                    </div>
+                </div>
+                <div class="code">
+                    <pre>
+                        some_css_selector {
+                            background-image: inline-gradient(linear, 500, 150, to left, red 0%, orange 16.67%, yellow 33.34%, green 50%, lightskyblue 66.67%, blue 83.33%, violet 100%);
+                        }
+                    </pre>
+                </div>
+            </div>
+            <div class="example">
+                <h2>Rotated example</h2>
+                <div class="description">
+                    Two colors 135deg rotate linear-gradient.<br />
+                </div>
+                <div class="result result-rotated">
+                    <div class="result-wrapper">
+                        <h3>Inline</h3>
+                        <div class="gradient sass-gradient"></div>
+                    </div>
+                    <div class="result-wrapper">
+                        <h3>Browser</h3>
+                        <div class="gradient native-gradient"></div>
+                    </div>
+                </div>
+                <div class="code">
+                    <pre>
+                        some_css_selector {
+                            background-image: inline-gradient(linear, 100, 100, 135deg, #f90 0%, #c96 100%);
+                        }
+                    </pre>
+                </div>
+            </div>
+            <div class="example">
+                <h2>Another rotated example</h2>
+                <div class="description">
+                    Two colors -23deg rotate linear-gradient.<br />
+                </div>
+                <div class="result result-rotated-complex">
+                    <div class="result-wrapper">
+                        <h3>Inline</h3>
+                        <div class="gradient sass-gradient"></div>
+                    </div>
+                    <div class="result-wrapper">
+                        <h3>Browser</h3>
+                        <div class="gradient native-gradient"></div>
+                    </div>
+                </div>
+                <div class="code">
+                    <pre>
+                        some_css_selector {
+                            background-image: inline-gradient(linear, 100, 100, -23deg, #f90 0%, #c96 100%);
+                        }
+                    </pre>
+                </div>
+            </div>
+            </div>
+        </div>
+        <script>
+            $(function(){
+                $(".code").find("pre").each(function (index,node) {
+                    var $node = $(node),
+                        nodeHTML = $node.html();
+                    //format hack
+                    $node.html(nodeHTML.replace(/\s{2,}/g, '').replace(/({|;)/g,'$1\n').replace(/background/,'    background'));
+                    $node.snippet("css",{style:"golden"});
+                });
+            });
+        </script>
+    </body>
+</html>

data/example/sass/example.scss

@@ -0,0 +1,78 @@
+@import "theme";
+
+$randbow-step : 100.0/6;
+
+.result-default {
+  .sass-gradient,
+  .native-gradient {
+    height: 100px;
+    width: 100px;
+  }
+  .sass-gradient {
+    background-image: inline-gradient();
+  }
+
+  .native-gradient {
+    background: linear-gradient(#FFF 0%, #000 100%);
+  }
+}
+
+.result-simple {
+  .sass-gradient,
+  .native-gradient {
+    height: 100px;
+    width: 200px;
+  }
+  .sass-gradient {
+    background-image: inline-gradient(linear, 200, 100, 90deg, red 0, green 100px, blue 200px);
+  }
+
+  .native-gradient {
+    background: linear-gradient(90deg, red 0, green 100px, blue 200px);
+  }
+}
+
+.result-rainbow {
+  .sass-gradient,
+  .native-gradient {
+    height: 70px;
+    width: 200px;
+  }
+  .sass-gradient {
+    background-image: inline-gradient(linear, 200, 70, to left, red 0%, orange 16.67%, yellow 33.34%, green 50%, lightskyblue 66.67%, blue 83.33%, violet 100%);
+  }
+
+  .native-gradient {
+    background: linear-gradient(to left, red 0%, orange 16.67%, yellow 33.34%, green 50%, lightskyblue 66.67%, blue 83.33%, violet 100%);
+  }
+}
+
+.result-rotated {
+  .sass-gradient,
+  .native-gradient {
+    height: 100px;
+    width: 100px;
+  }
+  .sass-gradient {
+    background-image: inline-gradient(linear, 100, 100, 135deg, #f90 0%, #000 100%);
+  }
+
+  .native-gradient {
+    background: linear-gradient(135deg, #f90 0%, #000 100%);
+  }
+}
+
+.result-rotated-complex {
+  .sass-gradient,
+  .native-gradient {
+    height: 100px;
+    width: 200px;
+  }
+  .sass-gradient {
+    background-image: inline-gradient(linear, 200, 100, -23deg, #c0c000 0%, #963 100%);
+  }
+
+  .native-gradient {
+    background: linear-gradient(-23deg, #c0c000 0%, #963 100%);
+  }
+}

data/example/sass/theme.scss

@@ -0,0 +1,102 @@
+@import "compass/css3";
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+}
+
+html, body {
+  min-height: 100%;
+  height: 100%;
+}
+
+body {
+  font: 14px/normal Helvetica, Arial, sans-serif;
+}
+
+h2 {
+  font-family: Georgia;
+  font-size: 21px;
+  font-weight: lighter;
+}
+
+h3 {
+  font-family: Georgia;
+  font-size: 16px;
+  font-weight: lighter;
+  padding-bottom: 10px;
+}
+
+.code, .inline-code {
+  font: 12px/14px monospace, sans-serif;
+}
+
+.code {
+  clear: both;
+  margin-right: 20px;
+}
+
+.inline-code {
+  @include border-radius(2px);
+  background-color: rgba(0,0,0,0.8);
+  color: #db0;
+  display: inline-block;
+  margin: 2px 0;
+  padding: 2px 4px;
+}
+
+.examples {
+  overflow: hidden;
+  border-right: 1px solid #ddd;
+  margin-right: 400px;
+}
+
+.example {
+  padding: 20px 10px;
+}
+
+.result {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.result-wrapper {
+  float: left;
+  padding: 0 20px 20px 0;
+}
+
+.gradient {
+  border: 1px solid #ddd;
+}
+
+.description {
+  padding: 10px 0;
+}
+
+.notes {
+  background-color: lemonchiffon;
+  border-left: 1px solid #ddd;
+  float: right;
+  margin-left: -1px;
+  min-height: 100%;
+  padding: 10px 10px 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 400px;
+}
+
+.notes-header {
+  padding-bottom: 10px;
+}
+
+.notes-list {
+  font-size: 12px;
+  list-style: inside;
+}
+
+.note {
+  padding-bottom: 10px;
+}
+