compass-rgbapng 0.1.1 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # rgbapng - Compass plugin
2
2
 
3
- rgbapng is a Compass plugin for providing cross browser compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.
3
+ rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.
4
4
 
5
5
  ## Installation
6
6
 
@@ -20,15 +20,16 @@ And then import the mixins to your SASS/SCSS files:
20
20
 
21
21
  ### Configurable variables
22
22
 
23
- There is a single variable that defines the path to which your PNG images will be saved. This defaults to `rgbapng` inside your Compass images directory. Change the path globally with:
23
+ There are two customzable global variables. This first `$rgbapng_path` defines the path to which your PNG images will be saved. This defaults to `rgbapng` inside your Compass images directory. The second `$rgbapng_px_size` defines the pixel square size of the generated png. This defaults to a 5x5 square.
24
24
 
25
25
  $rgbapng_path: 'my_pngs';
26
+ $rgbapng_px_size: 8;
26
27
 
27
28
  ### Mixins
28
29
 
29
30
  There are two mixins available to you.
30
31
 
31
- #### rgba-background($color, [$path])
32
+ #### rgba-background($color, [$path, $pixel])
32
33
 
33
34
  Sets the background property to use the RGBA value, falling back to the compiled PNG.
34
35
 
@@ -39,7 +40,7 @@ Compiles to:
39
40
  background: url('/images/rgbapng/000000bf.png?1282127952');
40
41
  background: rgba(0, 0, 0, 0.75);
41
42
 
42
- #### rgba-background-inline($color)
43
+ #### rgba-background-inline($color, [$pixel])
43
44
 
44
45
  Sets the background property to use the RGBA value, falling back to a base64 encoded image data.
45
46
 
@@ -61,6 +62,16 @@ There are two `Sass::Script` functions which can be used in your SASS:
61
62
  # Returns a String of the base64 encoded image data
62
63
  png_base64(color)
63
64
 
