css_shapes 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
|