A touch of style

Enough with boring black'n'white stuff. We need to add some style to our creations. Here's the code from previous chapter with some CSS-neatness layered on top:

require "jsduck/tag/boolean_tag"

class Inner < JsDuck::Tag::BooleanTag
  def initialize
    @pattern = "inner"
    @signature = {:long => "inner", :short => "in"}
    @html_position = POS_DOC + 0.1
    @css = <<-EOCSS
      .signature .inner {
        color: orange;
        background: transparent;
        border: 1px solid orange;
      }
      .inner-box {
        border-color: orange;
      }
    EOCSS
    super
  end

  def to_html(context)
    <<-EOHTML
      <div class='rounded-box inner-box'>
      <p>This is an inner method, only accessible within the class itself.</p>
      </div>
    EOHTML
  end
end

As one might guess we assign a string of CSS to the @css field (using ruby heredoc syntax).

.signature .inner rule will assign styles to the small labels.

In to_html we wrap our paragraph inside a div with two class names:

• rounded-box is a builtin helper class that turns the div into nice box woth rounded corners.
• inner-box is a class we make up by ourselves to add some additional styles on top of what rounded-box provides.

The result will have a touch of orange, just as expected: