arbre 1.1.1 → 1.2.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
data/Rakefile CHANGED
@@ -4,7 +4,10 @@ Bundler::GemHelper.install_tasks
4
4
  require 'rspec/core/rake_task'
5
5
  RSpec::Core::RakeTask.new(:spec)
6
6
 
7
- task default: :spec
7
+ import 'tasks/lint.rake'
8
+ import 'tasks/release.rake'
9
+
10
+ task default: [:spec, :lint]
8
11
 
9
12
  task :console do
10
13
  require 'irb'
@@ -18,5 +18,7 @@ Gem::Specification.new do |s|
18
18
  s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
19
19
  s.require_paths = ["lib"]
20
20
 
21
+ s.required_ruby_version = '>= 2.3'
22
+
21
23
  s.add_dependency("activesupport", ">= 3.0.0")
22
24
  end
@@ -0,0 +1,2 @@
1
+ gem 'github-pages'
2
+ gem 'jekyll-redirect-from'
@@ -0,0 +1,7 @@
1
+ plugins:
2
+ - jekyll-redirect-from
3
+
4
+ defaults:
5
+ -
6
+ values:
7
+ layout: "default"
@@ -0,0 +1,8 @@
1
+ <p id="footer">
2
+ <div class="left">
3
+ Copyright 2011 <a href="http://gregbell.ca/">Greg Bell</a> and <a href="http://www.versapay.com/">VersaPay</a>
4
+ </div>
5
+ <div class="right">
6
+ <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a></p>
7
+ </div>
8
+ </p>
@@ -0,0 +1,16 @@
1
+ <script type="text/javascript">
2
+
3
+ var _gaq = _gaq || [];
4
+ _gaq.push(['_setAccount', 'UA-23306458-1']);
5
+ _gaq.push(['_trackPageview']);
6
+
7
+ (function () {
8
+ var ga = document.createElement('script');
9
+ ga.type = 'text/javascript';
10
+ ga.async = true;
11
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
12
+ var s = document.getElementsByTagName('script')[0];
13
+ s.parentNode.insertBefore(ga, s);
14
+ })();
15
+
16
+ </script>
@@ -0,0 +1,7 @@
1
+ <head>
2
+ <title>Arbre | HTML Views in Ruby</title>
3
+ <link href='//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='stylesheet' type='text/css'>
4
+ <link href='//fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
5
+ <link href="{{ site.baseurl }}/stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
6
+ <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
7
+ </head>
@@ -0,0 +1,12 @@
1
+ <ol class='level-1'>
2
+ <li><a href='{{ site.baseurl }}'>Contents</a></li>
3
+ <ol class='level-2'>
4
+ <li><a href='{{ site.baseurl }}#introduction'>Introduction</a></li>
5
+ <li><a href='{{ site.baseurl }}#installation'>Installation</a></li>
6
+ <li><a href='{{ site.baseurl }}#tags'>Tags</a></li>
7
+ <li><a href='{{ site.baseurl }}#componenets'>Components</a></li>
8
+ <li><a href='{{ site.baseurl }}#contexts'>Contexts</a></li>
9
+ <!-- li><a href='{{ site.baseurl }}/documentation.html#layouts'>Layouts</a></li -->
10
+ <li><a href='{{ site.baseurl }}#background'>Background</a></li>
11
+ </ol>
12
+ </ol>
@@ -0,0 +1,8 @@
1
+ <div id="header">
2
+ <h1><a href="{{ site.baseurl }}/index.html"><span>Arbre</span></a></h1>
3
+
4
+ <div id="nav">
5
+ <!-- a href="{{ site.baseurl }}/documentation.html">Documentation</a -->
6
+ <a href="http://github.com/activeadmin/arbre">Get the Code</a>
7
+ </div>
8
+ </div>
@@ -0,0 +1,21 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ {% include head.html %}
4
+ <body class="with-sidebar">
5
+ <div id="wrapper">
6
+ {% include top-menu.html %}
7
+ <div id="main-content">
8
+ <div class='toc'>
9
+ {% include toc.html %}
10
+ </div>
11
+ <div class='toc-content'>
12
+ <div class='docs-content'>
13
+ {{ content }}
14
+ </div>
15
+ </div>
16
+ </div>
17
+ {% include footer.html %}
18
+ </div>
19
+ {% include google-analytics.html %}
20
+ </body>
21
+ </html>
@@ -0,0 +1,106 @@
1
+ ---
2
+ redirect_from: /docs/documentation.html
3
+ ---
4
+ # Arbre
5
+ HTML Views in Ruby
6
+
7
+ ### Introduction
8
+
9
+ Arbre is a alternate template system for [Ruby on Rails Action View](http://guides.rubyonrails.org/action_view_overview.html).
10
+ Arbre expresses HTML using a Ruby DSL, which makes it similar to the [Builder](https://github.com/tenderlove/builder) gem for XML.
11
+ Arbre was extracted from [Active Admin](https://activeadmin.info/).
12
+
13
+ An example `index.html.arb`:
14
+
15
+ ```ruby
16
+ html {
17
+ head {
18
+ title "Welcome page"
19
+ }
20
+ body {
21
+ para "Hello, world"
22
+ }
23
+ }
24
+ ```
25
+
26
+ The purpose of Arbre is to leave the view as Ruby objects as long as possible,
27
+ which allows an object-oriented approach including inheritance, composition, and encapsulation.
28
+
29
+ ### Installation
30
+
31
+ Add gem `arbre` to your `Gemfile` and `bundle install`.
32
+
33
+ Arbre registers itself as a Rails template handler for files with an extension `.arb`.
34
+
35
+ ### Tags
36
+
37
+ Arbre DSL is composed of HTML tags. Tag attributes including `id` and HTML classes are passed as a hash parameter and the tag body is passed as a block. Most HTML5 tags are implemented, including `script`, `embed` and `video`.
38
+
39
+ A special case is the paragraph tag, <p>, which is mapped to `para`.
40
+
41
+ JavaScript can be included by using `script { raw ... }`
42
+
43
+ To include text that is not immediately part of a tag use `text_node`.
44
+
45
+ ### Components
46
+
47
+ Arbre DSL can be extended by defining new tags composed of other, simpler tags.
48
+ This provides a simpler alternative to nesting partials.
49
+ The recommended approach is to subclass Arbre::Component and implement a new builder method.
50
+
51
+ The builder_method defines the method that will be called to build this component
52
+ when using the DSL. The arguments passed into the builder_method will be passed
53
+ into the #build method for you.
54
+
55
+ For example:
56
+
57
+ ```ruby
58
+ class Panel < Arbre::Component
59
+ builder_method :panel
60
+
61
+ def build(title, attributes = {})
62
+ super(attributes)
63
+
64
+ h3(title, class: "panel-title")
65
+ end
66
+ end
67
+ ```
68
+
69
+ By default components are `div` tags with an HTML class corresponding to the component class name. This can be overridden by redefining the `tag_name` method.
70
+
71
+ Several examples of Arbre components are [included in Active Admin](https://activeadmin.info/12-arbre-components.html)
72
+
73
+ ### Contexts
74
+
75
+ An [Arbre::Context](http://www.rubydoc.info/gems/arbre/Arbre/Context) is an object in which Arbre DSL is interpreted, providing a root for the Ruby DOM that can be [searched and manipulated](http://www.rubydoc.info/gems/arbre/Arbre/Element). A context is automatically provided when a `.arb` template or partial is loaded. Contexts can be used when developing or testing a component. Contexts are rendered by calling to_s.
76
+
77
+ ```ruby
78
+ html = Arbre::Context.new do
79
+ panel "Hello World", id: "my-panel" do
80
+ span "Inside the panel"
81
+ text_node "Plain text"
82
+ end
83
+ end
84
+
85
+ puts html.to_s # =>
86
+ ```
87
+
88
+ ```html
89
+ <div class='panel' id="my-panel">
90
+ <h3 class='panel-title'>Hello World</h3>
91
+ <span>Inside the panel</span>
92
+ Plain text
93
+ </div>
94
+ ```
95
+
96
+ A context allows you to specify Rails template assigns, aka. 'locals' and helper methods. Templates loaded by Action View have access to all [Action View helper methods](http://guides.rubyonrails.org/action_view_overview.html#overview-of-helpers-provided-by-action-view)
97
+
98
+ ### Background
99
+
100
+ Similar projects include:
101
+ - [Markaby](http://markaby.github.io/), written by \_why the luck stiff.
102
+ - [Erector](http://erector.github.io/), developed at PivotalLabs.
103
+ - [Fortitude](https://github.com/ageweke/fortitude), developed at Scribd.
104
+ - [Inesita](https://inesita.fazibear.me/) (Opal)
105
+ - [html_builder](https://github.com/crystal-lang/html_builder) (Crystal)
106
+
@@ -0,0 +1,1152 @@
1
+ html, body, div, span, applet, object, iframe,
2
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
+ a, abbr, acronym, address, big, cite, code,
4
+ del, dfn, em, img, ins, kbd, q, s, samp,
5
+ small, strike, strong, sub, sup, tt, var,
6
+ b, u, i, center,
7
+ dl, dt, dd, ol, ul, li,
8
+ fieldset, form, label, legend,
9
+ table, caption, tbody, tfoot, thead, tr, th, td,
10
+ article, aside, canvas, details, embed,
11
+ figure, figcaption, footer, header, hgroup,
12
+ menu, nav, output, ruby, section, summary,
13
+ time, mark, audio, video {
14
+ margin: 0;
15
+ padding: 0;
16
+ border: 0;
17
+ font-size: 100%;
18
+ font: inherit;
19
+ vertical-align: baseline;
20
+ }
21
+
22
+ body {
23
+ line-height: 1;
24
+ }
25
+
26
+ ol, ul {
27
+ list-style: none;
28
+ }
29
+
30
+ table {
31
+ border-collapse: collapse;
32
+ border-spacing: 0;
33
+ }
34
+
35
+ caption, th, td {
36
+ text-align: left;
37
+ font-weight: normal;
38
+ vertical-align: middle;
39
+ }
40
+
41
+ q, blockquote {
42
+ quotes: none;
43
+ }
44
+
45
+ q:before, q:after, blockquote:before, blockquote:after {
46
+ content: "";
47
+ content: none;
48
+ }
49
+
50
+ a img {
51
+ border: none;
52
+ }
53
+
54
+ article, aside, details, figcaption, figure,
55
+ footer, header, hgroup, menu, nav, section {
56
+ display: block;
57
+ }
58
+
59
+ #dsl {
60
+ /* Comment */
61
+ /* Error */
62
+ /* Keyword */
63
+ /* Literal */
64
+ /* Name */
65
+ /* Operator */
66
+ /* Punctuation */
67
+ /* Comment.Multiline */
68
+ /* Comment.Preproc */
69
+ /* Comment.Single */
70
+ /* Comment.Special */
71
+ /* Generic.Emph */
72
+ /* Generic.Strong */
73
+ /* Keyword.Constant */
74
+ /* Keyword.Declaration */
75
+ /* Keyword.Namespace */
76
+ /* Keyword.Pseudo */
77
+ /* Keyword.Reserved */
78
+ /* Keyword.Type */
79
+ /* Literal.Date */
80
+ /* Literal.Number */
81
+ /* Literal.String */
82
+ /* Name.Attribute */
83
+ /* Name.Builtin */
84
+ /* Name.Class */
85
+ /* Name.Constant */
86
+ /* Name.Decorator */
87
+ /* Name.Entity */
88
+ /* Name.Exception */
89
+ /* Name.Function */
90
+ /* Name.Label */
91
+ /* Name.Namespace */
92
+ /* Name.Other */
93
+ /* Name.Property */
94
+ /* Name.Tag */
95
+ /* Name.Variable */
96
+ /* Operator.Word */
97
+ /* Text.Whitespace */
98
+ /* Literal.Number.Float */
99
+ /* Literal.Number.Hex */
100
+ /* Literal.Number.Integer */
101
+ /* Literal.Number.Oct */
102
+ /* Literal.String.Backtick */
103
+ /* Literal.String.Char */
104
+ /* Literal.String.Doc */
105
+ /* Literal.String.Double */
106
+ /* Literal.String.Escape */
107
+ /* Literal.String.Heredoc */
108
+ /* Literal.String.Interpol */
109
+ /* Literal.String.Other */
110
+ /* Literal.String.Regex */
111
+ /* Literal.String.Single */
112
+ /* Literal.String.Symbol */
113
+ /* Name.Builtin.Pseudo */
114
+ /* Name.Variable.Class */
115
+ /* Name.Variable.Global */
116
+ /* Name.Variable.Instance */
117
+ /* Literal.Number.Integer.Long */
118
+ }
119
+
120
+ #dsl .highlight .hll {
121
+ background-color: #49483e;
122
+ }
123
+
124
+ #dsl .highlight {
125
+ background: #272822;
126
+ color: #f8f8f2;
127
+ }
128
+
129
+ #dsl .highlight .c {
130
+ color: #75715e;
131
+ }
132
+
133
+ #dsl .highlight .err {
134
+ color: #960050;
135
+ background-color: #1e0010;
136
+ }
137
+
138
+ #dsl .highlight .k {
139
+ color: #66d9ef;
140
+ }
141
+
142
+ #dsl .highlight .l {
143
+ color: #ae81ff;
144
+ }
145
+
146
+ #dsl .highlight .n {
147
+ color: #f8f8f2;
148
+ }
149
+
150
+ #dsl .highlight .o {
151
+ color: #f92672;
152
+ }
153
+
154
+ #dsl .highlight .p {
155
+ color: #f8f8f2;
156
+ }
157
+
158
+ #dsl .highlight .cm {
159
+ color: #75715e;
160
+ }
161
+
162
+ #dsl .highlight .cp {
163
+ color: #75715e;
164
+ }
165
+
166
+ #dsl .highlight .c1 {
167
+ color: #75715e;
168
+ }
169
+
170
+ #dsl .highlight .cs {
171
+ color: #75715e;
172
+ }
173
+
174
+ #dsl .highlight .ge {
175
+ font-style: italic;
176
+ }
177
+
178
+ #dsl .highlight .gs {
179
+ font-weight: bold;
180
+ }
181
+
182
+ #dsl .highlight .kc {
183
+ color: #66d9ef;
184
+ }
185
+
186
+ #dsl .highlight .kd {
187
+ color: #66d9ef;
188
+ }
189
+
190
+ #dsl .highlight .kn {
191
+ color: #f92672;
192
+ }
193
+
194
+ #dsl .highlight .kp {
195
+ color: #66d9ef;
196
+ }
197
+
198
+ #dsl .highlight .kr {
199
+ color: #66d9ef;
200
+ }
201
+
202
+ #dsl .highlight .kt {
203
+ color: #66d9ef;
204
+ }
205
+
206
+ #dsl .highlight .ld {
207
+ color: #e6db74;
208
+ }
209
+
210
+ #dsl .highlight .m {
211
+ color: #ae81ff;
212
+ }
213
+
214
+ #dsl .highlight .s {
215
+ color: #e6db74;
216
+ }
217
+
218
+ #dsl .highlight .na {
219
+ color: #a6e22e;
220
+ }
221
+
222
+ #dsl .highlight .nb {
223
+ color: #f8f8f2;
224
+ }
225
+
226
+ #dsl .highlight .nc {
227
+ color: #a6e22e;
228
+ }
229
+
230
+ #dsl .highlight .no {
231
+ color: #66d9ef;
232
+ }
233
+
234
+ #dsl .highlight .nd {
235
+ color: #a6e22e;
236
+ }
237
+
238
+ #dsl .highlight .ni {
239
+ color: #f8f8f2;
240
+ }
241
+
242
+ #dsl .highlight .ne {
243
+ color: #a6e22e;
244
+ }
245
+
246
+ #dsl .highlight .nf {
247
+ color: #a6e22e;
248
+ }
249
+
250
+ #dsl .highlight .nl {
251
+ color: #f8f8f2;
252
+ }
253
+
254
+ #dsl .highlight .nn {
255
+ color: #f8f8f2;
256
+ }
257
+
258
+ #dsl .highlight .nx {
259
+ color: #a6e22e;
260
+ }
261
+
262
+ #dsl .highlight .py {
263
+ color: #f8f8f2;
264
+ }
265
+
266
+ #dsl .highlight .nt {
267
+ color: #f92672;
268
+ }
269
+
270
+ #dsl .highlight .nv {
271
+ color: #f8f8f2;
272
+ }
273
+
274
+ #dsl .highlight .ow {
275
+ color: #f92672;
276
+ }
277
+
278
+ #dsl .highlight .w {
279
+ color: #f8f8f2;
280
+ }
281
+
282
+ #dsl .highlight .mf {
283
+ color: #ae81ff;
284
+ }
285
+
286
+ #dsl .highlight .mh {
287
+ color: #ae81ff;
288
+ }
289
+
290
+ #dsl .highlight .mi {
291
+ color: #ae81ff;
292
+ }
293
+
294
+ #dsl .highlight .mo {
295
+ color: #ae81ff;
296
+ }
297
+
298
+ #dsl .highlight .sb {
299
+ color: #e6db74;
300
+ }
301
+
302
+ #dsl .highlight .sc {
303
+ color: #e6db74;
304
+ }
305
+
306
+ #dsl .highlight .sd {
307
+ color: #e6db74;
308
+ }
309
+
310
+ #dsl .highlight .s2 {
311
+ color: #e6db74;
312
+ }
313
+
314
+ #dsl .highlight .se {
315
+ color: #ae81ff;
316
+ }
317
+
318
+ #dsl .highlight .sh {
319
+ color: #e6db74;
320
+ }
321
+
322
+ #dsl .highlight .si {
323
+ color: #e6db74;
324
+ }
325
+
326
+ #dsl .highlight .sx {
327
+ color: #e6db74;
328
+ }
329
+
330
+ #dsl .highlight .sr {
331
+ color: #e6db74;
332
+ }
333
+
334
+ #dsl .highlight .s1 {
335
+ color: #e6db74;
336
+ }
337
+
338
+ #dsl .highlight .ss {
339
+ color: #AE81FF;
340
+ }
341
+
342
+ #dsl .highlight .bp {
343
+ color: #f8f8f2;
344
+ }
345
+
346
+ #dsl .highlight .vc {
347
+ color: #f8f8f2;
348
+ }
349
+
350
+ #dsl .highlight .vg {
351
+ color: #f8f8f2;
352
+ }
353
+
354
+ #dsl .highlight .vi {
355
+ color: #f8f8f2;
356
+ }
357
+
358
+ #dsl .highlight .il {
359
+ color: #ae81ff;
360
+ }
361
+
362
+ body {
363
+ line-height: 1.5;
364
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
365
+ color: #333333;
366
+ font-size: 75%;
367
+ }
368
+
369
+ h1, h2, h3, h4, h5, h6 {
370
+ font-weight: normal;
371
+ color: #222222;
372
+ }
373
+
374
+ h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
375
+ margin: 0;
376
+ }
377
+
378
+ h1 {
379
+ font-size: 3em;
380
+ line-height: 1;
381
+ margin-bottom: 0.50em;
382
+ }
383
+
384
+ h2 {
385
+ font-size: 2em;
386
+ margin-bottom: 0.75em;
387
+ }
388
+
389
+ h3 {
390
+ font-size: 1.5em;
391
+ line-height: 1;
392
+ margin-bottom: 1.00em;
393
+ }
394
+
395
+ h4 {
396
+ font-size: 1.2em;
397
+ line-height: 1.25;
398
+ margin-bottom: 1.25em;
399
+ }
400
+
401
+ h5 {
402
+ font-size: 1em;
403
+ font-weight: bold;
404
+ margin-bottom: 1.50em;
405
+ }
406
+
407
+ h6 {
408
+ font-size: 1em;
409
+ font-weight: bold;
410
+ }
411
+
412
+ p {
413
+ margin: 0 0 1.5em;
414
+ }
415
+
416
+ p .left {
417
+ display: inline;
418
+ float: left;
419
+ margin: 1.5em 1.5em 1.5em 0;
420
+ padding: 0;
421
+ }
422
+
423
+ p .right {
424
+ display: inline;
425
+ float: right;
426
+ margin: 1.5em 0 1.5em 1.5em;
427
+ padding: 0;
428
+ }
429
+
430
+ a {
431
+ text-decoration: underline;
432
+ color: #0066cc;
433
+ }
434
+
435
+ a:visited {
436
+ color: #004c99;
437
+ }
438
+
439
+ a:focus {
440
+ color: #0099ff;
441
+ }
442
+
443
+ a:hover {
444
+ color: #0099ff;
445
+ }
446
+
447
+ a:active {
448
+ color: #bf00ff;
449
+ }
450
+
451
+ blockquote {
452
+ margin: 1.5em;
453
+ color: #666666;
454
+ font-style: italic;
455
+ }
456
+
457
+ strong, dfn {
458
+ font-weight: bold;
459
+ }
460
+
461
+ em, dfn {
462
+ font-style: italic;
463
+ }
464
+
465
+ sup, sub {
466
+ line-height: 0;
467
+ }
468
+
469
+ abbr, acronym {
470
+ border-bottom: 1px dotted #666666;
471
+ }
472
+
473
+ address {
474
+ margin: 0 0 1.5em;
475
+ font-style: italic;
476
+ }
477
+
478
+ del {
479
+ color: #666666;
480
+ }
481
+
482
+ pre {
483
+ margin: 1.5em 0;
484
+ white-space: pre;
485
+ }
486
+
487
+ pre, code, tt {
488
+ font: 1em "andale mono", "lucida console", monospace;
489
+ line-height: 1.5;
490
+ }
491
+
492
+ li ul, li ol {
493
+ margin: 0;
494
+ }
495
+
496
+ ul, ol {
497
+ margin: 0 1.5em 1.5em 0;
498
+ padding-left: 1.5em;
499
+ }
500
+
501
+ ul {
502
+ list-style-type: disc;
503
+ }
504
+
505
+ ol {
506
+ list-style-type: decimal;
507
+ }
508
+
509
+ dl {
510
+ margin: 0 0 1.5em 0;
511
+ }
512
+
513
+ dl dt {
514
+ font-weight: bold;
515
+ }
516
+
517
+ dd {
518
+ margin-left: 1.5em;
519
+ }
520
+
521
+ table {
522
+ margin-bottom: 1.4em;
523
+ width: 100%;
524
+ }
525
+
526
+ th {
527
+ font-weight: bold;
528
+ }
529
+
530
+ thead th {
531
+ background: #c3d9ff;
532
+ }
533
+
534
+ th, td, caption {
535
+ padding: 4px 10px 4px 5px;
536
+ }
537
+
538
+ table.striped tr:nth-child(even) td,
539
+ table tr.even td {
540
+ background: #e5ecf9;
541
+ }
542
+
543
+ tfoot {
544
+ font-style: italic;
545
+ }
546
+
547
+ caption {
548
+ background: #eeeeee;
549
+ }
550
+
551
+ .quiet {
552
+ color: #666666;
553
+ }
554
+
555
+ .loud {
556
+ color: #111111;
557
+ }
558
+
559
+ body {
560
+ background: #f6f4f1;
561
+ color: #676767;
562
+ width: 676px;
563
+ padding: 0 20px;
564
+ font-size: 95%;
565
+ margin: 25px auto;
566
+ font-family: 'Georgia';
567
+ }
568
+
569
+ body #wrapper {
570
+ position: relative;
571
+ }
572
+
573
+ body a, body a:hover, body a:link, body a:visited {
574
+ color: #407985;
575
+ }
576
+
577
+ body h1, body h2, body h3, body h4, body h5, body h6 {
578
+ color: #595959;
579
+ font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
580
+ }
581
+
582
+ body h1 a {
583
+ background: url("../images/activeadmin.png") 0 0 no-repeat;
584
+ display: block;
585
+ width: 257px;
586
+ height: 55px;
587
+ }
588
+
589
+ body h1 a span {
590
+ display: none;
591
+ }
592
+
593
+ body #header {
594
+ margin: 40px 0;
595
+ }
596
+
597
+ body .clear {
598
+ clear: both;
599
+ }
600
+
601
+ body .intro {
602
+ color: #595959;
603
+ font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
604
+ font-size: 3.2em;
605
+ font-weight: 300;
606
+ line-height: 1em;
607
+ margin-bottom: 0.3em;
608
+ padding-top: 35px;
609
+ background: url("../images/divider.png") 0 0 repeat-x;
610
+ }
611
+
612
+ body .intro strong {
613
+ font-weight: 400;
614
+ }
615
+
616
+ body h2 {
617
+ margin: 50px 0 10px 0;
618
+ padding-top: 35px;
619
+ background: url("../images/divider.png") 0 0 repeat-x;
620
+ font-size: 2.5em;
621
+ font-weight: 200;
622
+ line-height: 105%;
623
+ }
624
+
625
+ body h3 {
626
+ margin-top: 30px;
627
+ margin-bottom: 10px;
628
+ font-size: 1.7em;
629
+ font-weight: 300;
630
+ }
631
+
632
+ body #nav {
633
+ font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
634
+ font-weight: 400;
635
+ font-size: 1.2em;
636
+ text-transform: uppercase;
637
+ position: absolute;
638
+ right: 0;
639
+ top: 20px;
640
+ text-align: right;
641
+ }
642
+
643
+ body #nav a {
644
+ text-decoration: none;
645
+ color: #8b9091;
646
+ margin-left: 20px;
647
+ }
648
+
649
+ body #features {
650
+ padding-top: 0;
651
+ clear: both;
652
+ background: url("../images/features.png") 0 0 no-repeat;
653
+ margin: 0 -35px;
654
+ overflow: visible;
655
+ min-height: 569px;
656
+ font-size: 1.0em;
657
+ line-height: 1.2em;
658
+ font-weight: 300;
659
+ font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
660
+ }
661
+
662
+ body #features #features-left {
663
+ float: left;
664
+ width: 150px;
665
+ margin-left: -150px;
666
+ }
667
+
668
+ body #features #features-right {
669
+ float: right;
670
+ width: 150px;
671
+ margin-right: -150px;
672
+ }
673
+
674
+ body #features h3 {
675
+ font-size: 1.2em;
676
+ padding-bottom: 0;
677
+ margin-bottom: 5px;
678
+ }
679
+
680
+ body #features h3.first {
681
+ margin-top: 10px;
682
+ }
683
+
684
+ body.with-sidebar {
685
+ width: 976px;
686
+ }
687
+
688
+ body .toc {
689
+ font-family: Helvetica, Arial, sans-serif;
690
+ padding-top: 35px;
691
+ width: 270px;
692
+ float: right;
693
+ font-size: 0.9em;
694
+ background: url("../images/divider.png") top left repeat-x;
695
+ }
696
+
697
+ body .toc ol li {
698
+ list-style: none;
699
+ }
700
+
701
+ body .toc a, body .toc a:link, body .toc a:hover, body .toc a:visited {
702
+ text-decoration: none;
703
+ color: #595959;
704
+ }
705
+
706
+ body .toc ol.level-1 > li {
707
+ font-size: 1.0em;
708
+ font-weight: bold;
709
+ margin-top: 20px;
710
+ }
711
+
712
+ body .toc ol.level-1 > ol {
713
+ padding-left: 0;
714
+ font-size: 0.95em;
715
+ margin: 0;
716
+ }
717
+
718
+ body .toc ol.level-2 > ol {
719
+ display: none;
720
+ }
721
+
722
+ body .toc-content {
723
+ width: 676px;
724
+ }
725
+
726
+ body #dsl {
727
+ margin-top: 20px;
728
+ }
729
+
730
+ body #dsl .highlight {
731
+ font-size: 0.82em;
732
+ background: #292929 url("../images/code-header.png") 0 0 no-repeat;
733
+ padding: 40px 15px 20px 15px !important;
734
+ -moz-box-shadow: 0 8px 20px #444444;
735
+ -webkit-box-shadow: 0 8px 20px #444444;
736
+ -o-box-shadow: 0 8px 20px #444444;
737
+ box-shadow: 0 8px 20px #444444;
738
+ }
739
+
740
+ body .getting-started {
741
+ font-size: 2em;
742
+ text-align: center;
743
+ }
744
+
745
+ body .getting-started a {
746
+ margin-right: 15px;
747
+ display: block;
748
+ }
749
+
750
+ body .getting-started-heading {
751
+ text-align: center;
752
+ }
753
+
754
+ body .left {
755
+ float: left;
756
+ }
757
+
758
+ body .right {
759
+ float: right;
760
+ }
761
+
762
+ body .highlight {
763
+ background-color: #333;
764
+ font-family: "Droid Sans Mono", Monaco, monospace;
765
+ padding: 10px 5px;
766
+ font-size: 0.9em;
767
+ -moz-border-radius: 2px;
768
+ -webkit-border-radius: 2px;
769
+ -o-border-radius: 2px;
770
+ -ms-border-radius: 2px;
771
+ -khtml-border-radius: 2px;
772
+ border-radius: 2px;
773
+ margin-bottom: 1.5em;
774
+ }
775
+
776
+ body .highlight > pre, body .highlight code, body .highlight span {
777
+ line-height: 1.3em;
778
+ margin: 0;
779
+ padding: 0;
780
+ }
781
+
782
+ body #footer {
783
+ margin-top: 50px;
784
+ margin-bottom: 20px;
785
+ background: url("../images/divider.png") 0 0 repeat-x;
786
+ clear: both;
787
+ padding-top: 20px;
788
+ font-size: 0.9em;
789
+ }
790
+
791
+ body .post .post-date, body .post .post-meta {
792
+ font-size: 0.7em;
793
+ }
794
+
795
+ body .post .post-date {
796
+ display: inline-block;
797
+ width: 100px;
798
+ }
799
+
800
+ body .post .post-meta {
801
+ font-size: 0.6em;
802
+ padding-left: 40px;
803
+ }
804
+
805
+ span.breadcrumb {
806
+ display: block;
807
+ font-size: 45%;
808
+ font-weight: 200;
809
+ margin: 0;
810
+ padding: 0;
811
+ }
812
+
813
+ h2.in-docs {
814
+ font-weight: 400;
815
+ }
816
+
817
+ .docs-content {
818
+ /* Comment */
819
+ /* Error */
820
+ /* Keyword */
821
+ /* Comment.Multiline */
822
+ /* Comment.Preproc */
823
+ /* Comment.Single */
824
+ /* Comment.Special */
825
+ /* Generic.Deleted */
826
+ /* Generic.Emph */
827
+ /* Generic.Error */
828
+ /* Generic.Heading */
829
+ /* Generic.Inserted */
830
+ /* Generic.Output */
831
+ /* Generic.Prompt */
832
+ /* Generic.Strong */
833
+ /* Generic.Subheading */
834
+ /* Generic.Traceback */
835
+ /* Keyword.Constant */
836
+ /* Keyword.Declaration */
837
+ /* Keyword.Namespace */
838
+ /* Keyword.Pseudo */
839
+ /* Keyword.Reserved */
840
+ /* Keyword.Type */
841
+ /* Literal.Number */
842
+ /* Name */
843
+ /* Name */
844
+ /* Literal.String */
845
+ /* Name.Attribute */
846
+ /* Name.Builtin */
847
+ /* Name.Class */
848
+ /* Name.Constant */
849
+ /* Name.Decorator */
850
+ /* Name.Entity */
851
+ /* Name.Function */
852
+ /* Name.Namespace */
853
+ /* Name.Tag */
854
+ /* Name.Variable */
855
+ /* Operator.Word */
856
+ /* Text.Whitespace */
857
+ /* Literal.Number.Float */
858
+ /* Literal.Number.Hex */
859
+ /* Literal.Number.Integer */
860
+ /* Literal.Number.Oct */
861
+ /* Literal.String.Backtick */
862
+ /* Literal.String.Char */
863
+ /* Literal.String.Doc */
864
+ /* Literal.String.Double */
865
+ /* Literal.String.Escape */
866
+ /* Literal.String.Heredoc */
867
+ /* Literal.String.Interpol */
868
+ /* Literal.String.Other */
869
+ /* Literal.String.Regex */
870
+ /* Literal.String.Single */
871
+ /* Literal.String.Symbol */
872
+ /* Name.Builtin.Pseudo */
873
+ /* Name.Variable.Class */
874
+ /* Name.Variable.Global */
875
+ /* Name.Variable.Instance */
876
+ /* Literal.Number.Integer.Long */
877
+ }
878
+
879
+ .docs-content h3 {
880
+ margin-top: 50px;
881
+ margin-bottom: 10px;
882
+ font-size: 2em;
883
+ font-weight: 400;
884
+ }
885
+
886
+ .docs-content h4 {
887
+ font-size: 1.5em;
888
+ font-weight: 400;
889
+ margin-bottom: 0;
890
+ }
891
+
892
+ .docs-content p, .docs-content li {
893
+ font-family: Helvetica, Arial, sans-serif;
894
+ font-size: 0.9em;
895
+ }
896
+
897
+ .docs-content .highlight {
898
+ font-size: 0.85em;
899
+ background-color: #ece8e1;
900
+ color: #000000;
901
+ }
902
+
903
+ .docs-content .highlight .hll {
904
+ background-color: #ffffcc;
905
+ }
906
+
907
+ .docs-content .highlight .c {
908
+ color: #aaaaaa;
909
+ font-style: italic;
910
+ }
911
+
912
+ .docs-content .highlight .err {
913
+ color: #F00000;
914
+ background-color: #F0A0A0;
915
+ }
916
+
917
+ .docs-content .highlight .k {
918
+ color: #0000aa;
919
+ }
920
+
921
+ .docs-content .highlight .cm {
922
+ color: #aaaaaa;
923
+ font-style: italic;
924
+ }
925
+
926
+ .docs-content .highlight .cp {
927
+ color: #4c8317;
928
+ }
929
+
930
+ .docs-content .highlight .c1 {
931
+ color: #aaaaaa;
932
+ font-style: italic;
933
+ }
934
+
935
+ .docs-content .highlight .cs {
936
+ color: #0000aa;
937
+ font-style: italic;
938
+ }
939
+
940
+ .docs-content .highlight .gd {
941
+ color: #aa0000;
942
+ }
943
+
944
+ .docs-content .highlight .ge {
945
+ font-style: italic;
946
+ }
947
+
948
+ .docs-content .highlight .gr {
949
+ color: #aa0000;
950
+ }
951
+
952
+ .docs-content .highlight .gh {
953
+ color: #000080;
954
+ font-weight: bold;
955
+ }
956
+
957
+ .docs-content .highlight .gi {
958
+ color: #00aa00;
959
+ }
960
+
961
+ .docs-content .highlight .go {
962
+ color: #888888;
963
+ }
964
+
965
+ .docs-content .highlight .gp {
966
+ color: #555555;
967
+ }
968
+
969
+ .docs-content .highlight .gs {
970
+ font-weight: bold;
971
+ }
972
+
973
+ .docs-content .highlight .gu {
974
+ color: #800080;
975
+ font-weight: bold;
976
+ }
977
+
978
+ .docs-content .highlight .gt {
979
+ color: #aa0000;
980
+ }
981
+
982
+ .docs-content .highlight .kc {
983
+ color: #0000aa;
984
+ }
985
+
986
+ .docs-content .highlight .kd {
987
+ color: #0000aa;
988
+ }
989
+
990
+ .docs-content .highlight .kn {
991
+ color: #0000aa;
992
+ }
993
+
994
+ .docs-content .highlight .kp {
995
+ color: #0000aa;
996
+ }
997
+
998
+ .docs-content .highlight .kr {
999
+ color: #0000aa;
1000
+ }
1001
+
1002
+ .docs-content .highlight .kt {
1003
+ color: #00aaaa;
1004
+ }
1005
+
1006
+ .docs-content .highlight .m {
1007
+ color: #009999;
1008
+ }
1009
+
1010
+ .docs-content .highlight .n {
1011
+ color: #000000;
1012
+ }
1013
+
1014
+ .docs-content .highlight .p {
1015
+ color: #000000;
1016
+ }
1017
+
1018
+ .docs-content .highlight .s {
1019
+ color: #aa5500;
1020
+ }
1021
+
1022
+ .docs-content .highlight .na {
1023
+ color: #1e90ff;
1024
+ }
1025
+
1026
+ .docs-content .highlight .nb {
1027
+ color: #00aaaa;
1028
+ }
1029
+
1030
+ .docs-content .highlight .nc {
1031
+ color: #00aa00;
1032
+ text-decoration: underline;
1033
+ }
1034
+
1035
+ .docs-content .highlight .no {
1036
+ color: #aa0000;
1037
+ }
1038
+
1039
+ .docs-content .highlight .nd {
1040
+ color: #888888;
1041
+ }
1042
+
1043
+ .docs-content .highlight .ni {
1044
+ color: #800000;
1045
+ font-weight: bold;
1046
+ }
1047
+
1048
+ .docs-content .highlight .nf {
1049
+ color: #00aa00;
1050
+ }
1051
+
1052
+ .docs-content .highlight .nn {
1053
+ color: #00aaaa;
1054
+ text-decoration: underline;
1055
+ }
1056
+
1057
+ .docs-content .highlight .nt {
1058
+ color: #1e90ff;
1059
+ font-weight: bold;
1060
+ }
1061
+
1062
+ .docs-content .highlight .nv {
1063
+ color: #aa0000;
1064
+ }
1065
+
1066
+ .docs-content .highlight .ow {
1067
+ color: #0000aa;
1068
+ }
1069
+
1070
+ .docs-content .highlight .w {
1071
+ color: #bbbbbb;
1072
+ }
1073
+
1074
+ .docs-content .highlight .mf {
1075
+ color: #009999;
1076
+ }
1077
+
1078
+ .docs-content .highlight .mh {
1079
+ color: #009999;
1080
+ }
1081
+
1082
+ .docs-content .highlight .mi {
1083
+ color: #009999;
1084
+ }
1085
+
1086
+ .docs-content .highlight .mo {
1087
+ color: #009999;
1088
+ }
1089
+
1090
+ .docs-content .highlight .sb {
1091
+ color: #aa5500;
1092
+ }
1093
+
1094
+ .docs-content .highlight .sc {
1095
+ color: #aa5500;
1096
+ }
1097
+
1098
+ .docs-content .highlight .sd {
1099
+ color: #aa5500;
1100
+ }
1101
+
1102
+ .docs-content .highlight .s2 {
1103
+ color: #aa5500;
1104
+ }
1105
+
1106
+ .docs-content .highlight .se {
1107
+ color: #aa5500;
1108
+ }
1109
+
1110
+ .docs-content .highlight .sh {
1111
+ color: #aa5500;
1112
+ }
1113
+
1114
+ .docs-content .highlight .si {
1115
+ color: #aa5500;
1116
+ }
1117
+
1118
+ .docs-content .highlight .sx {
1119
+ color: #aa5500;
1120
+ }
1121
+
1122
+ .docs-content .highlight .sr {
1123
+ color: #009999;
1124
+ }
1125
+
1126
+ .docs-content .highlight .s1 {
1127
+ color: #aa5500;
1128
+ }
1129
+
1130
+ .docs-content .highlight .ss {
1131
+ color: #0000aa;
1132
+ }
1133
+
1134
+ .docs-content .highlight .bp {
1135
+ color: #00aaaa;
1136
+ }
1137
+
1138
+ .docs-content .highlight .vc {
1139
+ color: #aa0000;
1140
+ }
1141
+
1142
+ .docs-content .highlight .vg {
1143
+ color: #aa0000;
1144
+ }
1145
+
1146
+ .docs-content .highlight .vi {
1147
+ color: #aa0000;
1148
+ }
1149
+
1150
+ .docs-content .highlight .il {
1151
+ color: #009999;
1152
+ }