sassy_noise 0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +39 -0
- data/lib/sassy_noise/sass_extensions.rb +44 -0
- data/lib/sassy_noise.rb +7 -0
- data/stylesheets/_sassy_noise.scss +10 -0
- data/stylesheets/sassy_noise/_sassy_noise.scss +14 -0
- data/templates/project/manifest.rb +28 -0
- metadata +75 -0
data/README.md
ADDED
@@ -0,0 +1,39 @@
|
|
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.
|
8
|
+
|
9
|
+
No templates?
|
10
|
+
=============
|
11
|
+
|
12
|
+
I've omitted the project template because probably no-one wants to build a
|
13
|
+
project based on noise. I might add another pattern later.
|
14
|
+
|
15
|
+
Basic usage
|
16
|
+
===========
|
17
|
+
|
18
|
+
In your config.rb etc:
|
19
|
+
|
20
|
+
require "sassy_noise"
|
21
|
+
|
22
|
+
In your .scss:
|
23
|
+
|
24
|
+
// Default values
|
25
|
+
// $bg-noise-intensity-default: 0.5;
|
26
|
+
// $bg-noise-opacity-default: 0.08;
|
27
|
+
// $bg-noise-size-default: 200;
|
28
|
+
// $bg-noise-mono-default: false;
|
29
|
+
|
30
|
+
@import "sassy_noise";
|
31
|
+
// Example usage
|
32
|
+
body {
|
33
|
+
@include bg-noise();
|
34
|
+
}
|
35
|
+
// Monochrome example
|
36
|
+
body {
|
37
|
+
@include bg-noise($mono: true);
|
38
|
+
}
|
39
|
+
|
@@ -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('my_extension', :path => extension_path)
|
@@ -0,0 +1,10 @@
|
|
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
|
+
@import "sassy_noise/_sassy_noise";
|
@@ -0,0 +1,14 @@
|
|
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
|
+
$intensity: $intensity,
|
9
|
+
$opacity: $opacity,
|
10
|
+
$size: $size,
|
11
|
+
$mono: $mono
|
12
|
+
);
|
13
|
+
@extend ._sassy_noise_repeat;
|
14
|
+
}
|
@@ -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,75 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: sassy_noise
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: '0.1'
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Antti Salonen
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2011-09-09 00:00:00.000000000 +03:00
|
13
|
+
default_executable:
|
14
|
+
dependencies:
|
15
|
+
- !ruby/object:Gem::Dependency
|
16
|
+
name: compass
|
17
|
+
requirement: &2156207300 !ruby/object:Gem::Requirement
|
18
|
+
none: false
|
19
|
+
requirements:
|
20
|
+
- - ! '>='
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '0'
|
23
|
+
type: :runtime
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: *2156207300
|
26
|
+
- !ruby/object:Gem::Dependency
|
27
|
+
name: chunky_png
|
28
|
+
requirement: &2156206860 !ruby/object:Gem::Requirement
|
29
|
+
none: false
|
30
|
+
requirements:
|
31
|
+
- - ! '>='
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: *2156206860
|
37
|
+
description: a sass port of the noisy js plugin as a compass extension that creates
|
38
|
+
backgrond noise images as base64 data URIs
|
39
|
+
email: salosen.antti@gmail.com
|
40
|
+
executables: []
|
41
|
+
extensions: []
|
42
|
+
extra_rdoc_files: []
|
43
|
+
files:
|
44
|
+
- README.md
|
45
|
+
- lib/sassy_noise/sass_extensions.rb
|
46
|
+
- lib/sassy_noise.rb
|
47
|
+
- stylesheets/_sassy_noise.scss
|
48
|
+
- stylesheets/sassy_noise/_sassy_noise.scss
|
49
|
+
- templates/project/manifest.rb
|
50
|
+
has_rdoc: true
|
51
|
+
homepage: https://github.com/antsa/sassy_noise
|
52
|
+
licenses: []
|
53
|
+
post_install_message:
|
54
|
+
rdoc_options: []
|
55
|
+
require_paths:
|
56
|
+
- lib
|
57
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
58
|
+
none: false
|
59
|
+
requirements:
|
60
|
+
- - ! '>='
|
61
|
+
- !ruby/object:Gem::Version
|
62
|
+
version: '0'
|
63
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
64
|
+
none: false
|
65
|
+
requirements:
|
66
|
+
- - ! '>='
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: '0'
|
69
|
+
requirements: []
|
70
|
+
rubyforge_project:
|
71
|
+
rubygems_version: 1.6.2
|
72
|
+
signing_key:
|
73
|
+
specification_version: 3
|
74
|
+
summary: a sass port of the noisy js plugin as a compass extension
|
75
|
+
test_files: []
|