Transforming HTML to a CSS template

Today while in a cafe typing CSS manually into a text editor I realised I was basically doing something which could be easily automated. Here's an example of the code I've written to convert HTML to a CSS template:

require 'rexle'


class HtmlToCss

  def initialize(filename)

    @doc = Rexle.new File.read(filename)
    @selectors = []
    @nocss = %w(title link)
    @css = []

    @elements = {
      a:    "background-color: :color; ",
      body: "background-color: :color;
             align: center;",
      div:  "background-color: :color;",
      h1:   "background-color: :color; 
             color: #fff;
             font-family: Verdana, Arial, Helvetica, sans-serif; 
             font-size: 1.3em;",
      h2:   "background-color: :color; 
             color: #fff;
             font-family: Verdana, Arial, Helvetica, sans-serif; 
             font-size: 1.3em;",
      head: "background-color: :color;",
      html: "background-color: :color;",
      li:   "background-color: :color;",
      p:    "background-color: :color;",
      ul:   "background-color: :color;"
    }
  end

  def to_css()
    scan @doc.root
    @css.join "\n"
  end

  private

  def scan(e, indent='', parent_selector='')

    return if @nocss.include? e.name
    attr = e.attributes

    if attr.has_key?(:id) then
      selector = '#' + attr[:id]
    else
      selector = (parent_selector + ' ' + e.name).strip
    end

    unless @selectors.include? selector then

      @selectors << selector

      if @elements.has_key?(e.name.to_sym) then
        attributes = @elements[e.name.to_sym].strip.sub(':color','#a4f')
          .gsub(/\n/,'').split(/;\s*/).join(";\n" + indent + '  ')
      else
        attributes = ''
      end

      @css << indent + selector + " {\n#{indent}  #{attributes}\n#{indent}}"

    end

    parent_selector = selector unless selector == 'html'

    indent += '  '
    e.elements.each do |x|
      scan x, indent, parent_selector
    end
  end

end

css = HtmlToCss.new('index.html').to_css

Here's the ouput:

html {
  background-color: #a4f
}
  head {
    background-color: #a4f
  }
  body {
    background-color: #a4f
  }
    #wrap {
      background-color: #a4f
    }
      #header {
        background-color: #a4f
      }
        #header h1 {
          background-color: #a4f;
          color: #fff;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 1.3em
        }
        #nav1 {
          background-color: #a4f
        }
          #nav1 ul {
            background-color: #a4f
          }
            #nav1 ul li {
              background-color: #a4f
            }
              #nav1 ul li a {
                background-color: #a4f
              }
      #cols {
        background-color: #a4f
      }
        #cols h1 {
          background-color: #a4f;
          color: #fff;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 1.3em
        }
        #cols p {
          background-color: #a4f
        }
        #sitemap {
          background-color: #a4f
        }
          #sitemap a {
            background-color: #a4f
          }

          #sitemap ul {
            background-color: #a4f
          }
            #sitemap ul li {
              background-color: #a4f
            }
              #sitemap ul li a {
                background-color: #a4f
              }
              #sitemap ul li ul {
                background-color: #a4f
              }
                #sitemap ul li ul li {
                  background-color: #a4f
                }
                  #sitemap ul li ul li a {
                    background-color: #a4f
                  }
      #footer {
        background-color: #a4f
      }
        #footer div {
          background-color: #a4f
        }
          #footer div ul {
            background-color: #a4f
          }
            #footer div ul li {
              background-color: #a4f
            }
              #footer div ul li a {
                background-color: #a4f
              }
          #footer div p {
            background-color: #a4f
          }

file: index.html

<?xml version='1.0' encoding='UTF-8'?>
<html>
  <head>
    <title>Home | Bay Tree Community Cafe'</title>
    <link rel='stylesheet' type='text/css' href='css/layout.css'/>
  </head>
  <body>
    <div id='wrap'>
      <div id='header'>
        <h1>Bay Tree Community Cafe</h1>
        <div id='nav1'>
          <ul>
            <li>
              <a href='index.html'>home</a>
            </li>
            <li>
              <a href='hygiene.html'>other</a>
            </li>
            <li>
              <a href='links.html'>links</a>
            </li>
          </ul>
        </div>
      </div>
      <div id='cols'>
  <h1>heading</h1>
  <p>some content</p>
  <div id='sitemap'>
    <a name='sitemap'/>
    <ul>
      <li>
        <a href='index.html'>home</a>
      </li>
      <li>
        other

        <ul>
          <li>
            <a href='hygiene.html'>hygiene</a>
          </li>
          <li>
            <a href='outside-catering.html'>outside catering</a>
          </li>
          <li>
            <a href='classes.html'>classes</a>
          </li>
          <li>
            <a href='bsa.html'>BSA</a>
          </li>
        </ul>
      </li>
      <li>
        <a href='links.html'>links</a>
      </li>
      <li>
        <a href='contact-us.html'>contact us</a>
      </li>
    </ul>
  </div>
</div>
      <div id='footer'>
        <div>
          <ul>
            <li>
              <a href='index.html#sitemap'>Sitemap</a>
            </li>
            <li>
              <a href='contact-us.html'>Contact us</a>
            </li>
          </ul>
        </div>
        <div>
          <p>Bay Tree Community Cafe project © 2013</p>
        </div>
      </div>
    </div>
  </body>
</html>

Tags:

• html
• css
• transform
• convert
• template

Source:

2108hrs.txt

Published:

08-10-2013 21:08