sassy_noise_gradient 0.1.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. data/README.md +64 -0
  2. data/lib/sassy_noise/sass_extensions.rb +44 -0
  3. data/lib/sassy_noise.rb +7 -0
  4. data/stylesheets/_sassy-noise.scss +14 -0
  5. data/stylesheets/sassy-noise/_sassy-noise.scss +37 -0
  6. data/templates/project/manifest.rb +28 -0
  7. metadata +101 -0
data/README.md ADDED
@@ -0,0 +1,64 @@
1
+ Sassy noise
2
+ ===========
3
+
4
+ A Sass port of Noisy JS (https://github.com/DanielRapp/Noisy) for generating
5
+ noise background images as base64 data URIs.
6
+
7
+ Based on work of @philippbosch & @aaronrussell (https://gist.github.com/1021332).
8
+
9
+ Installation
10
+ ============
11
+
12
+ $ gem install sassy_noise
13
+
14
+ In your Compass projects config.rb etc:
15
+
16
+ require "sassy_noise"
17
+
18
+ Basic usage
19
+ ===========
20
+
21
+
22
+
23
+ In your .scss:
24
+
25
+ // Default values
26
+ // $sassy-noise-intensity-default: 0.5;
27
+ // $sassy-noise-opacity-default: 0.08;
28
+ // $sassy-noise-size-default: 200;
29
+ // $sassy-noise-mono-default: false;
30
+
31
+ @import "sassy-noise";
32
+
33
+ // Example usage on <body>
34
+
35
+ body {
36
+ @include sassy-noise;
37
+ }
38
+
39
+ // Monochrome example
40
+ body {
41
+ @include sassy-noise($mono: true);
42
+ }
43
+
44
+ No templates?
45
+ =============
46
+
47
+ I've omitted the project template because probably no-one wants to build a
48
+ project based on noise. I might add another pattern later.
49
+
50
+ Development
51
+ ===========
52
+
53
+ To run the project tests run `rake` in the project home directory.
54
+
55
+ You need RSpec to run the tests. Easiest way to install RSpec is to run
56
+ `gem install sassy_noise --development` which installs the development
57
+ dependencies.
58
+
59
+ TODO
60
+ ====
61
+
62
+ * Add templates
63
+ * Add common case @mixins
64
+
data/lib/sassy_noise/sass_extensions.rb ADDED
@@ -0,0 +1,44 @@
1
+ # -----------------------------------------------
2
+ # Sass implementation of the Noisy jquery plugin:
3
+ # https://github.com/DanielRapp/Noisy
4
+ # by @philippbosch
5
+ # https://gist.github.com/1021332
6
+ # -----------------------------------------------
7
+
8
+ module Sass::Script::Functions
9
+ def background_noise(kwargs = {})
10
+ opts = {}
11
+ Sass::Util.map_hash({
12
+ "intensity" => [0..1, "", :Number, Sass::Script::Number.new(0.5) ],
13
+ "opacity" => [0..1, "", :Number, Sass::Script::Number.new(0.08)],
14
+ "size" => [1..512, "px", :Number, Sass::Script::Number.new(200) ],
15
+ "monochrome" => [[true, false], "", :Bool, Sass::Script::Bool.new(false) ]
16
+ }) do |name, (range, units, type, default)|
17
+
18
+ if val = kwargs.delete(name)
19
+ assert_type val, type, name
20
+ if range && !range.include?(val.value)
21
+ raise ArgumentError.new("$#{name}: Amount #{val} must be between #{range.first}#{units} and #{range.last}#{units}")
22
+ end
23
+ else
24
+ val = default
25
+ end
26
+ opts[name] = val
27
+ end
28
+
29
+ image = ChunkyPNG::Image.new(opts["size"].to_i, opts["size"].to_i)
30
+
31
+ for i in (0..(opts["intensity"].to_s.to_f * (opts["size"].to_i**2)))
32
+ x = rand(opts["size"].to_i)
33
+ y = rand(opts["size"].to_i)
34
+ r = rand(255)
35
+ a = rand(255 * opts["opacity"].to_s.to_f)
36
+ color = opts["monochrome"] ? ChunkyPNG::Color.rgba(r, r, r, a) : ChunkyPNG::Color.rgba(r, rand(255), rand(255), a)
37
+ image.set_pixel(x, y, color)
38
+ end
39
+
40
+ data = Base64.encode64(image.to_blob).gsub("\n", "")
41
+ Sass::Script::String.new("url('data:image/png;base64,#{data}')")
42
+ end
43
+ declare :background_noise, [], :var_kwargs => true
44
+ end
data/lib/sassy_noise.rb ADDED
@@ -0,0 +1,7 @@
1
+ require 'compass'
2
+ require "chunky_png"
3
+ require "base64"
4
+ require File.join(File.dirname(__FILE__), 'sassy_noise', 'sass_extensions')
5
+
6
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
7
+ Compass::Frameworks.register('sassy-noise', :path => extension_path)
data/stylesheets/_sassy-noise.scss ADDED
@@ -0,0 +1,14 @@
1
+ $sassy-noise-intensity-default: 0.5 !default;
2
+ $sassy-noise-opacity-default: 0.08 !default;
3
+ $sassy-noise-size-default: 200 !default;
4
+ $sassy-noise-mono-default: false !default;
5
+
6
+ ._sassy-noise-repeat {
7
+ background-repeat: repeat;
8
+ }
9
+
10
+ ._sassy-noise-no-repeat {
11
+ background-repeat: no-repeat;
12
+ }
13
+
14
+ @import "sassy-noise/_sassy-noise";
data/stylesheets/sassy-noise/_sassy-noise.scss ADDED
@@ -0,0 +1,37 @@
1
+ @mixin sassy-noise(
2
+ $intensity: $sassy-noise-intensity-default,
3
+ $opacity: $sassy-noise-opacity-default,
4
+ $size: $sassy-noise-size-default,
5
+ $mono: $sassy-noise-mono-default
6
+ ) {
7
+ background-image: background_noise(
8
+ $color: #FFF;
9
+ $intensity: $intensity,
10
+ $opacity: $opacity,
11
+ $size: $size,
12
+ $mono: $mono
13
+ );
14
+
15
+ @if type-of($color) == color {
16
+ background-color: $color;
17
+ background-image: background-noise($intensity, $opacity, $size, $mono);
18
+ @extend ._sassy-noise-repeat;
19
+ }
20
+
21
+ @if type-of($color) == 'compass::sassextensions::functions::gradientsupport::lineargradient' {
22
+ @extend ._sassy-noise-no-repeat;
23
+ @include background-image(
24
+ background-noise($intensity: $intensity,$opacity: $opacity,$size: $size,$mono: $mono),
25
+ $color
26
+ );
27
+ }
28
+
29
+ @if type-of($color) == 'compass::sassextensions::functions::gradientsupport::radialgradient' {
30
+ @extend ._sassy-noise-no-repeat;
31
+ @include background-image(
32
+ background-noise($intensity: $intensity,$opacity: $opacity,$size: $size,$mono: $mono),
33
+ $color
34
+ );
35
+ }
36
+
37
+ }
data/templates/project/manifest.rb ADDED
@@ -0,0 +1,28 @@
1
+ description "A Sass port of the Noisy JS plugin as a Compass extension"
2
+
3
+ help %Q{
4
+ sassy_noise
5
+
6
+ A Sass port of the Noisy JS plugin as a Compass extension
7
+ Based on work of @philippbosch & @aaronrussell
8
+
9
+ Usage:
10
+
11
+ @import "sassy-noise";
12
+ body {@include sassy_noise();}
13
+
14
+ More info from Github: https://github.com/antsa/sassy_noise
15
+
16
+ }
17
+
18
+ welcome_message %Q{
19
+ sassy_noise
20
+
21
+ Usage:
22
+
23
+ @import "sassy-noise";
24
+ body {@include sassy_noise();}
25
+
26
+ More info from Github: https://github.com/antsa/sassy_noise
27
+
28
+ }
metadata ADDED
@@ -0,0 +1,101 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: sassy_noise_gradient
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.9
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Antti Salonen
9
+ - Vesa Vanska
10
+ - Victor Coulon
11
+ autorequire:
12
+ bindir: bin
13
+ cert_chain: []
14
+ date: 2012-04-04 00:00:00.000000000 Z
15
+ dependencies:
16
+ - !ruby/object:Gem::Dependency
17
+ name: compass
18
+ requirement: !ruby/object:Gem::Requirement
19
+ none: false
20
+ requirements:
21
+ - - ! '>='
22
+ - !ruby/object:Gem::Version
23
+ version: '0'
24
+ type: :runtime
25
+ prerelease: false
26
+ version_requirements: !ruby/object:Gem::Requirement
27
+ none: false
28
+ requirements:
29
+ - - ! '>='
30
+ - !ruby/object:Gem::Version
31
+ version: '0'
32
+ - !ruby/object:Gem::Dependency
33
+ name: chunky_png
34
+ requirement: !ruby/object:Gem::Requirement
35
+ none: false
36
+ requirements:
37
+ - - ! '>='
38
+ - !ruby/object:Gem::Version
39
+ version: '0'
40
+ type: :runtime
41
+ prerelease: false
42
+ version_requirements: !ruby/object:Gem::Requirement
43
+ none: false
44
+ requirements:
45
+ - - ! '>='
46
+ - !ruby/object:Gem::Version
47
+ version: '0'
48
+ - !ruby/object:Gem::Dependency
49
+ name: rspec
50
+ requirement: !ruby/object:Gem::Requirement
51
+ none: false
52
+ requirements:
53
+ - - ! '>='
54
+ - !ruby/object:Gem::Version
55
+ version: '2.0'
56
+ type: :development
57
+ prerelease: false
58
+ version_requirements: !ruby/object:Gem::Requirement
59
+ none: false
60
+ requirements:
61
+ - - ! '>='
62
+ - !ruby/object:Gem::Version
63
+ version: '2.0'
64
+ description: a sass port of the noisy js plugin as a compass extension that creates
65
+ backgrond noise images as base64 data URIs
66
+ email: salosen.antti@gmail.com
67
+ executables: []
68
+ extensions: []
69
+ extra_rdoc_files: []
70
+ files:
71
+ - README.md
72
+ - lib/sassy_noise/sass_extensions.rb
73
+ - lib/sassy_noise.rb
74
+ - stylesheets/_sassy-noise.scss
75
+ - stylesheets/sassy-noise/_sassy-noise.scss
76
+ - templates/project/manifest.rb
77
+ homepage: https://github.com/antsa/sassy_noise
78
+ licenses: []
79
+ post_install_message:
80
+ rdoc_options: []
81
+ require_paths:
82
+ - lib
83
+ required_ruby_version: !ruby/object:Gem::Requirement
84
+ none: false
85
+ requirements:
86
+ - - ! '>='
87
+ - !ruby/object:Gem::Version
88
+ version: '0'
89
+ required_rubygems_version: !ruby/object:Gem::Requirement
90
+ none: false
91
+ requirements:
92
+ - - ! '>='
93
+ - !ruby/object:Gem::Version
94
+ version: '0'
95
+ requirements: []
96
+ rubyforge_project:
97
+ rubygems_version: 1.8.21
98
+ signing_key:
99
+ specification_version: 3
100
+ summary: a sass port of the noisy js plugin as a compass extension
101
+ test_files: []