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 with 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:

To be frank, not the greatest artwork really. I'm sure you can do better. Go on, hack that CSS, make it shine. Then come back and read the next chapter were we go beyond boolean tags.