casuistry 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- data/Manifest +15 -0
- data/README.rdoc +48 -0
- data/casuistry.gemspec +60 -0
- data/lib/casuistry.rb +157 -0
- data/lib/properties.rb +115 -0
- data/lib/tags.rb +89 -0
- data/test/basics.rb +107 -0
- data/test/dan.css +40 -0
- data/test/dan.cssy +160 -0
- data/test/fiddle.css +25 -0
- data/test/fiddle.cssy +34 -0
- data/test/helper.rb +8 -0
- data/test/nesting.cssy +13 -0
- data/test/test.css +11 -0
- data/test/test.cssy +11 -0
- metadata +76 -0
data/Manifest
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
casuistry.gemspec
|
2
|
+
lib/casuistry.rb
|
3
|
+
lib/properties.rb
|
4
|
+
lib/tags.rb
|
5
|
+
Manifest
|
6
|
+
README.rdoc
|
7
|
+
test/basics.rb
|
8
|
+
test/dan.css
|
9
|
+
test/dan.cssy
|
10
|
+
test/fiddle.css
|
11
|
+
test/fiddle.cssy
|
12
|
+
test/helper.rb
|
13
|
+
test/nesting.cssy
|
14
|
+
test/test.css
|
15
|
+
test/test.cssy
|
data/README.rdoc
ADDED
@@ -0,0 +1,48 @@
|
|
1
|
+
= Casuistry, a.k.a Cssy
|
2
|
+
|
3
|
+
Cssy is a CSS companion to Markaby. You declare selectors using methods named after the type selectors (i.e. tags) or after the class and id selectors of your choice, which are handled by method_missing. As in Markaby, id selectors are distinguished from class selectors by the "!" at the end of the method name. You can chain class/id selectors onto type selectors and each other.
|
4
|
+
|
5
|
+
Because in CSS you don't have to begin with a type selector, starting a selector chain with a class/id selector is currently allowed in Casuistry. This may go away in the future.
|
6
|
+
|
7
|
+
== Usage
|
8
|
+
|
9
|
+
|
10
|
+
css = Cssy.new
|
11
|
+
css.process do
|
12
|
+
div do
|
13
|
+
|
14
|
+
# this is a property on div
|
15
|
+
background :red
|
16
|
+
|
17
|
+
selector('ul li') do
|
18
|
+
color('green')
|
19
|
+
end
|
20
|
+
|
21
|
+
p.ugly.truly do
|
22
|
+
color('aqua')
|
23
|
+
end
|
24
|
+
|
25
|
+
selector('.smurf').house do
|
26
|
+
height('256px')
|
27
|
+
end
|
28
|
+
|
29
|
+
menu! do
|
30
|
+
padding("10px")
|
31
|
+
end
|
32
|
+
|
33
|
+
# this is a property on div, again
|
34
|
+
width('9934px')
|
35
|
+
|
36
|
+
end
|
37
|
+
|
38
|
+
gargamel do
|
39
|
+
margin("0px")
|
40
|
+
end
|
41
|
+
|
42
|
+
selector('.outer.middle.inner') do
|
43
|
+
top("34px")
|
44
|
+
end
|
45
|
+
end
|
46
|
+
|
47
|
+
css.data #=> array of arrays
|
48
|
+
css.output #=> string of css
|
data/casuistry.gemspec
ADDED
@@ -0,0 +1,60 @@
|
|
1
|
+
|
2
|
+
# Gem::Specification for Casuistry-0.2.1
|
3
|
+
# Originally generated by Echoe
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = %q{casuistry}
|
7
|
+
s.version = "0.2.1"
|
8
|
+
|
9
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
10
|
+
s.authors = ["Matthew King"]
|
11
|
+
s.date = %q{2008-07-09}
|
12
|
+
s.description = %q{Generates CSS using Ruby, like Markaby}
|
13
|
+
s.email = %q{automatthew@gmail.com}
|
14
|
+
s.extra_rdoc_files = ["lib/casuistry.rb", "lib/properties.rb", "lib/tags.rb", "README.rdoc"]
|
15
|
+
s.files = ["casuistry.gemspec", "lib/casuistry.rb", "lib/properties.rb", "lib/tags.rb", "Manifest", "README.rdoc", "test/basics.rb", "test/dan.css", "test/dan.cssy", "test/fiddle.css", "test/fiddle.cssy", "test/helper.rb", "test/nesting.cssy", "test/test.css", "test/test.cssy"]
|
16
|
+
s.has_rdoc = true
|
17
|
+
s.homepage = %q{}
|
18
|
+
s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Casuistry", "--main", "README.rdoc"]
|
19
|
+
s.require_paths = ["lib"]
|
20
|
+
s.rubyforge_project = %q{casuistry}
|
21
|
+
s.rubygems_version = %q{1.2.0}
|
22
|
+
s.summary = %q{Generates CSS using Ruby, like Markaby}
|
23
|
+
s.test_files = ["test/basics.rb", "test/helper.rb"]
|
24
|
+
|
25
|
+
if s.respond_to? :specification_version then
|
26
|
+
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
27
|
+
s.specification_version = 2
|
28
|
+
|
29
|
+
if current_version >= 3 then
|
30
|
+
else
|
31
|
+
end
|
32
|
+
else
|
33
|
+
end
|
34
|
+
end
|
35
|
+
|
36
|
+
|
37
|
+
# # Original Rakefile source (requires the Echoe gem):
|
38
|
+
#
|
39
|
+
# %w{rubygems}.each do |dep|
|
40
|
+
# require dep
|
41
|
+
# end
|
42
|
+
#
|
43
|
+
# Version = '0.2.1'
|
44
|
+
#
|
45
|
+
# task :default => [:test]
|
46
|
+
#
|
47
|
+
# begin
|
48
|
+
# gem 'echoe', '>=2.7'
|
49
|
+
# require 'echoe'
|
50
|
+
# Echoe.new('casuistry', Version) do |p|
|
51
|
+
# p.project = 'casuistry'
|
52
|
+
# p.summary = "Generates CSS using Ruby, like Markaby"
|
53
|
+
# p.author = "Matthew King"
|
54
|
+
# p.email = "automatthew@gmail.com"
|
55
|
+
# p.ignore_pattern = /^(\.git).+/
|
56
|
+
# p.test_pattern = "test/*.rb"
|
57
|
+
# end
|
58
|
+
# rescue
|
59
|
+
# "(ignored echoe gemification, as you don't have the Right Stuff)"
|
60
|
+
# end
|
data/lib/casuistry.rb
ADDED
@@ -0,0 +1,157 @@
|
|
1
|
+
require 'properties'
|
2
|
+
require 'tags'
|
3
|
+
|
4
|
+
# Markaby-ish way to declare CSS
|
5
|
+
class Casuistry
|
6
|
+
|
7
|
+
attr_reader :data
|
8
|
+
|
9
|
+
def self.process(*args,&block)
|
10
|
+
self.new.process(*args,&block)
|
11
|
+
end
|
12
|
+
|
13
|
+
def initialize(sel=nil)
|
14
|
+
@data = []
|
15
|
+
@selectors = [ sel]
|
16
|
+
@properties = []
|
17
|
+
|
18
|
+
# possible states are :closed_block, :chain, :open_block
|
19
|
+
@state = :closed_block
|
20
|
+
end
|
21
|
+
|
22
|
+
def process(*args, &block)
|
23
|
+
if block
|
24
|
+
instance_eval(&block)
|
25
|
+
else
|
26
|
+
instance_eval(args.join("\n"))
|
27
|
+
end
|
28
|
+
@data
|
29
|
+
end
|
30
|
+
|
31
|
+
def output
|
32
|
+
output = ""
|
33
|
+
@data.each do |sel|
|
34
|
+
output << sel.first
|
35
|
+
properties = sel.last.map { |s| " #{s}" }.join("\n")
|
36
|
+
output << "\n{\n#{properties}\n}\n"
|
37
|
+
end
|
38
|
+
output
|
39
|
+
end
|
40
|
+
|
41
|
+
# state transitions
|
42
|
+
def open_block(new_selector)
|
43
|
+
case @state
|
44
|
+
when :closed_block, :open_block
|
45
|
+
combined_selector = [current_selector, new_selector].compact.join(" ")
|
46
|
+
@selectors.push combined_selector
|
47
|
+
new_property_set
|
48
|
+
when :chain
|
49
|
+
@selectors[-1] = "#{current_selector}#{new_selector}"
|
50
|
+
new_property_set
|
51
|
+
else
|
52
|
+
raise "You can't get to :open_block from #{@state.inspect}"
|
53
|
+
end
|
54
|
+
|
55
|
+
@state = :open_block
|
56
|
+
end
|
57
|
+
|
58
|
+
def chain(new_selector)
|
59
|
+
case @state
|
60
|
+
when :closed_block, :open_block
|
61
|
+
combined_selector = [current_selector, new_selector].compact.join(" ")
|
62
|
+
@selectors.push( combined_selector)
|
63
|
+
when :chain
|
64
|
+
@selectors[-1] = "#{current_selector}#{new_selector}"
|
65
|
+
else
|
66
|
+
raise "You can't get to :chain from #{@state.inspect}"
|
67
|
+
end
|
68
|
+
|
69
|
+
@state = :chain
|
70
|
+
end
|
71
|
+
|
72
|
+
def closed_block
|
73
|
+
case @state
|
74
|
+
when :open_block, :closed_block
|
75
|
+
@selectors.pop
|
76
|
+
@properties.pop
|
77
|
+
else
|
78
|
+
raise "You can't get to :closed_block from #{@state.inspect}"
|
79
|
+
end
|
80
|
+
|
81
|
+
@state = :closed_block
|
82
|
+
end
|
83
|
+
|
84
|
+
|
85
|
+
# normal methods
|
86
|
+
|
87
|
+
def selector(sel)
|
88
|
+
if block_given?
|
89
|
+
open_block(sel)
|
90
|
+
yield
|
91
|
+
closed_block
|
92
|
+
else
|
93
|
+
chain(sel)
|
94
|
+
end
|
95
|
+
self
|
96
|
+
end
|
97
|
+
|
98
|
+
def method_missing(name, &block)
|
99
|
+
sel = selectify(name)
|
100
|
+
if block_given?
|
101
|
+
open_block(sel)
|
102
|
+
yield
|
103
|
+
closed_block
|
104
|
+
else
|
105
|
+
chain(sel)
|
106
|
+
end
|
107
|
+
self
|
108
|
+
end
|
109
|
+
|
110
|
+
def current_selector
|
111
|
+
@selectors[-1]
|
112
|
+
end
|
113
|
+
|
114
|
+
def current_properties
|
115
|
+
@properties[-1]
|
116
|
+
end
|
117
|
+
|
118
|
+
def new_property_set
|
119
|
+
@properties.push []
|
120
|
+
@data << [current_selector, current_properties ]
|
121
|
+
end
|
122
|
+
|
123
|
+
# define tag methods to delegate to selector
|
124
|
+
methods = HTML_TAGS.map do |tag|
|
125
|
+
<<-METHOD
|
126
|
+
def #{tag}(&block)
|
127
|
+
selector('#{tag}', &block)
|
128
|
+
end
|
129
|
+
METHOD
|
130
|
+
end.join
|
131
|
+
|
132
|
+
module_eval methods
|
133
|
+
|
134
|
+
CSS_PROPERTIES.each do |method_name|
|
135
|
+
define_method method_name do |*args|
|
136
|
+
css_attr = method_name.gsub('_', '-')
|
137
|
+
property(css_attr, args)
|
138
|
+
end
|
139
|
+
end
|
140
|
+
|
141
|
+
|
142
|
+
|
143
|
+
def property(css_attr, *args)
|
144
|
+
current_properties << "#{css_attr}: #{args.join(' ')};"
|
145
|
+
end
|
146
|
+
|
147
|
+
|
148
|
+
|
149
|
+
|
150
|
+
def selectify(method_name)
|
151
|
+
matches = method_name.to_s.match( /([\w_]+)!$/)
|
152
|
+
matches ? "##{matches[1]}" : ".#{method_name}"
|
153
|
+
end
|
154
|
+
|
155
|
+
end
|
156
|
+
|
157
|
+
Cssy = Casuistry
|
data/lib/properties.rb
ADDED
@@ -0,0 +1,115 @@
|
|
1
|
+
class Casuistry
|
2
|
+
CSS_PROPERTIES = %w{
|
3
|
+
azimuth
|
4
|
+
background
|
5
|
+
background_attachment
|
6
|
+
background_color
|
7
|
+
background_image
|
8
|
+
background_position
|
9
|
+
background_repeat
|
10
|
+
border
|
11
|
+
border_collapse
|
12
|
+
border_color
|
13
|
+
border_spacing
|
14
|
+
border_style
|
15
|
+
border_top
|
16
|
+
border_top_color
|
17
|
+
border_top_style
|
18
|
+
border_top_width
|
19
|
+
border_width
|
20
|
+
bottom
|
21
|
+
caption_side
|
22
|
+
clear
|
23
|
+
clip
|
24
|
+
color
|
25
|
+
content
|
26
|
+
counter_increment
|
27
|
+
counter_reset
|
28
|
+
cue
|
29
|
+
cue_after
|
30
|
+
cue_before
|
31
|
+
cursor
|
32
|
+
direction
|
33
|
+
display
|
34
|
+
elevation
|
35
|
+
empty_cells
|
36
|
+
float
|
37
|
+
font
|
38
|
+
font_family
|
39
|
+
font_size
|
40
|
+
font_size_adjust
|
41
|
+
font_stretch
|
42
|
+
font_style
|
43
|
+
font_variant
|
44
|
+
font_weight
|
45
|
+
height
|
46
|
+
left
|
47
|
+
letter_spacing
|
48
|
+
line_height
|
49
|
+
list_style
|
50
|
+
list_style_image
|
51
|
+
list_style_position
|
52
|
+
list_style_type
|
53
|
+
margin
|
54
|
+
margin_left
|
55
|
+
margin_top
|
56
|
+
margin_right
|
57
|
+
margin_bottom
|
58
|
+
marker_offset
|
59
|
+
marks
|
60
|
+
max_height
|
61
|
+
max_width
|
62
|
+
min_height
|
63
|
+
min_width
|
64
|
+
orphans
|
65
|
+
outline
|
66
|
+
outline_color
|
67
|
+
outline_style
|
68
|
+
outline_width
|
69
|
+
overflow
|
70
|
+
padding
|
71
|
+
padding_left
|
72
|
+
padding_top
|
73
|
+
padding_right
|
74
|
+
padding_bottom
|
75
|
+
page
|
76
|
+
page_break_after
|
77
|
+
page_break_before
|
78
|
+
page_break_inside
|
79
|
+
pause
|
80
|
+
pause_after
|
81
|
+
pause_before
|
82
|
+
pitch
|
83
|
+
pitch_range
|
84
|
+
play_during
|
85
|
+
position
|
86
|
+
quotes
|
87
|
+
richness
|
88
|
+
right
|
89
|
+
size
|
90
|
+
speak
|
91
|
+
speak_header
|
92
|
+
speak_numeral
|
93
|
+
speak_punctuation
|
94
|
+
speech_rate
|
95
|
+
stress
|
96
|
+
table_layout
|
97
|
+
text_align
|
98
|
+
text_decoration
|
99
|
+
text_indent
|
100
|
+
text_shadow
|
101
|
+
text_transform
|
102
|
+
top
|
103
|
+
unicode_bidi
|
104
|
+
vertical_align
|
105
|
+
visibility
|
106
|
+
voice_family
|
107
|
+
volume
|
108
|
+
white_space
|
109
|
+
widows
|
110
|
+
width
|
111
|
+
word_spacing
|
112
|
+
z_index
|
113
|
+
}
|
114
|
+
|
115
|
+
end
|
data/lib/tags.rb
ADDED
@@ -0,0 +1,89 @@
|
|
1
|
+
class Casuistry
|
2
|
+
HTML_TAGS = [
|
3
|
+
:a,
|
4
|
+
:abbr,
|
5
|
+
:acronym,
|
6
|
+
:address,
|
7
|
+
:area,
|
8
|
+
:b,
|
9
|
+
:base,
|
10
|
+
:bdo,
|
11
|
+
:big,
|
12
|
+
:blockquote,
|
13
|
+
:body,
|
14
|
+
:br,
|
15
|
+
:button,
|
16
|
+
:caption,
|
17
|
+
:cite,
|
18
|
+
:code,
|
19
|
+
:col,
|
20
|
+
:colgroup,
|
21
|
+
:dd,
|
22
|
+
:del,
|
23
|
+
:dfn,
|
24
|
+
:div,
|
25
|
+
:dl,
|
26
|
+
:dt,
|
27
|
+
:em,
|
28
|
+
:fieldset,
|
29
|
+
:form,
|
30
|
+
:h1,
|
31
|
+
:h2,
|
32
|
+
:h3,
|
33
|
+
:h4,
|
34
|
+
:h5,
|
35
|
+
:h6,
|
36
|
+
:head,
|
37
|
+
:hr,
|
38
|
+
:html,
|
39
|
+
:i,
|
40
|
+
:img,
|
41
|
+
:input,
|
42
|
+
:ins,
|
43
|
+
:kbd,
|
44
|
+
:label,
|
45
|
+
:legend,
|
46
|
+
:li,
|
47
|
+
:link,
|
48
|
+
:map,
|
49
|
+
:meta,
|
50
|
+
:noscript,
|
51
|
+
:object,
|
52
|
+
:ol,
|
53
|
+
:optgroup,
|
54
|
+
:option,
|
55
|
+
:p,
|
56
|
+
:param,
|
57
|
+
:pre,
|
58
|
+
:q,
|
59
|
+
:samp,
|
60
|
+
:script,
|
61
|
+
:select,
|
62
|
+
:small,
|
63
|
+
:span,
|
64
|
+
:strong,
|
65
|
+
:style,
|
66
|
+
:sub,
|
67
|
+
:sup,
|
68
|
+
:table,
|
69
|
+
:tbody,
|
70
|
+
:td,
|
71
|
+
:textarea,
|
72
|
+
:tfoot,
|
73
|
+
:th,
|
74
|
+
:thead,
|
75
|
+
:title,
|
76
|
+
:tr,
|
77
|
+
:tt,
|
78
|
+
:ul,
|
79
|
+
:var,
|
80
|
+
]
|
81
|
+
|
82
|
+
# define tag methods to delegate to selector_eval
|
83
|
+
methods = HTML_TAGS.map do |tag|
|
84
|
+
"def #{tag}(&block); selector_eval(@selector.first, '#{tag}', &block);end\n"
|
85
|
+
end.join
|
86
|
+
|
87
|
+
module_eval methods
|
88
|
+
|
89
|
+
end
|
data/test/basics.rb
ADDED
@@ -0,0 +1,107 @@
|
|
1
|
+
here = File.dirname(__FILE__)
|
2
|
+
require "#{here}/helper"
|
3
|
+
|
4
|
+
describe "Casuistry" do
|
5
|
+
|
6
|
+
it "can nest blocks" do
|
7
|
+
proc = lambda do
|
8
|
+
div do
|
9
|
+
form { width "35px" }
|
10
|
+
ul do
|
11
|
+
li { background :red }
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
data = [
|
17
|
+
["div", []],
|
18
|
+
["div form", ["width: 35px;"]],
|
19
|
+
["div ul", []],
|
20
|
+
["div ul li", ["background: red;"]]
|
21
|
+
]
|
22
|
+
Cssy.process(&proc).should == data
|
23
|
+
end
|
24
|
+
|
25
|
+
it "can chain blocks" do
|
26
|
+
proc = lambda do
|
27
|
+
p.smurf { color :blue }
|
28
|
+
p.gnome.hat { color :red }
|
29
|
+
end
|
30
|
+
|
31
|
+
data = [
|
32
|
+
["p.smurf", [ "color: blue;"]],
|
33
|
+
["p.gnome.hat", ["color: red;"]]
|
34
|
+
]
|
35
|
+
Cssy.process(&proc).should == data
|
36
|
+
end
|
37
|
+
|
38
|
+
it "can nest and chain" do
|
39
|
+
proc = lambda do
|
40
|
+
div do
|
41
|
+
span.ugly { font_family "Arial" }
|
42
|
+
end
|
43
|
+
end
|
44
|
+
|
45
|
+
data = [
|
46
|
+
["div", []],
|
47
|
+
["div span.ugly", ["font-family: Arial;"]]
|
48
|
+
]
|
49
|
+
Cssy.process(&proc).should == data
|
50
|
+
end
|
51
|
+
|
52
|
+
it "can chain and nest" do
|
53
|
+
proc = lambda do
|
54
|
+
ul.monkey do
|
55
|
+
li { list_style :none }
|
56
|
+
end
|
57
|
+
end
|
58
|
+
|
59
|
+
data = [
|
60
|
+
["ul.monkey", []],
|
61
|
+
["ul.monkey li", ["list-style: none;"]]
|
62
|
+
]
|
63
|
+
Cssy.process(&proc).should == data
|
64
|
+
end
|
65
|
+
|
66
|
+
it "can chain and nest and chain and ..." do
|
67
|
+
proc = lambda do
|
68
|
+
div do
|
69
|
+
div.milk!.toast do
|
70
|
+
p.jam { margin :auto }
|
71
|
+
hr { background :green }
|
72
|
+
end
|
73
|
+
|
74
|
+
p { border :none }
|
75
|
+
end
|
76
|
+
end
|
77
|
+
|
78
|
+
data = [
|
79
|
+
["div", []],
|
80
|
+
["div div#milk.toast", []],
|
81
|
+
["div div#milk.toast p.jam", ["margin: auto;"]],
|
82
|
+
["div div#milk.toast hr", ["background: green;"]],
|
83
|
+
["div p", ["border: none;"]]
|
84
|
+
]
|
85
|
+
Cssy.process(&proc).should == data
|
86
|
+
end
|
87
|
+
|
88
|
+
|
89
|
+
it "processes strings" do
|
90
|
+
fiddle = [
|
91
|
+
["div", ["background: red;", "width: 9934px;"]],
|
92
|
+
["div ul li", ["color: green;"]],
|
93
|
+
["div p.ugly.truly", ["color: aqua;"]],
|
94
|
+
["div .smurf.house", ["height: 256px;"]],
|
95
|
+
["div #menu", ["padding: 10px;"]],
|
96
|
+
[".gargamel", ["margin: 0px;"]],
|
97
|
+
[".outer.middle.inner", ["top: 34px;"]]
|
98
|
+
]
|
99
|
+
c = Cssy.new
|
100
|
+
c.process(File.read( "#{here}/fiddle.cssy"))
|
101
|
+
c.data.should == fiddle
|
102
|
+
# c.output.should == File.read( "#{here}/fiddle.css")
|
103
|
+
end
|
104
|
+
|
105
|
+
|
106
|
+
|
107
|
+
end
|
data/test/dan.css
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
#content form ul.properties li.property hr { display: block; clear: left; float: none; height: 0; visibility: hidden; margin: -0.66em; padding: 0; }
|
2
|
+
|
3
|
+
#intro_text a.back{padding:0 0 2px 25px;font-weight:bold;background:url("/images/icons-back.gif") 0 0 no-repeat;}
|
4
|
+
|
5
|
+
|
6
|
+
div.ac_results { border: 1px solid silver; text-align: left; background-color: white; color: gray; padding: 5px; margin-top: -8px; }
|
7
|
+
|
8
|
+
div.preview { float: left ; height: 400px; }
|
9
|
+
div.preview iframe { border: none; display: block; position: relative; width: 490px; height: 340px; border: 1px solid silver; margin: 4px; padding: 30px 0; }
|
10
|
+
|
11
|
+
div.radio div.option, div.checkbox div.option { cursor: pointer; }
|
12
|
+
|
13
|
+
div.tab-selector span{color:gray;font-size:11px;text-align:center;display:block;float:left;height:26px;width:129px;padding:12px 8px 0px 8px;background:url( /images/tab/unselected.gif ) repeat-x;cursor:pointer;}
|
14
|
+
div.tab-selector span.selected{font-weight:bold;color:black;background:url( /images/tab/selected.gif ) repeat-x;}
|
15
|
+
|
16
|
+
div.text.value { margin-top: -4px; }
|
17
|
+
div.text.value input { height: 23px; width: 220px; border: none; background: url( /images/textfield_bg.gif) no-repeat;padding: 4px; font-size: 11px; font-weight: bold; color: gray; }
|
18
|
+
div.text.value textarea { width: 280px; height: 184px; font-size: 11px; color: gray; }
|
19
|
+
|
20
|
+
div.wizard { margin-right: 8px; float: left; }
|
21
|
+
form div.value { float: left; color: gray; }
|
22
|
+
form label { float: left; display: block; width: 80px; text-align: right; padding-right: 14px; color: gray; font-weight: bold; font-size: 13px; }
|
23
|
+
form ul.properties { display: block; margin: 0; padding: 0; clear: both; }
|
24
|
+
img.title { padding-bottom: 8px; }
|
25
|
+
|
26
|
+
li.property { display: block; list-style-type: none; clear: both; padding-bottom: 40px; }
|
27
|
+
li.code.property { display: none; }
|
28
|
+
|
29
|
+
li.size div.option { background: url( /images/bt_radio_off.gif) no-repeat; padding-left: 17px; height: 21px; font-size: 13px; }
|
30
|
+
li.size div.option.selected { background: url( /images/bt_radio_on.gif) no-repeat; padding-left: 17px; height: 21px; font-size: 13px; }
|
31
|
+
|
32
|
+
li.style div.option { float: left; border: 1px solid silver; padding: 1px; margin-left: 4px; opacity: 0.5; }
|
33
|
+
li.style div.option.hover, li.style div.option.selected { border: 1px solid gray; }
|
34
|
+
li.style div.option.selected { opacity: 1.0; }
|
35
|
+
|
36
|
+
li.tos div.option { background: url( /images/checkbox.gif ) no-repeat; padding-left: 17px; }
|
37
|
+
|
38
|
+
ul.steps { display: block; margin: 0; padding: 0; clear: both; }
|
39
|
+
ul.steps li.step{display:none;width:403px;height:335px;margin-left:2px;padding:16px;list-style-type:none;border:1px solid silver;}
|
40
|
+
ul.steps li.step.selected { display: block; }
|
data/test/dan.cssy
ADDED
@@ -0,0 +1,160 @@
|
|
1
|
+
# within a class
|
2
|
+
|
3
|
+
class Widget
|
4
|
+
|
5
|
+
# need this to get stylesheet methods
|
6
|
+
include Casuistry
|
7
|
+
|
8
|
+
# add in Grid Layout support
|
9
|
+
include Casuistry::Grid
|
10
|
+
|
11
|
+
# changes default units to 10 x 10 pixel blocks
|
12
|
+
grid :columns => { :width => 10, :height => 10 }, :units => 'px'
|
13
|
+
|
14
|
+
# define some reusable stuff
|
15
|
+
def block ; display :block ; margin 0 ; padding 0 ; end
|
16
|
+
def wrap ; clear :both ; end
|
17
|
+
def left ; float :left ; end
|
18
|
+
def dark ; color :gray ; end
|
19
|
+
def style light ; color :silver ; end
|
20
|
+
def large ; font :size => '13px' ; end
|
21
|
+
def small ; font :size => '11px' ; end
|
22
|
+
|
23
|
+
# generate a "CSS reset" and include some other stylesheets
|
24
|
+
reset ; include Main ; include Products
|
25
|
+
|
26
|
+
intro_text! / a.back do
|
27
|
+
padding :top => 0, :left => 0, :bottom => 2, :right => 2
|
28
|
+
font :weight => :bold ; background :url => '/images/icons-back.gif', :repeat => false
|
29
|
+
end
|
30
|
+
|
31
|
+
img.title { padding :bottom => 1 }
|
32
|
+
|
33
|
+
div.wizard do
|
34
|
+
|
35
|
+
left ; margin :right => 1
|
36
|
+
|
37
|
+
ul.steps do
|
38
|
+
|
39
|
+
block
|
40
|
+
|
41
|
+
li.step do
|
42
|
+
block ; display false;
|
43
|
+
width 40 ; height 33.5
|
44
|
+
margin :left => '2px' ; padding 1.5
|
45
|
+
border '1px solid silver'
|
46
|
+
|
47
|
+
add '.selected' { display :block }
|
48
|
+
|
49
|
+
end
|
50
|
+
|
51
|
+
end
|
52
|
+
|
53
|
+
div.tab-selector span do
|
54
|
+
dark ; small ; centered ; block ; left
|
55
|
+
height 2.5 ; width 13 ; padding '12px 8px 0 8px' ; cursor :pointer
|
56
|
+
background :url => '/images/tab/unselected.gif', :repeat => :x
|
57
|
+
self & selected do
|
58
|
+
font :weight => :bold ; color :black
|
59
|
+
background :url => '/images/tab/selected.gif', :repeat => :x
|
60
|
+
end
|
61
|
+
end
|
62
|
+
|
63
|
+
form do
|
64
|
+
|
65
|
+
ul.properties do
|
66
|
+
|
67
|
+
block
|
68
|
+
|
69
|
+
li.property do
|
70
|
+
|
71
|
+
block ; padding :bottom => 4
|
72
|
+
|
73
|
+
label do
|
74
|
+
block ; left ; dark ; large
|
75
|
+
width 8 ; text_align :right
|
76
|
+
padding :right => 2 ; font :weight => :bold
|
77
|
+
end
|
78
|
+
|
79
|
+
div.value { left ; dark }
|
80
|
+
|
81
|
+
div.radio.value | div.checkbox.value do
|
82
|
+
div.option do
|
83
|
+
large ; padding :left => 2 ; height 2 ; cursor :pointer
|
84
|
+
background :url => '/images/bt_radio_off.gif', :repeat => false
|
85
|
+
end
|
86
|
+
end
|
87
|
+
|
88
|
+
div.text.value do
|
89
|
+
|
90
|
+
small ; dark ; margin :top => '-4px'
|
91
|
+
|
92
|
+
input do
|
93
|
+
height 2 ; width 22 ; border false; background :url => '/images/textfield_bg.gif', :repeat => false
|
94
|
+
padding 0.5 ; font :weight => :bold
|
95
|
+
end
|
96
|
+
|
97
|
+
textarea { width 28 ; height 18 }
|
98
|
+
|
99
|
+
end
|
100
|
+
|
101
|
+
end
|
102
|
+
|
103
|
+
li.size.property do
|
104
|
+
|
105
|
+
div.option do
|
106
|
+
background :url => '/images/bt_radio_off.gif', :repeat => false
|
107
|
+
padding :left => 2 ; height 2 ; large
|
108
|
+
|
109
|
+
self & selected do
|
110
|
+
background :url => '/images/bt_radio_on.gif', :repeat => false
|
111
|
+
padding :left => 2 ; height 2 ; large
|
112
|
+
end
|
113
|
+
|
114
|
+
end
|
115
|
+
|
116
|
+
end
|
117
|
+
|
118
|
+
li.style.property do
|
119
|
+
|
120
|
+
div.option do
|
121
|
+
left ; border '1px solid silver' ; padding '1px' ; margin-left 0.5 ; opacity 0.5
|
122
|
+
end
|
123
|
+
|
124
|
+
div.option.hover | div.option.selected { border '1px solid gray' }
|
125
|
+
|
126
|
+
div.option.selected { opacity 1.0 }
|
127
|
+
|
128
|
+
end
|
129
|
+
|
130
|
+
li.tos.property / div.option
|
131
|
+
background :url => '/images/checkbox.gif', :repeat => false ; padding :left => 2
|
132
|
+
end
|
133
|
+
|
134
|
+
li.code.property { display false }
|
135
|
+
|
136
|
+
end
|
137
|
+
|
138
|
+
end
|
139
|
+
|
140
|
+
end
|
141
|
+
|
142
|
+
div.preview do
|
143
|
+
|
144
|
+
left ; height 40
|
145
|
+
|
146
|
+
iframe do
|
147
|
+
block ; height 34 ; width 49 ; position :relative
|
148
|
+
margin 0.5 ; padding :top => 3, :left => 0
|
149
|
+
border '1px solid silver'
|
150
|
+
end
|
151
|
+
|
152
|
+
div.ac_results do
|
153
|
+
padding 0.5 ; margin :top => 1
|
154
|
+
border '1px solid silver' ; text_align :left ; dark
|
155
|
+
background :color => :white ;
|
156
|
+
end
|
157
|
+
|
158
|
+
end
|
159
|
+
|
160
|
+
end
|
data/test/fiddle.css
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
ul
|
2
|
+
{
|
3
|
+
background: red;
|
4
|
+
width: 134px;
|
5
|
+
}
|
6
|
+
ul li .ugly
|
7
|
+
{
|
8
|
+
color: green;
|
9
|
+
}
|
10
|
+
ul .smurf .house
|
11
|
+
{
|
12
|
+
height: 256px;
|
13
|
+
}
|
14
|
+
ul #asrael
|
15
|
+
{
|
16
|
+
padding: 10px;
|
17
|
+
}
|
18
|
+
.gargamel
|
19
|
+
{
|
20
|
+
margin: 0px;
|
21
|
+
}
|
22
|
+
.outer .middle .inner
|
23
|
+
{
|
24
|
+
top: 34px;
|
25
|
+
}
|
data/test/fiddle.cssy
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
|
2
|
+
div do
|
3
|
+
|
4
|
+
# this is a property on div
|
5
|
+
background :red
|
6
|
+
|
7
|
+
selector('ul li') do
|
8
|
+
color('green')
|
9
|
+
end
|
10
|
+
|
11
|
+
p.ugly.truly do
|
12
|
+
color('aqua')
|
13
|
+
end
|
14
|
+
|
15
|
+
selector('.smurf').house do
|
16
|
+
height('256px')
|
17
|
+
end
|
18
|
+
|
19
|
+
menu! do
|
20
|
+
padding("10px")
|
21
|
+
end
|
22
|
+
|
23
|
+
# this is a property on div, again
|
24
|
+
width('9934px')
|
25
|
+
|
26
|
+
end
|
27
|
+
|
28
|
+
gargamel do
|
29
|
+
margin("0px")
|
30
|
+
end
|
31
|
+
|
32
|
+
selector('.outer.middle.inner') do
|
33
|
+
top("34px")
|
34
|
+
end
|
data/test/helper.rb
ADDED
data/test/nesting.cssy
ADDED
data/test/test.css
ADDED
data/test/test.cssy
ADDED
metadata
ADDED
@@ -0,0 +1,76 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: casuistry
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.2.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Matthew King
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
|
12
|
+
date: 2008-07-09 00:00:00 -05:00
|
13
|
+
default_executable:
|
14
|
+
dependencies: []
|
15
|
+
|
16
|
+
description: Generates CSS using Ruby, like Markaby
|
17
|
+
email: automatthew@gmail.com
|
18
|
+
executables: []
|
19
|
+
|
20
|
+
extensions: []
|
21
|
+
|
22
|
+
extra_rdoc_files:
|
23
|
+
- lib/casuistry.rb
|
24
|
+
- lib/properties.rb
|
25
|
+
- lib/tags.rb
|
26
|
+
- README.rdoc
|
27
|
+
files:
|
28
|
+
- casuistry.gemspec
|
29
|
+
- lib/casuistry.rb
|
30
|
+
- lib/properties.rb
|
31
|
+
- lib/tags.rb
|
32
|
+
- Manifest
|
33
|
+
- README.rdoc
|
34
|
+
- test/basics.rb
|
35
|
+
- test/dan.css
|
36
|
+
- test/dan.cssy
|
37
|
+
- test/fiddle.css
|
38
|
+
- test/fiddle.cssy
|
39
|
+
- test/helper.rb
|
40
|
+
- test/nesting.cssy
|
41
|
+
- test/test.css
|
42
|
+
- test/test.cssy
|
43
|
+
has_rdoc: true
|
44
|
+
homepage: ""
|
45
|
+
post_install_message:
|
46
|
+
rdoc_options:
|
47
|
+
- --line-numbers
|
48
|
+
- --inline-source
|
49
|
+
- --title
|
50
|
+
- Casuistry
|
51
|
+
- --main
|
52
|
+
- README.rdoc
|
53
|
+
require_paths:
|
54
|
+
- lib
|
55
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
56
|
+
requirements:
|
57
|
+
- - ">="
|
58
|
+
- !ruby/object:Gem::Version
|
59
|
+
version: "0"
|
60
|
+
version:
|
61
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
62
|
+
requirements:
|
63
|
+
- - ">="
|
64
|
+
- !ruby/object:Gem::Version
|
65
|
+
version: "0"
|
66
|
+
version:
|
67
|
+
requirements: []
|
68
|
+
|
69
|
+
rubyforge_project: casuistry
|
70
|
+
rubygems_version: 1.2.0
|
71
|
+
signing_key:
|
72
|
+
specification_version: 2
|
73
|
+
summary: Generates CSS using Ruby, like Markaby
|
74
|
+
test_files:
|
75
|
+
- test/basics.rb
|
76
|
+
- test/helper.rb
|