Introducing the HTML-to-CSS gem

The HTML-to-CSS gem can read a single HTML file or a directory of HTML files to generate a single CSS file or a CSS layout file and a CSS style file.

Example:

require 'html-to-css'

Dir.chdir '/home/james/projecth10w/wireframe'

h2c = HtmlToCss.new
css = h2c.to_css
layout = h2c.to_layout
style = h2c.to_style
puts style

output:

html {
background-color: #a5f
}
  body {
    background-color: #a5f
  }
    #wrap {
      background-color: #a5f
    }
      #header {
        background-color: #a5f
      }
        #header h1 {
          background-color: #a5f;
          color: #fff;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 1.3em;
          font: normal normal 32px "Verdana"
        }
        #nav1 {
          background-color: #a5f
        }
          #nav1 ul {
            background-color: #a5f
          }
            #nav1 ul li {
              background-color: #a5f
            }
              #nav1 ul li a {
                background-color: #a5f
              }
      #cols {
        background-color: #a5f
      }
        #cols div {
          background-color: #a5f
        }
          #nav2 {
            background-color: #a5f
          }
            #nav2 ul {
              background-color: #a5f
            }
              #nav2 ul li {
                background-color: #a5f
              }
                #nav2 ul li a {
                  background-color: #a5f
                }
          #cols div a {
            background-color: #a5f
          }
          #cols div ul {
            background-color: #a5f
          }
            #cols div ul li {
              background-color: #a5f
            }
              #cols div ul li a {
                background-color: #a5f
              }
              #cols div ul li ul {
                background-color: #a5f
              }
                #cols div ul li ul li {
                  background-color: #a5f
                }
                  #cols div ul li ul li a {
                    background-color: #a5f
                  }
          #cols div div {
            background-color: #a5f
          }
            #cols div div h1 {
              background-color: #a5f;
              color: #fff;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 1.3em
            }
            #cols div div img {
              
            }
          #cols div p {
            background-color: #a5f
          }
            #cols div p a {
              background-color: #a5f
            }
          #cols div h1 {
            background-color: #a5f;
            color: #fff;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 1.3em
          }
        #cols h1 {
          background-color: #a5f;
          color: #fff;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 1.3em
        }
        #cols p {
          background-color: #a5f
        }
        #cols ul {
          background-color: #a5f
        }
          #cols ul li {
            background-color: #a5f
          }
            #cols ul li a {
              background-color: #a5f
            }
      #footer {
        background-color: #a5f
      }
        #footer div {
          background-color: #a5f
        }
          #footer div ul {
            background-color: #a5f
          }
            #footer div ul li {
              background-color: #a5f
            }
              #footer div ul li a {
                background-color: #a5f
              }
          #footer div p {
            background-color: #a5f
          }

Tags:
Source:
2054hrs.txt
Published:
10-10-2013 20:54