css_shapes 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/README.md +91 -0
- data/Rakefile +14 -0
- data/assets/_shapes.scss +329 -0
- data/css_shapes.gemspec +22 -0
- data/example/example.html +1079 -0
- data/example/src/samples.yml +52 -0
- data/example/src/template.erb +73 -0
- data/lib/css_shapes.rb +13 -0
- data/lib/css_shapes/example.rb +88 -0
- data/lib/css_shapes/railtie.rb +12 -0
- data/lib/css_shapes/source.rb +59 -0
- data/lib/css_shapes/tasks/css_shapes.rake +14 -0
- data/lib/css_shapes/version.rb +3 -0
- metadata +79 -0
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
square:
|
|
2
|
+
- ['red']
|
|
3
|
+
- ['rgba(120, 120, 120, 0.8)', '120px']
|
|
4
|
+
- ['#fab444', '80px']
|
|
5
|
+
rectangle:
|
|
6
|
+
- ['red']
|
|
7
|
+
- ['red', '120px', '10px']
|
|
8
|
+
circle:
|
|
9
|
+
- ['red']
|
|
10
|
+
- ['#ff0', '2em']
|
|
11
|
+
oval:
|
|
12
|
+
- ['red']
|
|
13
|
+
- ['#000', '60px', '10px']
|
|
14
|
+
triangle-up:
|
|
15
|
+
- ['red']
|
|
16
|
+
triangle-down:
|
|
17
|
+
- ['red']
|
|
18
|
+
triangle-left:
|
|
19
|
+
- ['red']
|
|
20
|
+
triangle-right:
|
|
21
|
+
- ['red']
|
|
22
|
+
- ['#5F0', '180px', '30px']
|
|
23
|
+
triangle-topleft:
|
|
24
|
+
- ['red']
|
|
25
|
+
triangle-topright:
|
|
26
|
+
- ['red']
|
|
27
|
+
triangle-bottomleft:
|
|
28
|
+
- ['red']
|
|
29
|
+
triangle-bottomright:
|
|
30
|
+
- ['red']
|
|
31
|
+
parallelogram:
|
|
32
|
+
- ['red']
|
|
33
|
+
- ['#fab444', '40px', '120px', '40deg']
|
|
34
|
+
trapezoid:
|
|
35
|
+
- ['red']
|
|
36
|
+
star-six:
|
|
37
|
+
- ['red']
|
|
38
|
+
star-five:
|
|
39
|
+
- ['red']
|
|
40
|
+
- ['#000', '40px']
|
|
41
|
+
pentagon:
|
|
42
|
+
- ['red']
|
|
43
|
+
- ['#0f0', '88px']
|
|
44
|
+
- ['#00f', '128px']
|
|
45
|
+
hexagon:
|
|
46
|
+
- ['red']
|
|
47
|
+
octagon:
|
|
48
|
+
- ['red', '#fff']
|
|
49
|
+
heart:
|
|
50
|
+
- ['red']
|
|
51
|
+
infinity:
|
|
52
|
+
- ['red']
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<style>
|
|
5
|
+
body { font-family: 'Helvetica', 'Verdana', sans-serif; }
|
|
6
|
+
.container { width: 960px; margin: 0 auto; }
|
|
7
|
+
h1 {
|
|
8
|
+
font-family: 'Arial Rounded MT Bold', 'Verdana', 'Helvetica', sans-serif;
|
|
9
|
+
padding: 10px;
|
|
10
|
+
background: #ddd;
|
|
11
|
+
border-bottom: #ccc 1px solid;
|
|
12
|
+
}
|
|
13
|
+
style[contenteditable] {
|
|
14
|
+
display: block;
|
|
15
|
+
white-space: pre;
|
|
16
|
+
background: #333;
|
|
17
|
+
color: white;
|
|
18
|
+
font: 12px Monaco;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
height: 50px;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
margin-bottom: 20px;
|
|
23
|
+
}
|
|
24
|
+
.star-five style[contenteditable],
|
|
25
|
+
.pentagon style[contenteditable],
|
|
26
|
+
.hexagon style[contenteditable] {
|
|
27
|
+
margin-bottom: 40px;
|
|
28
|
+
}
|
|
29
|
+
.samples {
|
|
30
|
+
list-style: none;
|
|
31
|
+
margin: 0;
|
|
32
|
+
padding: 0;
|
|
33
|
+
}
|
|
34
|
+
.samples li {
|
|
35
|
+
width: 300px;
|
|
36
|
+
padding: 10px;
|
|
37
|
+
display: inline-block;
|
|
38
|
+
vertical-align: top;
|
|
39
|
+
border-right: 1px #bbb dashed;
|
|
40
|
+
}
|
|
41
|
+
.samples li:last-child {
|
|
42
|
+
border: 0;
|
|
43
|
+
}
|
|
44
|
+
.shape {
|
|
45
|
+
margin: 0 auto 40px;
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
</head>
|
|
49
|
+
<body>
|
|
50
|
+
<div id='container'>
|
|
51
|
+
<% @shapes.each do |shape| %>
|
|
52
|
+
<section class='<%= shape.name %>'>
|
|
53
|
+
<header><h1><%= shape.name %></h1></header>
|
|
54
|
+
<dl>
|
|
55
|
+
<% shape.params.each do |param| %>
|
|
56
|
+
<dt><%= param.name %></dt>
|
|
57
|
+
<dd><%= param.default? ? 'Optional' : 'Required' %></dd>
|
|
58
|
+
<% end %>
|
|
59
|
+
</dl>
|
|
60
|
+
<ul class='samples'>
|
|
61
|
+
<% shape_samples(shape).each do |sample| %>
|
|
62
|
+
<li>
|
|
63
|
+
<style><%= sample.css %></style>
|
|
64
|
+
<style contenteditable><%= sample.scss %></style>
|
|
65
|
+
<div id='<%= sample.dom_id %>' class='shape <%= shape.name %>'></div>
|
|
66
|
+
</li>
|
|
67
|
+
<% end %>
|
|
68
|
+
</ul>
|
|
69
|
+
</section>
|
|
70
|
+
<% end %>
|
|
71
|
+
</div>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
data/lib/css_shapes.rb
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
module CSSShapes
|
|
2
|
+
|
|
3
|
+
def self.root
|
|
4
|
+
@root ||= File.expand_path('..', __FILE__)
|
|
5
|
+
end
|
|
6
|
+
|
|
7
|
+
autoload :Example, root + '/css_shapes/example'
|
|
8
|
+
autoload :Source, root + '/css_shapes/source'
|
|
9
|
+
autoload :VERSION, root + '/css_shapes/version'
|
|
10
|
+
|
|
11
|
+
require(root + '/css_shapes/railtie') if defined?(Rails)
|
|
12
|
+
|
|
13
|
+
end
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
require 'erb'
|
|
2
|
+
|
|
3
|
+
module CSSShapes
|
|
4
|
+
class Example
|
|
5
|
+
|
|
6
|
+
def self.write(filename)
|
|
7
|
+
new.write(filename)
|
|
8
|
+
end
|
|
9
|
+
|
|
10
|
+
def initialize
|
|
11
|
+
@shapes = Source.shapes
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def write(filename)
|
|
15
|
+
File.open(filename, 'w') do |f|
|
|
16
|
+
f.write document
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
def shape_samples(shape)
|
|
21
|
+
(samples[shape.name] || []).map.with_index do |args, idx|
|
|
22
|
+
ShapeSample.new(idx + 1, shape, args)
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
|
|
26
|
+
private
|
|
27
|
+
|
|
28
|
+
def default_arg_string(shape)
|
|
29
|
+
parts = []
|
|
30
|
+
shape.params.each do |param|
|
|
31
|
+
unless param.default?
|
|
32
|
+
case param.name
|
|
33
|
+
when 'color'
|
|
34
|
+
parts << '#f00'
|
|
35
|
+
else
|
|
36
|
+
raise ArgumentError, "Don't know how to fill #{param.name}"
|
|
37
|
+
end
|
|
38
|
+
end
|
|
39
|
+
end
|
|
40
|
+
parts.join(', ')
|
|
41
|
+
end
|
|
42
|
+
|
|
43
|
+
def document
|
|
44
|
+
@document ||= template.result(binding)
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
def samples
|
|
48
|
+
@samples ||= YAML.load(File.read(samples_filename))
|
|
49
|
+
end
|
|
50
|
+
|
|
51
|
+
def samples_filename
|
|
52
|
+
File.expand_path('../example/src/samples.yml', CSSShapes.root)
|
|
53
|
+
end
|
|
54
|
+
|
|
55
|
+
def template
|
|
56
|
+
ERB.new(File.read(template_filename))
|
|
57
|
+
end
|
|
58
|
+
|
|
59
|
+
def template_filename
|
|
60
|
+
File.expand_path('../example/src/template.erb', CSSShapes.root)
|
|
61
|
+
end
|
|
62
|
+
|
|
63
|
+
class ShapeSample
|
|
64
|
+
|
|
65
|
+
def initialize(count, shape, args)
|
|
66
|
+
@count = count
|
|
67
|
+
@shape = shape
|
|
68
|
+
@args = args
|
|
69
|
+
end
|
|
70
|
+
|
|
71
|
+
def css
|
|
72
|
+
Sass.compile(Source.contents + "\n" + scss(dom_id), :syntax => :scss)
|
|
73
|
+
end
|
|
74
|
+
|
|
75
|
+
def scss(on_dom_id = 'shape')
|
|
76
|
+
["##{on_dom_id} {",
|
|
77
|
+
" @include #{@shape.name}(#{@args.join(', ')});",
|
|
78
|
+
"}"].join("\n")
|
|
79
|
+
end
|
|
80
|
+
|
|
81
|
+
def dom_id
|
|
82
|
+
"shape_sample_#{@shape.name}_#{@count}"
|
|
83
|
+
end
|
|
84
|
+
|
|
85
|
+
end
|
|
86
|
+
|
|
87
|
+
end
|
|
88
|
+
end
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
module CSSShapes
|
|
2
|
+
class Railtie < Rails::Railtie
|
|
3
|
+
railtie_name :css_shapes
|
|
4
|
+
config.before_configuration do
|
|
5
|
+
Rails.configuration.assets.paths += Dir[File.expand_path('../assets',
|
|
6
|
+
CSSShapes.root)]
|
|
7
|
+
end
|
|
8
|
+
rake_tasks do
|
|
9
|
+
load "css_shapes/tasks/css_shapes.rake"
|
|
10
|
+
end
|
|
11
|
+
end
|
|
12
|
+
end
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
require 'sass'
|
|
2
|
+
|
|
3
|
+
module CSSShapes
|
|
4
|
+
|
|
5
|
+
module Source
|
|
6
|
+
|
|
7
|
+
def self.contents
|
|
8
|
+
@data ||= File.read(File.expand_path('../assets/_shapes.scss',
|
|
9
|
+
CSSShapes.root))
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
def self.shapes
|
|
13
|
+
return @shapes if @shapes
|
|
14
|
+
sass = Sass::Engine.new(contents, :syntax => :scss)
|
|
15
|
+
tree = sass.to_tree
|
|
16
|
+
@shapes = []
|
|
17
|
+
tree.children.each do |mixin_node|
|
|
18
|
+
Shape.new(mixin_node.name).tap do |shape|
|
|
19
|
+
mixin_node.args.each do |var, default|
|
|
20
|
+
shape.add_param(var.name, default)
|
|
21
|
+
end
|
|
22
|
+
@shapes << shape
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
@shapes
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
class Shape
|
|
29
|
+
|
|
30
|
+
attr_reader :name
|
|
31
|
+
def initialize(name)
|
|
32
|
+
@name = name
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
def params
|
|
36
|
+
@params ||= []
|
|
37
|
+
end
|
|
38
|
+
|
|
39
|
+
def add_param(name, default)
|
|
40
|
+
Param.new(name, default).tap do |param|
|
|
41
|
+
params << param
|
|
42
|
+
end
|
|
43
|
+
end
|
|
44
|
+
|
|
45
|
+
class Param
|
|
46
|
+
attr_reader :name, :default
|
|
47
|
+
def initialize(name, default)
|
|
48
|
+
@name = name
|
|
49
|
+
@default = default
|
|
50
|
+
end
|
|
51
|
+
def default?
|
|
52
|
+
@default
|
|
53
|
+
end
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
end
|
|
57
|
+
|
|
58
|
+
end
|
|
59
|
+
end
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
namespace :css_shapes do
|
|
2
|
+
|
|
3
|
+
desc "List available shapes and parameters"
|
|
4
|
+
task :list do
|
|
5
|
+
CSSShapes::Source.shapes.each do |shape|
|
|
6
|
+
puts shape.name
|
|
7
|
+
shape.params.each do |param|
|
|
8
|
+
puts "* #{param.name} (#{param.default? ? 'Optional' : 'Required'})"
|
|
9
|
+
end
|
|
10
|
+
end
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
end
|
|
14
|
+
|
metadata
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: css_shapes
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
prerelease: false
|
|
5
|
+
segments:
|
|
6
|
+
- 0
|
|
7
|
+
- 8
|
|
8
|
+
- 0
|
|
9
|
+
version: 0.8.0
|
|
10
|
+
platform: ruby
|
|
11
|
+
authors:
|
|
12
|
+
- Bruce Williams
|
|
13
|
+
autorequire:
|
|
14
|
+
bindir: bin
|
|
15
|
+
cert_chain: []
|
|
16
|
+
|
|
17
|
+
date: 2011-08-13 00:00:00 -04:00
|
|
18
|
+
default_executable:
|
|
19
|
+
dependencies: []
|
|
20
|
+
|
|
21
|
+
description: "SCSS library for shapes. Sources: http://css-tricks.com/examples/ShapesOfCSS/, ..."
|
|
22
|
+
email:
|
|
23
|
+
- bruce@codefluency.com
|
|
24
|
+
executables: []
|
|
25
|
+
|
|
26
|
+
extensions: []
|
|
27
|
+
|
|
28
|
+
extra_rdoc_files: []
|
|
29
|
+
|
|
30
|
+
files:
|
|
31
|
+
- .gitignore
|
|
32
|
+
- Gemfile
|
|
33
|
+
- README.md
|
|
34
|
+
- Rakefile
|
|
35
|
+
- assets/_shapes.scss
|
|
36
|
+
- css_shapes.gemspec
|
|
37
|
+
- example/example.html
|
|
38
|
+
- example/src/samples.yml
|
|
39
|
+
- example/src/template.erb
|
|
40
|
+
- lib/css_shapes.rb
|
|
41
|
+
- lib/css_shapes/example.rb
|
|
42
|
+
- lib/css_shapes/railtie.rb
|
|
43
|
+
- lib/css_shapes/source.rb
|
|
44
|
+
- lib/css_shapes/tasks/css_shapes.rake
|
|
45
|
+
- lib/css_shapes/version.rb
|
|
46
|
+
has_rdoc: true
|
|
47
|
+
homepage: http://github.com/bruce/css_shapes
|
|
48
|
+
licenses: []
|
|
49
|
+
|
|
50
|
+
post_install_message:
|
|
51
|
+
rdoc_options: []
|
|
52
|
+
|
|
53
|
+
require_paths:
|
|
54
|
+
- lib
|
|
55
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
56
|
+
none: false
|
|
57
|
+
requirements:
|
|
58
|
+
- - ">="
|
|
59
|
+
- !ruby/object:Gem::Version
|
|
60
|
+
segments:
|
|
61
|
+
- 0
|
|
62
|
+
version: "0"
|
|
63
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
64
|
+
none: false
|
|
65
|
+
requirements:
|
|
66
|
+
- - ">="
|
|
67
|
+
- !ruby/object:Gem::Version
|
|
68
|
+
segments:
|
|
69
|
+
- 0
|
|
70
|
+
version: "0"
|
|
71
|
+
requirements: []
|
|
72
|
+
|
|
73
|
+
rubyforge_project:
|
|
74
|
+
rubygems_version: 1.3.7
|
|
75
|
+
signing_key:
|
|
76
|
+
specification_version: 3
|
|
77
|
+
summary: Provides SCSS for various CSS shapes
|
|
78
|
+
test_files: []
|
|
79
|
+
|