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>