65
+ ## * Cross-browser? Really?
66
+
67
+ OK, caveat time. When I say "cross-browser", what I really mean is all browsers that either natively support RGBA or support alpha-transparent PNGs. What I don't mean, is IE6. If alpha-transparency in IE6 is important to you, here are some suggestions:
68
+
69
+ * Use [DD_BelatedPNG](http://www.dillerdesign.com/experiment/DD_belatedPNG/) JavaScript library to bootstrap PNG support to IE6.
70
+ * Don't use this plugin at all and instead create your own mixin using [Microsoft's proprietary filters](http://dimox.net/cross-browser-rgba-support/) - just make sure you wash your hands afterwards!
71
+ * Be a rebel and either forget about IE6 or serve it up a [universal stylesheet](http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css).
72
+
73
+ The choice is yours.
74
+
64
75
  ## Credit where it's due
65
76
 
66
77
  * The CSS technique used was initially described by Lea Verou in [Bulletproof, cross-browser RGBA backgrounds, today](http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/).
@@ -7,31 +7,31 @@ require "base64"
7
7
  # to which generated PNGs are saved.
8
8
 
9
9
  module Sass::Script::Functions
10
-
11
- def png_pixelate(c, dir = "rgbapng")
10
+
11
+ def png_pixelate(c, dir = "rgbapng", px = 5)
12
12
  color = ChunkyPNG::Color.rgba(c.red, c.green, c.blue, (c.alpha * 100 * 2.55).round)
13
- image = ChunkyPNG::Image.new(1,1, color)
13
+ image = ChunkyPNG::Image.new(px.to_i, px.to_i, color)
14
14
  dir = dir.is_a?(Sass::Script::String) ? dir.value : dir
15
- file = File.join(dir, ChunkyPNG::Color.to_hex(color).gsub(/^#/, "") + ".png")
15
+ file = File.join(dir, ChunkyPNG::Color.to_hex(color).gsub(/^#/, "") + "-#{ px.to_s }.png")
16
16
  path = File.join(Compass.configuration.images_path, file)
17
-
17
+
18
18
  if !File.exists?(path) || options[:force]
19
- puts "Writing #{file}"
19
+ puts "Writing #{file}" unless options[:quiet]
20
20
  [Compass.configuration.images_path, File.join(Compass.configuration.images_path, dir)].each do |d|
21
- Dir.mkdir(d) unless File.exists?(d)
21
+ Dir.mkdir(d) unless File.exists?(d)
22
22
  end
23
23
  image.save(path)
24
24
  end
25
-
25
+
26
26
  Sass::Script::String.new(file)
27
27
  end
28
28
 
29
- def png_base64(c)
29
+ def png_base64(c, px = 5)
30
30
  color = ChunkyPNG::Color.rgba(c.red, c.green, c.blue, (c.alpha * 100 * 2.55).round)
31
- image = ChunkyPNG::Image.new(1,1, color)
31
+ image = ChunkyPNG::Image.new(px.to_i, px.to_i, color)
32
32
  data = Base64.encode64(image.to_blob).gsub("\n", "")
33
-
33
+
34
34
  Sass::Script::String.new("url('data:image/png;base64,#{data}')")
35
35
  end
36
-
36
+
37
37
  end
@@ -1,17 +1,23 @@
1
- /*
2
- Mixins are slightly modified from Benjamin Doherty's first implementations: http://gist.github.com/377912
3
- rgba-background mixin can now be passed an option $dir variable
4
- */
1
+ // Mixins are slightly modified from Benjamin Doherty's first implementations: http://gist.github.com/377912
2
+ // rgba-background mixin can now be passed an option $dir variable
5
3
 
6
- $rgbapng_path: 'rgbapng';
4
+ $rgbapng_path: 'rgbapng' !default;
5
+ $rgbapng_px_size: 5 !default;
7
6
 
8
- @mixin rgba-background($color, $dir:$rgbapng_path){
9
- background: image_url(png_pixelate($color, $dir));
7
+ @mixin rgba-background($color, $dir:$rgbapng_path, $pixel:$rgbapng_px_size){
8
+ background: rgba-png($color, $dir, $pixel);
10
9
  background: $color;
11
10
  }
12
11
 
13
- @mixin rgba-background-inline($color){
14
- background: png_base64($color);
12
+ @mixin rgba-background-inline($color, $pixel:$rgbapng_px_size){
13
+ background: rgba-inline($color, $pixel);
15
14
  background: $color;
16
15
  }
17
16
 
17
+ @function rgba-png($color, $dir:$rgbapng_path, $pixel:$rgbapng_px_size) {
18
+ @return image_url(png_pixelate($color, $dir, $pixel));
19
+ }
20
+
21
+ @function rgba-inline($color, $pixel:$rgbapng_px_size) {
22
+ @return png_base64($color, $pixel);
23
+ }
metadata CHANGED
@@ -1,94 +1,85 @@
1
- --- !ruby/object:Gem::Specification
1
+ --- !ruby/object:Gem::Specification
2
2
  name: compass-rgbapng
3
- version: !ruby/object:Gem::Version
4
- prerelease: false
5
- segments:
6
- - 0
7
- - 1
8
- - 1
9
- version: 0.1.1
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.2.1
5
+ prerelease:
10
6
  platform: ruby
11
- authors:
7
+ authors:
12
8
  - Aaron Russell
13
9
  - Benjamin Doherty
14
10
  autorequire:
15
11
  bindir: bin
16
12
  cert_chain: []
17
-
18
- date: 2010-08-18 00:00:00 +01:00
19
- default_executable:
20
- dependencies:
21
- - !ruby/object:Gem::Dependency
13
+ date: 2013-06-26 00:00:00.000000000 Z
14
+ dependencies:
15
+ - !ruby/object:Gem::Dependency
22
16
  name: compass
23
- prerelease: false
24
- requirement: &id001 !ruby/object:Gem::Requirement
25
- requirements:
26
- - - ">="
27
- - !ruby/object:Gem::Version
28
- segments:
29
- - 0
30
- - 10
31
- - 0
17
+ requirement: !ruby/object:Gem::Requirement
18
+ none: false
19
+ requirements:
20
+ - - ! '>='
21
+ - !ruby/object:Gem::Version
32
22
  version: 0.10.0
33
23
  type: :runtime
34
- version_requirements: *id001
35
- - !ruby/object:Gem::Dependency
36
- name: chunky_png
37
24
  prerelease: false
38
- requirement: &id002 !ruby/object:Gem::Requirement
39
- requirements:
40
- - - ">="
41
- - !ruby/object:Gem::Version
42
- segments:
43
- - 0
44
- - 8
45
- - 0
25
+ version_requirements: !ruby/object:Gem::Requirement
26
+ none: false
27
+ requirements:
28
+ - - ! '>='
29
+ - !ruby/object:Gem::Version
30
+ version: 0.10.0
31
+ - !ruby/object:Gem::Dependency
32
+ name: chunky_png
33
+ requirement: !ruby/object:Gem::Requirement
34
+ none: false
35
+ requirements:
36
+ - - ! '>='
37
+ - !ruby/object:Gem::Version
46
38
  version: 0.8.0
47
39
  type: :runtime
48
- version_requirements: *id002
49
- description: Compass plugin for providing cross-browser compatible RGBA support by creating transparent PNGs on the fly for browsers that don't support RGBA. Uses the pure Ruby ChunkyPNG library for hassle free install and deployment.
40
+ prerelease: false
41
+ version_requirements: !ruby/object:Gem::Requirement
42
+ none: false
43
+ requirements:
44
+ - - ! '>='
45
+ - !ruby/object:Gem::Version
46
+ version: 0.8.0
47
+ description: Compass plugin for providing cross-browser compatible RGBA support by
48
+ creating transparent PNGs on the fly for browsers that don't support RGBA. Uses
49
+ the pure Ruby ChunkyPNG library for hassle free install and deployment.
50
50
  email: aaron@gc4.co.uk
51
51
  executables: []
52
-
53
52
  extensions: []
54
-
55
53
  extra_rdoc_files: []
56
-
57
- files:
54
+ files:
58
55
  - LICENSE
59
56
  - README.md
60
57
  - lib/rgbapng/functions.rb
61
58
  - lib/rgbapng.rb
62
59
  - lib/stylesheets/_rgbapng.scss
63
- has_rdoc: false
64
60
  homepage: http://github.com/aaronrussell/compass-rgbapng
65
61
  licenses: []
66
-
67
62
  post_install_message:
68
63
  rdoc_options: []
69
-
70
- require_paths:
64
+ require_paths:
71
65
  - lib
72
- required_ruby_version: !ruby/object:Gem::Requirement
73
- requirements:
74
- - - ">="
75
- - !ruby/object:Gem::Version
76
- segments:
77
- - 0
78
- version: "0"
79
- required_rubygems_version: !ruby/object:Gem::Requirement
80
- requirements:
81
- - - ">="
82
- - !ruby/object:Gem::Version
83
- segments:
84
- - 0
85
- version: "0"
66
+ required_ruby_version: !ruby/object:Gem::Requirement
67
+ none: false
68
+ requirements:
69
+ - - ! '>='
70
+ - !ruby/object:Gem::Version
71
+ version: '0'
72
+ required_rubygems_version: !ruby/object:Gem::Requirement
73
+ none: false
74
+ requirements:
75
+ - - ! '>='
76
+ - !ruby/object:Gem::Version
77
+ version: '0'
86
78
  requirements: []
87
-
88
79
  rubyforge_project:
89
- rubygems_version: 1.3.6
80
+ rubygems_version: 1.8.25
90
81
  signing_key:
91
82
  specification_version: 3
92
- summary: Compass plugin for providing cross-browser compatible RGBA support by creating transparent PNGs on the fly for browsers that don't support RGBA.
83
+ summary: Compass plugin for providing cross-browser compatible RGBA support by creating
84
+ transparent PNGs on the fly for browsers that don't support RGBA.
93
85
  test_files: []
94
-